Vue+TS中Array类型Prop调用find方法报Vetur2339错误如何解决？

问题原因 #

你定义Prop的语法本身没有错误，报错是两个因素共同导致的：

1. 你将datasetsList设置为非必填（required: false）且没有设置默认值，这个Prop的实际类型是ParallelDataset[] | undefined的联合类型，TypeScript默认不允许直接调用可能为undefined的值上的数组方法。再加上Vetur对Vue2+组合式API的泛型Prop推导能力有限，直接将类型识别为了unknown，就抛出了找不到find方法的错误。
2. Vue2的Vue.extend配合@vue/composition-api使用时，确实存在非必填泛型Prop类型推导失效的已知问题，没有默认值的非必填Prop很容易被推导为unknown类型。

解决方案 #

你可以根据自己的业务场景选择以下任意一种方案：

• 给数组Prop设置默认值，这是最稳妥的方案，能保证Prop永远是数组类型，类型可以被正确推导：

props: {
  datasetsList: {
    type: Array as PropType<Array<ParallelDataset>>,
    required: false,
    // 数组/对象类型的默认值必须用工厂函数返回
    default: () => []
  }
},

修改后不需要加as断言就可以直接调用props.datasetsList.find。

• 如果你不想设置默认值，可以使用可选链处理可能为空的情况，比直接类型断言更安全：

const selectDataset = (radioValue: number) => {
  radioVmodel.value = String(radioValue);
  const targetDataset = props.datasetsList?.find(dataset => dataset.id === Number(radioValue));
  targetDataset && setCustomDataSet(targetDataset);
}

• 如果你确认父组件一定会传入该Prop，也可以继续使用你当前的as类型断言方案，只要保证运行时Prop不会为空就不会有问题。

另外如果是Vetur的误报，你可以将编辑器的Vue插件替换为Volar，Volar对Vue+TypeScript的类型推导支持远好于Vetur，很多Vetur误报的类型问题替换插件后会自动解决。

内容的提问来源于stack exchange，提问作者Smolikas