Question

我有一个类型<Window.Resources> <ContextMenu x:Key="MyContextMenu"> <MenuItem Header="Remove" Command="{Binding RemoveItem}" CommandParameter="{Binding RelativeSource={RelativeSource AncestorType=ContextMenu}, Path=PlacementTarget.SelectedItem}" /> </ContextMenu> </Window.Resources> <Grid> <ListView x:Name="itemsListView" ItemsSource="{Binding MyItems}"> <ListView.Style> <Style TargetType="{x:Type ListView}"> <Setter Property="ContextMenu" Value="{StaticResource MyContextMenu}" /> <Style.Triggers> <DataTrigger Binding="{Binding SelectedItem, ElementName=itemsListView}" Value="{x:Null}"> <Setter Property="ContextMenu" Value="{x:Null}" /> </DataTrigger> </Style.Triggers> </Style> </ListView.Style> </ListView> </Grid>，其中包含用于呈现表格的信息：

pd.pivot_table(dropna = False)

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

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

但是，我收到一个错误，指出类型'Equipment'上不存在属性'title'，但是正如您在此处看到的那样：

Columns[]

我注意到VS Code中“设备”类型的导入为灰色，并且确实，如果删除导入，我不会抱怨“设备”类型不存在，因此很明显，我在定义错误，并以某种方式在本地创建了“设备的范围类型”。

在使我的columns数组成为数组时，我需要做什么以使内容参数通用并由{ header: 'Site name', cellContent: <Equipment,>(equipment: Equipment, rowIndex: number) => { return ( <div className={styles.equipmentNameContainer}>{equipment.title}</div> ); }, },键指定？

我尝试了谷歌搜索，但没有发现任何有关

编辑：此处（https://codesandbox.io/s/typescript-playground-export-ibhf7?fontsize=14&hidenavigation=1&theme=dark）的沙箱可以反映以下评论，但仍然存在问题

Answer 1

您可以使用以下方法解决此问题：

直接说TS T是设备基础类。这不是最佳选择，因为您失去了灵活性。

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;
    }
  }
];

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

1 个答案: