Vue3 script Setup and TS error `Type 'string' is not assignable to type 'Stuff | undefined'.` workaround

Question

Using Vue3's script setup syntax and getting a weird ts error when assigning a variable as a prop value.

I have a type definition for Stuff: 'item' | 'box' | 'area' and I'm using that PropType my prop kind in the SearchBar component.

const props = defineProps({
  kind: { type: String as PropType<Stuff> },
  placeholder: String,
})

However when I fill that prop in on the component with a variable that has the value of 'item' I get this error:

Type 'string' is not assignable to type 'Stuff | undefined'.

I've seen this sort of error mentioning string and String before so there's even an error in the casing of string (I know TS uses lowercase and Vue uses Pascalcase).

If anyone has a good workaround or any advice I would really appreciate it!

Code images are unfortunately not allowed, please edit your question with a snippet of code in some actual text. — kissu
– kissu, Commented Dec 27, 2022 at 17:01
Thanks for the comment and 'edits' (which seem unnecessary honestly). I added a the props code, but I'm not sure what else you'd like me to do here. The only reason I have the other image is to show the whole error message I'm seeing. Thanks — LovelyAndy
– LovelyAndy, Commented Dec 27, 2022 at 17:10
I cleaned up a bit of grammar and removed some fluff. Nothing critical but no review is needed and people can focus on the actual things. Feel free to roll them back if it's annoying to you. All good with the other image, of course! — kissu
– kissu, Commented Dec 27, 2022 at 17:17

Lee Goddard · Accepted Answer · 2023-04-28 08:12:16Z

1

That is a common Ts error. I had the same before. try this:

    const props = defineProps({
      kind: { type: Stuff | undefined },
      placeholder: String,
    });

edited Apr 28, 2023 at 8:12

Lee Goddard

11.3k5 gold badges53 silver badges71 bronze badges

answered Dec 27, 2022 at 17:20

Mani Movassagh

1496 bronze badges

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

1 Comment

LovelyAndy Over a year ago

Thanks for the answer! I get an error using this syntax though that says No overload matches this call. Overload 1 of 3, '(props: string[]): Readonly<{ [x: string]: any; }>', gave the following error. and a few others. Not sure the best way to handle these

Collectives™ on Stack Overflow

Vue3 script Setup and TS error `Type 'string' is not assignable to type 'Stuff | undefined'.` workaround

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related