帶有 typescript 的 antd：列 align='right' 的表未編譯

Question

我正在使用帶有 Typescript 的 antd Table 如下

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

當我將align: 'right'賦予其中一列時，它沒有編譯。 顯示以下錯誤。 我無法弄清楚這些問題的根本原因。 任何幫助表示贊賞。

Types of property 'align' are incompatible.
          Type 'string' is not assignable to type '"right" | "left" | "center" | undefined'.  TS2322

    47 |   public render() {
    48 |     return (
  > 49 |       <Table dataSource={data} columns={columns2} />
       |                                ^
    50 |     );
    51 |   }
    52 | }

完整代碼是

import React from "react";
import { Table } from "antd";


const columns2 = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
    align: 'right'
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
];

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


export class Sales extends React.Component<{}, {}> {
  public render() {
    return (
      <Table dataSource={data} columns={columns2} />
    );
  }
}

export default Sales;

Answer 1

import { AlignType } from 'rc-table/lib/interface';

align: 'right' as 'right',// not recommend
align: 'right' as const,// ok
align: 'right' as AlignType,// good

3種方法來解決您的問題。

Answer 2

試試這個。 它為我工作

{
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
      align: 'right' as 'right',
}

Answer 3

這對我有用。

align: 'right' as const,

所以代碼看起來像這樣：

{
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
      align: 'right' as const,
}

Answer 4

它為我工作

import { AlignType } from 'rc-table/lib/interface'

{
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
      align: 'right' as AlignType,
}

Answer 5

你可以在 const 中使用 align。

這是一個示例列名

{ title: 'Name', dataIndex: 'name', key: 'name', align: "center", },