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

Posted

技术标签:

【中文标题】带有 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,

【讨论】:

以上是关于带有 typescript 的 antd:列 align='right' 的表未编译的主要内容,如果未能解决你的问题,请参考以下文章

typescript+react+antd基础环境搭建

React Typescript:Antd 表过滤器

typescript使用antd中RangePicker组件实现时间限制 当前时间的前一年(365天)

typescript使用antd中RangePicker组件实现时间限制 当前时间的前一年(365天)

typescript使用antd中RangePicker组件实现时间限制 当前时间的前一年(365天)

React+TypeScript+H5+Antd-mobile项目搭建