React中如何定义包含title属性的泛型类型T？

要让泛型T确保包含title属性，你可以通过泛型约束来实现，以下是两种常用方式：

方式一：定义约束接口 #

先声明一个包含title属性的接口，让泛型T继承这个接口，就能保证传入的类型必然具备title：

// 定义约束接口，可根据实际需求调整title的类型
interface HasTitle {
  title: string;
}

// 主函数使用泛型约束
function processCheckboxItems<T extends HasTitle>(items: T[]) {
  items.forEach(item => {
    // 现在可以安全访问item.title
    renderCheckbox(item.title);
    // 同时保留T类型的其他属性
    console.log(item.id); // 假设某个服务返回的类型有id属性，依然可以正常访问
  });
}

方式二：直接在泛型中写约束 #

如果不想额外定义接口，也可以直接在泛型声明中指定约束条件：

// 直接约束T必须包含title属性，类型可按需调整
function processCheckboxItems<T extends { title: string | number }>(items: T[]) {
  items.forEach(item => {
    console.log(item.title);
  });
}

注意事项 #

• 如果不同服务返回的title类型不一致（比如有的是字符串，有的是数字），可以把约束中的类型改成string | number或者更宽泛的类型，适配实际场景。
• 这种约束方式不会丢失原类型的其他属性，依然能保留各个服务返回类型的独特性，同时确保title属性存在。

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