Type 'string' is not assignable to type '"value1" | "value2" | undefined' (union type)

Question

I have a union type in Vue, which is optional (with the ? character )

(Edit: forgot to rename "MyInterface" to Props)

interface Props{
    setting?: 'value1' | 'value2'
}

const props = withDefaults(defineProps<Props>(), {
    setting: 'value1'
});

In the parent component, I pass downa variable set to a value that matches one of the union members:

    const setting = 'value1';
</script>

<template>

    <MyComponent :setting="setting" />        

But the ":setting" property has the error:

 Type 'string' is not assignable to type '"value1" | "value2" | undefined'  

If I would hardcode a string, the error goes away:

:setting="'value1'" 

Answer 1

As per your interface definition, You are assigning 'value1' | 'value2' as a data type for a setting prop But if you see you are assigning a string type value in a component property. That's the reason it is giving you a syntax error.

It should be :

interface Props{
    setting?: string
}

const props = withDefaults(defineProps<Props>(), {
    setting: 'value1'
});

Here is the official documentation link for more understanding.