Using Vue.js img element in Typescript Array

Question

I'm using Vue 2 and Typescript and I've declared a type in my types.ts file:

export type SetupSliderType = {
  name: SetupSliderEnum;
  image: HTMLImageElement;
  title: keyof I18nMessages;
  component: Function;
}

This gives me no errors.

In my RegisterSetup.tsx file I've declared an Array of that type:

private slides: Array<SetupSliderType> = [
    {
      name: SetupSliderEnum.solutions,
      image: <img src={solutions_logo}/>,
      title: I18nMessages['account.register.side.subheading'],
      component: this.renderSlideSolutions
    },
]

The 'image' line in my Array block gives me this error:

Type 'VNode' is missing the following properties from type 'HTMLImageElement': align, alt, border, complete, and 309 more.ts(2740)

types.ts(13, 3): The expected type comes from property 'image' which is declared here on type 'SetupSliderType'

What is the right way to use the <img> element for this syntax or what am I doing wrong?

In my edit, I changed "...I've declared a type enum in my..." to "...I've declared a type enum in my..." because the type you've shown isn't an enum, it's just a type (more specifically, it's a type alias for an object type). You might want to rename the steps.enum.ts file (or move the type elsewhere). — T.J. Crowder
– T.J. Crowder, Commented Jan 22, 2023 at 11:14
@T.J.Crowder Ah yes it actually wasn't in my enum file it was in my types.ts file and I got mixed up because I also made an enum file for it that's irrelevant to the question, so I just edited it, my bad. Thanks! — nouf alsalem
– nouf alsalem, Commented Jan 22, 2023 at 11:27

T.J. Crowder · Accepted Answer · 2023-01-22 11:12:57Z

1

When you use JSX/TSX to create an element, you're not creating a DOM element, you're creating an object that will be used by Vue.js (or React or similar) later to create or update a DOM element. As the error message is telling you, the type of object in your case is VNode, so you'd use VNode instead of HTMLInputElement in your type:

export type SetupSliderType = {
    name: SetupSliderEnum;
    image: VNode; // <================
    title: keyof I18nMessages;
    component: Function;
}

If you actually wanted to create an HTMLInputElement, you could do that via document.createElement, but it would be very unusual when using a library like Vue.js or React or similar.

answered Jan 22, 2023 at 11:12

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

nouf alsalem Over a year ago

I see! That makes sense and using VNode worked great. Thank you!

nouf alsalem Over a year ago

Sorry one last thing -- is just using the <img/> element the way I did in the Array block in the question the right way to do it? It gives no errors after using VNode but when running the page it all goes blank instead of outputting all the layouts and structuring I'd done. Every other page runs fine except the RegisterSetup.tsx page after using VNode (when reversed and taking out the image completely, it runs fine again)

T.J. Crowder Over a year ago

@noufalsalem - I'm afraid I don't use Vue.js. :-| Sorry not to be of more help!

Collectives™ on Stack Overflow

Using Vue.js img element in Typescript Array

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related