vue3+ts使用v-for出现unknown问题

原创已于 2022-02-24 11:26:06 修改 · 8k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

于 2022-02-23 18:23:31 首次发布

typeScript 专栏收录该内容

4 篇文章

订阅专栏

在Vue3+TypeScript项目中遇到v-for循环时，tableItem被识别为unknown类型。问题根源在于tsconfig.json配置，由于target设置为""es5""，导致TypeScript内置的JS API版本过低。解决方案是将target改为""ES2015""，或者添加""lib"": [""es2017"

<template>
  <el-table :data="tableData" style="width: 1200px">
    <el-table-column
      v-for="tableItem in tableHeader"
      :fixed="tableItem.fixed"
      :prop="tableItem.prop"
      :label="tableItem.label"
      :width="tableItem.width"
      :key="tableItem.prop"
    />
    <el-table-column fixed="right" label="Operations" width="180">
      <template #default="add">
        <el-button type="text" size="small">添加</el-button>
        <el-button type="text" size="small">编辑</el-button>
        <el-button type="text" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup lang="ts">
import { reactive, readonly, ref } from "vue";

interface TableHeaderItem {
  prop: string;
  label: string;
  width: string;
  fixed?: boolean;
}
interface TableDataItem {
  id: number;
  date: string;
  name: string;
  state: string;
  city: string;
  address: string;
  zip?: string;
  tag?: string;
}

const tableHeader = ref<TableHeaderItem[]>([
  {
    prop: "id",
    label: "Id",
    width: "120",
    fixed: true,
  },
  {
    prop: "date",
    label: "Date",
    width: "150",
  },
  {
    prop: "name",
    label: "Name",
    width: "120",
  },
  {
    prop: "state",
    label: "State",
    width: "120",
  },
  {
    prop: "city",
    label: "City",
    width: "120",
  },
  {
    prop: "address",
    label: "Address",
    width: "600",
  },
  {
    prop: "zip",
    label: "Zip",
    width: "120",
  },
  {
    prop: "tag",
    label: "Tag",
    width: "120",
  },
]);

const tableData = ref<TableDataItem[]>([
  {
    id: 1,
    date: "2016-05-03",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
    tag: "Home",
  },
  {
    id: 2,
    date: "2016-05-02",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
    tag: "Office",
  },
  {
    id: 3,
    date: "2016-05-04",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
    tag: "Home",
  },
  {
    id: 4,
    date: "2016-05-01",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
    tag: "Office",
  },
]);

</script>

这里的tableHeader我们已经定于好了类型，但是呢，tableItem却识别不出类型来，直接显示unknown类型

经过一番检查发现是tsconfig.json文件配置问题

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "types": [
      "element-plus/global"
    ],
    "isolatedModules": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

由于target: "es5",这个typeScript内置的JS API版本太低，改成 ES2015就行

{
  "compilerOptions": {
    "target": "es2015",
    "module": "commonjs",
    "types": [
      "element-plus/global"
    ],
    "isolatedModules": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

或者修改新增一下 "lib": ["es2017","DOM"], 也是可以的，如下

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es2017","DOM"],
    "module": "commonjs",
    "types": [
      "element-plus/global"
    ],
    "isolatedModules": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

修改完就没问题了