如何扩展用于React组件Props的TypeScript类型并使用不同变量名

要实现让differentVariable1、differentVariable2与myType中variable1、variable2类型一致但变量名不同，同时保留额外字段，你可以通过提取原类型字段的类型或者自定义映射类型来实现，以下是几种可行方案：

方案1：直接提取原类型的字段类型 #

直接从myType中提取对应字段的类型，手动定义新的变量名，同时添加额外字段：

import type { myType } from './path-to-file';

interface MyInterface {
  differentVariable1: myType['variable1']; // 复用variable1的string类型
  differentVariable2: myType['variable2']; // 复用variable2的boolean类型
  anExtraVariable: string;
}

const MyComponent: React.FC<MyInterface> = ({ differentVariable1, differentVariable2, anExtraVariable }) => {
  return <div>{/* 组件内容 */}</div>;
};

方案2：结合Omit和类型别名（适合需要保留原类型部分字段但重命名的场景） #

如果原类型字段较多，或者需要灵活调整，可以先移除原字段，再添加重命名后的字段：

import type { myType } from './path-to-file';

// 先创建移除原字段的基础类型，再添加重命名后的字段
type MyInterface = Omit<myType, 'variable1' | 'variable2'> & {
  differentVariable1: myType['variable1'];
  differentVariable2: myType['variable2'];
  anExtraVariable: string;
};

const MyComponent: React.FC<MyInterface> = ({ differentVariable1, differentVariable2, anExtraVariable }) => {
  return <div>{/* 组件内容 */}</div>;
};

方案3：通用映射类型（适合批量重命名字段） #

如果需要批量重命名多个字段，可以定义一个通用的重命名类型，提升复用性：

import type { myType } from './path-to-file';

// 定义通用重命名类型
type RenameFields<T, R extends Record<keyof T, string>> = {
  [K in keyof T as R[K]]: T[K];
};

// 映射原类型的字段到新名称
type RenamedMyType = RenameFields<myType, {
  variable1: 'differentVariable1',
  variable2: 'differentVariable2'
}>;

// 组合重命名后的类型和额外字段
type MyInterface = RenamedMyType & {
  anExtraVariable: string;
};

const MyComponent: React.FC<MyInterface> = ({ differentVariable1, differentVariable2, anExtraVariable }) => {
  return <div>{/* 组件内容 */}</div>;
};

关键说明 #

• 不要直接继承myType，因为继承会强制要求组件接收原变量名（variable1、variable2），而你需要的是不同的变量名。
• 使用myType['variable1']这种索引访问类型，可以确保新变量和原字段类型严格保持一致，后续原类型更新时，新变量类型会自动同步。

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