为什么反应表列不接受一个函数作为访问器?

Question

我在将应用程序转换为typescript时遇到了一个小问题。以下是(缩短的)代码:

我有一个具有简单字符串属性的类型:

export type Person = {
birth_date: string
...

在使用react-table:

的自定义表组件中使用

import {useTable, useSortBy, Column} from 'react-table'
const PersonTable: FC<{persons: Person, columns: Column<Person>}> = ({ persons, columns }) => {
const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
useTable<Person>({ columns, data: persons }, useSortBy)
...

因为birth_date的格式是YYYY-MM-DD，所以我想在定义列时将其更改为可读的内容，其中formatDate返回字符串:

const columnsPersons = useMemo(() => [
{
Header: 'Birth date',
accessor: (row: Person) => formatDate(row.birth_date)
}
], [])

但是当我设置

<PersonTable columns={columnsPersons} ...

我得到以下错误(缩短):

Type '{ Header: string; accessor: string; }' is not assignable to type '{ accessor: "birth_date"; }'.
Types of property 'accessor' are incompatible.
Type 'string' is not assignable to type '"birth_date"'.

我知道我可以使用函数作为访问器，因为这是可行的。但我不知道我是否使用和/或输入正确。如有任何帮助，不胜感激。

Answer 1

看起来您从formatDate返回的类型比访问器所期望的更宽。你应该从formatDate返回一个'birth_date'类型，而不是字符串。或者将列描述为{'从formatDate返回的内容':string}而不是{'birth_date': string}

// 1.
const formatDate = (date) => return date as 'birth_date'
// 2. 
const formatDate = (date: string): 'another_birth_date' => { .... }
const PersonTable: FC<{persons: Person, columns: Column<{'another_birth_date': string}>