TypeScript中如何给泛型IAssetGetManyResponseDto传递类型参数

错误原因 #

你定义的IAssetGetManyResponseDto是带泛型参数<T>的接口，使用时必须传入T对应的具体业务类型（也就是你items数组里每个元素的类型），不能直接使用泛型接口本身。

解决步骤 #

1. 先确认你单个资产的业务类型 #

你需要先定义/找到项目中单个资产的类型，示例如下（根据你的实际业务字段调整）：

// 示例：单个资产的类型定义
interface IAsset {
  id: string;
  name: string;
  createTime: string;
  // 其他你业务里资产的字段
}

2. 给useState传入完整的泛型参数 #

把上面的资产类型作为参数传给IAssetGetManyResponseDto，两种常用写法选其一即可：

// 写法1：初始值为undefined，需要后续做空值判断
const [data, setData] = useState<IAssetGetManyResponseDto<IAsset>>();

// 写法2：设置初始默认值，后续不用额外做空值兼容，更推荐
const [data, setData] = useState<IAssetGetManyResponseDto<IAsset>>({
  items: [],
  totalCount: 0
});

3. 访问响应内容的正确方式 #

如果你用写法1（初始值为undefined），访问属性时要加可选链?.避免运行时报错：

// 访问资产数组：
data?.items
// 访问资产总条数：
data?.totalCount

// 渲染组件时可以加空值 fallback 更稳妥
return (
  <div>
    <NewAssetTable items={data?.items ?? []} />
  </div>
);

如果你用写法2设置了初始值，可以直接访问属性，不需要空值判断：

<NewAssetTable items={data.items} />

额外优化建议 #

建议给接口请求方法getAllAssets也加上返回值类型约束，保证全链路类型一致性：

// 修改api定义
export const getAllAssets = (): Promise<IAssetGetManyResponseDto<IAsset>> => {
  // 你的原有请求逻辑
}

内容的提问来源于stack exchange，提问作者elderlyman