Antd使用Table组件时Typescript编译不通过，不影响编译结果。

问题描述

问 题

• antd-version: 2.6.0

• node: 7.3.0

• OS: win10

出现的问题：

按照官方提供的Table的demo运行时：

(92,42): error TS2322: Type '{ key: string; name: string; age: number; address: string; }[]' is not assignable to type 'T[]'.
  Type '{ key: string; name: string; age: number; address: string; }' is not assignable to type 'T'.

使用的是antd官方->Table第一个demo

核心代码：

const columns = [{
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    render: text => <a href="#">{text}</a>,
}, {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
}, {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
}, {
    title: 'Action',
    key: 'action',
    render: (text, record) => (
        <span>
      <a href="#">Action 一 {record.name}</a>
      <span className="ant-divider" />
      <a href="#">Delete</a>
      <span className="ant-divider" />
      <a href="#" className="ant-dropdown-link">
        More actions
      </a>
    </span>
    ),
}];
const data= [{
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
}, {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
}, {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
}];

<Table columns={columns} dataSource={data} />

tsconfig.json配置：

{
  "compilerOptions": {
    "moduleResolution": "node",
    "module": "commonjs",
    "target": "es6",
    "sourceMap": true,
    "allowSyntheticDefaultImports": true,
    "jsx": "react",
    "lib": ["dom", "es2015.promise", "es5"]
  },
  "exclude": [
    "node_modules"
  ]
}

追踪问题到Table.d.ts文件，是发现泛型的解析出错。

// 15行
export interface TableProps<T> {
    // 21行
    dataSource?: T[];
    //...
}
// 54行
export default class Table<T> extends React.Component<TableProps<T>, any>

如果将第21行dataSource?: T[];改成dataSource?: Object[]则不会error。

但是出现的原因不明，难道是我的配置问题？

解决方案

1. antd 升到最新版；

2. 参考 https://ant.design/components/table-cn/#在-TypeScript-中使用。

这篇关于Antd使用Table组件时Typescript编译不通过，不影响编译结果。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！