table pagination position typescript type is wrong, document is Array, such as ['bottomRight']

[mizhousoft]

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

https://ant.design/components/table-cn/

Steps to reproduce

const pagination = {
position: ['bottomLeft']
}

let locale = getTableLocale(fetchStatus)

return (
<Table loading={loading} columns={columns} dataSource={dataSources.content}
pagination={pagination} rowKey={record => record.id} size="middle" bordered locale={locale} />
)

What is expected?

typescript project does not report the error

What is actually happening?

error : 不能将类型“string[]”分配给类型“TablePaginationPosition[]”。

Environment	Info
antd	4.2.4
React	16.13.1
System	windows
Browser	chrome 83

[ant-design-bot]

Hello @vmwell. Please provide a online reproduction by forking this link https://u.ant.design/codesandbox-repro or a minimal GitHub repository. Issues labeled by Need Reproduce will be closed if no activities in 7 days.

你好 @vmwell, 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击 此处 创建一个 codesandbox 或者提供一个最小化的 GitHub 仓库。7 天内未跟进的 issue 将会被自动关闭。

[mizhousoft]

@ant-design-bot I know, but open the webpage too slow, no vpn

[afc163]

You can choose to provide a minimal GitHub repository.

[mizhousoft]

@afc163 GitHub repository: https://github.com/vmwell/antd-demo

Table define in App.tsx file

[keithort]

@afc163 Here is a codesandbox repo of the issue:
repo

[afc163]

- position: ["bottomLeft"]
+ position: ["bottomLeft" as "bottomLeft"]

You can try this as workaround now.

[mizhousoft]

it is ok, thanks.

[zombieJ]

It's not a antd bug. Typescript will tread as string[] when not define its type. So any const will make TS covert:

position: ["bottomLeft" as const]

ref https://www.typescriptlang.org/play?#code/C4TwDgpgBACg9gZwDIEsHCgXigCgOQA2EAZsHlAD5R4BOKA5gBZkCUA2gLoDcAUDwMZwAduigBDLFDaESZcQiiCRwbnyWiARgC54yNBmxjeA4QjhEAdATj0cGllyA

Or you can just reuse pagination define:

const pagination: TableProps<any>['pagination'] = {
  position: ['bottomLeft'],
};

const table = <Table pagination={pagination} />;