I have a child component with code:
export default {
props: {
search: {
type: String,
default: () => null,
},
}
}
And a parent component with code:
<template>
<ChildComponent :search="value" />
</template>
<script land="ts">
import ChildComponent from './ChildComponent.vue';
type Data = {
value: string | null;
};
export default {
data: Data {
return {
value: null,
}
}
}
</script>
In the parent component IDE underlines 'search' word in the part of code below
<ChildComponent :search="value" />
and shows an error:
"Vue: Type string | null is not assignable to type string | undefined"
So prop 'search' has type 'string | undefined' instead of 'string | null'. Why does it happen? I guess search prop is impossible to have undefined value. Even if I'll pass it manually.
Error disappears if I replace 'default: null' with 'required: true'. In this case prop search has type "string", but it doesn't suit me.
Is there a way to avoid this error?