带有 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使用antd中RangePicker组件实现时间限制 当前时间的前一年(365天)
typescript使用antd中RangePicker组件实现时间限制 当前时间的前一年(365天)