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,
  },
]

  // 页面定义

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

    Type '{ title: string; dataIndex: string; align: string; width: number; }' is not assignable to type 'ColumnType'.
      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[] = [
            {
                title: '资源名',
                dataIndex: 'name',
                key: 'name',
                align: "center",
                width: 120,
            },
            {
                title: '操作',
                key: 'action',
                align: "center",
                width: 120,
            },
        ]

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

你可能感兴趣的:(前端,vue.js,前端,javascript,anti-design-vue)