TS 属性在泛型定义的类型上不存在

Question

我有一个类型 Columns，其中包含用于呈现表格的信息：

export type Columns = {
  header: React.ReactNode;
  cellContent: <T>(content: T, rowIndex: number) => React.ReactNode;
  ...
}

然后我在一个将要呈现一些数据的组件中定义一个Columns[] 数组。您可以在此处查看示例：

{
  header: 'Site name',
  cellContent: <Equipment,>(equipment: Equipment, rowIndex: number) => {
    return (
      <div className={styles.equipmentNameContainer}>{equipment.title}</div>
    );
  },
},

但是，我收到一个错误，即“设备”类型上不存在属性“标题”，但正如您在此处看到的那样：

export type Equipment = {
  _entity: ResourceType.EQUIPMENT;
  id: number;
  title: string;
  ...
}

我注意到设备类型的导入在 VS Code 中是灰色的，事实上，如果我删除导入，我不会抱怨设备类型不存在，所以很明显我定义了一些错误并且以某种方式创建了一个“本地设备的作用域类型'。

在制作我的列数组时，我需要做什么才能使内容参数通用并由cellContent 键指定？

我试过谷歌搜索，但没有找到任何相关信息

编辑：此处提供的沙盒 (https://codesandbox.io/s/typescript-playground-export-ibhf7?fontsize=14&hidenavigation=1&theme=dark) 反映了以下评论但仍有问题

Answer 1

您可以通过以下方式解决此问题：

• 直接说TS T就是Equipment基类。不是最佳选择，因为您失去了灵活性。

import { Equipment } from "./Equipment";

type Columns = {
  header: string;
  cellContent: <T extends Equipment>(content: T, rowIndex: number) => string;
};

const columns: Columns[] = [
  {
    header: "Site name",
    cellContent: (equipment: Equipment, rowIndex: number) => {
      return equipment.title;
    }
  }
];

• 将 T 作为泛型添加到 Type，这在我看来要好得多：

type Columns<T> = {
  header: string;
  cellContent: (content: T, rowIndex: number) => string;
};

const columns: Columns<Equipment>[] = [
  {
    header: "Site name",
    cellContent: (equipment: Equipment, rowIndex: number) => {
      return equipment.title;
    }
  }
];