带有 typescript 的 antd：列 align='right' 的表未编译

Posted 2023-02-22

【中文标题】带有 typescript 的 antd：列 align=\'right\' 的表未编译

【英文标题】：antd with typescript : Table with Column align='right' is not compiling带有 typescript 的 antd：列 align='right' 的表未编译

【发布时间】：2020-08-14 14:14:40

【问题描述】：

我正在使用带有 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;

【问题讨论】：

align: 'right' as 'right' 会修复它吗？ github.com/ant-design/ant-design/issues/17281

ant.design/components/table/#Using-in-TypeScript 看看这个，与普通的 javascript 相比，有一种不同的方法

谢谢@Dario，@carrany - 两个答案都有效。

【参考方案1】：

试试这个。它为我工作

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

【参考方案2】：

这对我有用。

align: 'right' as const,

所以代码看起来像这样：

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

【参考方案3】：

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

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

3 种方法来解决您的问题。

【参考方案4】：

它对我有用

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

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