<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: 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: 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"]
}

修改完就没问题了