typescript - 道具可能未定义

Question

我有一个小的 Vue 功能组件，它从它的父级获取一个道具：

export default defineComponent({
  name: 'ExpandedMovieInformation',
  props: {
    movie: {
      type: Object as PropType<Movie>,
    },
  },
  setup(props, { emit }) {
    const { movie } = props;
  },
});
</script>

<template>
  <div>
    <div class='overlay'>
      <h1>{{ movie.title }}</h1>
      <span class='release-date'>{{ movie.release_date }}</span>
      <p>{{ movie.overview }}</p>
    </div>
  </div>
</template>

在父组件中启动组件：

<ExpandedMovieInformation
  :movie="currentMovie" />

代码可以编译，但在模板中我收到以下警告：

如何正确地将类型分配给道具，使其不可能未定义？

Answer 1

您在制作 ExpandedMovieInformation 列表组件时提供了 movie 参数，如下所示：

<ExpandedMovieInformation :move="currentMovie" />

并不意味着每个人都会这样做，有人可能会在没有该属性的情况下制作组件：

<ExpandedMovieInformation />

因此，该属性可能未定义。
要解决此问题，您可能需要为属性添加默认值，如下所示：

props: {
    movie: {
      type: Object as PropType<Movie>,
      default: {}
    },
  },