Ant Design Vue Table 列属性报错 Type ‘string‘ is not assignable to type ‘AlignType | undefined‘.

记录一个很奇葩的问题，使用 ant design vue table的时候，如果定义的 列数组不加类型限制，在 ts 或者 tsx里面，编译build会报错：

const columns = [
  {
    title: '资源名',
    dataIndex: 'name',
    key: 'name',
    align: "center",
    width: 120,
  },
  {
    title: '操作',
    key: 'action',
    align: "center",
    width: 120,
  },
]

  // 页面定义
<Table columns={this.columns} dataSource={this.datas} />

这个时候，如果本地运行 npm run dev是没问题的，但是在npm run build时候，就会报错，通不过TS的类型教研报错：

    Type '{ title: string; dataIndex: string; align: string; width: number; }' is not assignable to type 'ColumnType<any>'.
      Types of property 'align' are incompatible.
        Type 'string' is not assignable to type 'AlignType | undefined'.

而 AlignType 类型 又是 ant design vue 的内部类型，外边不能直接 import 引用，所以也不用不了下面的转换方案：

"center" as AlignType

修复方案，要使用如下的定义方案才可以，很简单就是给列定义加上类型限制：

        type TableDataType = string // table data的类型
        const columns: TableColumnType<TableDataType>[] = [
            {
                title: '资源名',
                dataIndex: 'name',
                key: 'name',
                align: "center",
                width: 120,
            },
            {
                title: '操作',
                key: 'action',
                align: "center",
                width: 120,
            },
        ]

整体感觉 TypeScript 的类型限制方案还有缺陷或者说不完美，要么就和 Java 强类型一样，用枚举限制某些值，真的没必要出现 Type 这种不伦不类的数据类型，还容易和 Interface 极度混淆，这对于非专业前端的后端来说真的是有点痛苦