TS2339：打字稿中 @type/react-table 的类型上不存在属性“单元格”

Question

我使用@type/react-table 为我的表设置列，我的IDE 出现错误，抱怨Cell 的类型不正确。我认为它是由Cell 引起的，是@type/react-table 的可选类型我该如何解决这个问题？

//column.tsx
import {Column, Cell} from 'react-table';

export interface ColumnValue {
    [key: string]: any;
}
export type TableColumn = Column<ColumnValue>
export function createColumn(colDef: TableColumn): TableColumn {
  return colDef;
}
export const name = createColumn({
  id: 'name',
  Header: 'Name Column',
  Cell({value}}) {
    return value.hyperlink
  },
});


//column.test.tsx
import {render} from '@testing-library/react';
import {name} from './Name';

describe('Test Name Column', () => {

  it('shows the name', () => {
    const {getByText} = render(
      name.Cell({
      // Error show TS2339: Property 'Cell' does not exist on type 'TableColumn'
        value: {hyperlink: 'asadasd'}}),
      })
    );
    expect(getByText('i am name')).toBeTruthy();
  });
});

Answer 1

Column 的定义是一组描述可能的列配置的不同类型的联合。只有其中一些具有Cell 属性。 ColumnGroup 没有。因此，您不确定Column 类型的变量是否支持Cell 属性。

您可以通过将 createColumn 函数设为通用来解决此问题。它强制 colDef 可分配给 TableColumn 但不会扩大类型。

export function createColumn<C extends TableColumn>(colDef: C): C {
  return colDef;
}

现在您会在更进一步的链中得到一个错误，因为 Cell 预计会以完整的 CellProps 调用。

---

更新：

当前设置将您的列配置中有效Cell 的道具类型推断为CellProps<ColumnValue, any>。这意味着你可以直接写 Cell({value}) { 而不指定 props 类型。

您不能使用 的 Cell 的推断 props 类型，并且还获取打字稿来推断您的特定 Cell 仅使用这些道具 value （至少不是没有一些高级 Typescript 技巧）。

很容易声明 Cell 只需要一个 value 属性，但你必须明确声明。

export const name = createColumn({
  id: 'name',
  Header: 'Name Column',
  Cell({value}: {value: ColumnValue}) {
    return value.hyperlink
  },
});

---

React 测试库的 render 方法期望使用 ReactElement 调用。由于ColumnValue {[key: string]: any;} 的松散定义，现在您的Cell 返回any。但可能value.hyperlink 是string，这将是一个打字稿错误。您应该将其包装在一个片段中，可以是 Cell 本身，也可以是 render。

export const name = createColumn({
  id: 'name',
  Header: 'Name Column',
  Cell({value}: {value: {hyperlink: string}}) {
    return value.hyperlink
  },
});

上面的定义会导致测试出错，所以需要这样做：

const { getByText } = render(
  <>
    {name.Cell({
      value: { hyperlink: "asadasd" }
    })}
  </>
);