如何为React组件开发场景下的TypeScript类型重命名指定属性键

• 错误的类型交叉位置：将RenamedVariantOne直接与Props顶层结构交叉，仅会在Props顶层额外挂载重命名后的属性，完全没有修改嵌套在data.items数组内的VariantOne类型结构，无法达到替换内部键名的效果。
• 遗漏了联合类型分支的替换：目标修改对象是数组元素的联合类型分支，并非Props顶层属性，需要将原联合中的VariantOne分支替换为重命名后的版本。
• 附带拼写问题：原示例中出现的VarianOne（缺少末尾字符t）若不是实际导出的类型，需对齐为正确的VariantOne命名，避免类型匹配失效。

1. 构造重命名后的VariantOne类型 #

基于原有VariantOne类型，移除需要替换的两个原键，保留原有__typename可辨识标识与其他未修改的属性，再补上新键的类型定义：

type RenamedVariantOne = Omit<VariantOne, 'myAlias' | 'anotherAlias'> & {
  renamedAlias: VariantOne['myAlias']
  renamedAnotherAlias: VariantOne['anotherAlias']
}

该类型展开后等价于：

{
  __typename: 'VariantOne',
  renamedAlias: string,
  renamedAnotherAlias: string
}

既满足键名重命名需求，也保留了可辨识联合的判断依据，不会破坏TS对联合类型的收窄逻辑。

2. 修正Props的嵌套类型定义 #

移除之前错误的顶层交叉逻辑，将原data.items数组元素类型中的VariantOne分支，替换为刚才构造的RenamedVariantOne：

export type Props = {
  data: {
    title: string;
    // 替换联合类型中的VariantOne分支为重命名后的版本
    items: (RenamedVariantOne | VariantTwo)[];
  };
}

如果后续需要频繁做键名重命名，可以抽离可复用的工具类型，减少重复编写Omit的冗余代码：

type RenameKey<T, OldKey extends keyof T, NewKey extends string> = 
  Omit<T, OldKey> & { [K in NewKey]: T[OldKey] }

使用时可链式应用键名替换，避免手动维护旧键列表时出现遗漏。

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