Prop with default value gets undefined type in Vue 2

64 Views Asked by At

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?

0

There are 0 best solutions below