解决vue3模板中ts类型检查异常

孙泽辉

发布于：2022年3月19日

字数：358字

时长：1分钟

次浏览

在script中类型已经明明白白的推断出来了，到了template中v-for循环数组array，竟然连item类型都推断不出来？？大坑！

我的问题是这样的：

 <!-- script 中代码 -->
<script lang="ts" setup>
const options = [
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
];
defineExpose({
    options
});
</script>

 <!-- template 中代码 -->
<template>
    <el-select
      v-model="selectValue"
      multiple
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
</template>

大体删减了一些无用代码，预期应像 Element Plus上的效果一致

实际效果是达到了，但是 typescript 这边报错了

typescript 说我的 item 是 unknown 类型，有手指头都能算出来数组里面的类型应该是：

type item = {
  value: string;
  label: string;
};

然后找到解决方案是

给 tsconfig.json 添加如下：

{
  "compilerOptions": {
    ...
    "target": "es5",
    "lib": ["dom","es5","ES2015.Promise","ES2015","es2017"],  
  },
  ...
}

问题成功解决：

思路最早是看这篇文档：

vue3+ts使用v-for出现unknown问题-CFANZ编程社区

但是照他的做法，没解决，反而其他类型都乱了，最终自己琢磨的

另外作者分析是 API 版本太低，从 ES5 改成 ES2015，实际上我是改成 ES5 解决的，可能原因不是版本太低，还需要继续研究是什么原因。