打字稿错误 ts(2345)：类型 \'undefined\' 不可分配给类型 \'Folder\'。（vue3 compositionAPI）答案

【问题标题】：Typescript Error ts(2345): Type 'undefined' is not assignable to type 'Folder'.(vue3 compositionAPI)打字稿错误 ts(2345)：类型 \'undefined\' 不可分配给类型 \'Folder\'。（vue3 compositionAPI）
【发布时间】：2022-10-14 08:47:35
【问题描述】：

我正在尝试将道具从父组件传递给 Vue.js 中的子组件。

在父组件中，

<template>
  <child v-for="(folder, idx) in folders" :key="idx" :folder="folder">

  </child>
</template>


<script lang="ts">
import {ref, defineComponent} from "vue";
import Child from "../components/Child.vue";
interface Folder {
    id: number,
    name: string | null,
}
export default defineComponent({
  name: "Parent",
  components: {Child},
  setup(){
    const folders = ref<Folder[]>()

    folders.value = [
      {
        id: 1,
        name: "aaa"
      },
      {
        id: 2,
        name: "bbb"
      }
    ]

    return {folders}
  }
})

在子组件中，

<template>
    <p>{{folder.name}}</p>
</template>

<script lang="ts">
import {defineComponent} from "vue";
interface Folder {
    id: number,
    name: string | null,
}

export default defineComponent({
    name: "Child",
    props:{
        folder:  Object as PropType<Folder>,
    },
    setup(){
        return {}
    }
})

使用以下错误代码，我得到

'文件夹 | 类型的参数undefined' 不可分配给参数类型为“文件夹”。类型“未定义”不可分配给类型 '文件夹'.ts(2345)

如何解决这个错误？

【问题讨论】：

错误究竟在哪里？问题可能不包含导致它的代码。在您发布的代码中，到目前为止没有 Folder | undefined 类型的值
错误在子组件html中
即使我没有在界面中使用“未定义”，我也会在错误中得到“未定义”。真奇怪。
我相信所有的道具默认都是Type | undefined，除非你也设置了required: true。

标签： typescript vue.js

【解决方案1】：

您应该将代码更改为以下内容：

   props: {
     folder: {
       type: Object as PropType<Folder>,
       required: true,
     }
   },

这样，“未定义”将不会被视为分配给文件夹类型的选项。

【讨论】：