props で required か default を付けないと "Object is possibly 'undefined'." になる

実践 TypeScript をあらためて読みながら触ってたら、props を呼ぶ際にエラー吐いた。

amzn.to

記述とエラー

<script lang="ts">
import { defineComponent, PropType } from 'vue';

export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: String,
    obj: {
      type: Object as PropType<{ name: string }>,
      required: true
    },
    arr: {
      type: Array as PropType<{ task: string }[]>
    }
  },
  computed: {
    myName(): string {
      return this.obj.name
    },
    myFirstTask(): string {
      return this.arr[0].task
    },
  }
});
</script>

myFirstTask の return this.arr[0].task の箇所で "Object is possibly 'undefined'." と言われてしまう。

原因と対応

そもそも props の arr が渡ってくるか分かっていないのが原因。 default か required プロパティを追加してあげることで解決する。

required

props: {
  arr: {
    type: Array as PropType<{ task: string }[]>,
    required: true
  }
}

default

props: {
  arr: {
    type: Array as PropType<{ task: string }[]>,
    default: []
  }
}