javascript - 接口(interface)不可分配给 Record 类型

Question

我创建了一个通用的 react 组件，如下所示:

export interface GenericTableProps<T extends Record<string, unknown>> {
  columns: Column<T>[];
  data: T[];
}

const GenericTable = <T extends Record<string, unknown>>({
  columns,
  data,
}: GenericTableProps<T>): ReactElement => {
  ...
}

这就是我使用该组件的方式:

const data: StudentsDto[] = useMemo(() => tableData ?? [], [tableData]);
const columns: Column<StudentsDto>[] = useMemo(() => tableColumns, []);
<GenericTable columns={columns} data={data} />

这给了我一个 typescript 错误:

Type 'StudentsDto[]' is not assignable to type 'Record<string, unknown>[]'.
  Type 'StudentsDto' is not assignable to type 'Record<string, unknown>'.
    Index signature for type 'string' is missing in type 'StudentsDto'

StudentsDto 如下所示:

export interface StudentsDto {
  index?: number;
  name?: string;
  lastName?: string;
  dob?: string;
  ...
}

我应该提到，我无法更新 StudentsDto 接口(interface)，因为它是使用 openApi 生成的。

我该如何解决这个问题？

Answer 1

此错误是由于 typescript 的类型推断( here's the official doc 和 related answer 可以帮助理解它)

@subrato-pattanaik 很明显，unknown当您之后缩小类型时应该使用。您可以使用 any接受任何类型。

对于您的具体情况，如果您需要制作接口(interface) GenericTableProps接受不同类型...

• 其中一些您目前还不知道:我会使用object类型，因为它比 Record<string, any> 更具可读性(差异here)

  export interface GenericTableProps<T extends object> {
  //...
  

• 而且你都知道:我会创建一个新的接口(interface)来扩展 GenericTableProps 的所有类型。可以接受并使用该特定类型。这种方法是首选方法，因为您将拥有更窄的类型，并且可以帮助您避免类型错误。

  interface GenericTableDataType extends StudentsDto, ProfessorsDto {}
  
  export interface GenericTableProps<T extends GenericTableDataType> {
  //...