时间戳

首页 > 解决方案 > TS 属性在泛型定义的类型上不存在

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

问题描述

我有一个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）反映了下面的评论但仍然有问题

标签： typescripttypescript-generics

解决方案

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

  • 直接说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;
    }
  }
];

推荐阅读