如何复制TypeScript接口并自动替换副本的属性类型？

完全可以通过 TypeScript 内置的映射类型能力避免重复定义，无需逐行编写属性，还能规避手动维护时漏写、错写属性的问题。

具体实现步骤 #

• 保留你已经定义好的原生端基础接口ChannelOverlayStyles
• 定义一个通用泛型工具类型，逻辑是遍历传入类型的所有属性键，将所有属性值统一替换为指定的目标类型：

type ReplacePropertyType<T, TargetType> = {
  [Key in keyof T]: TargetType;
};

• 基于基础接口和上述工具类型，一行代码即可生成web端对应的类型：

export type ChannelOverlayStylesWeb = ReplacePropertyType<ChannelOverlayStyles, ViewStyleWeb>;

额外说明 #

• 该写法会1:1对齐原接口的属性结构，你之前手动编写的ChannelOverlayStylesWeb漏写了channelPackshotGradient属性，用映射方式生成的类型会自动包含该字段，不会出现属性遗漏。
• 后续如果需要给ChannelOverlayStyles新增、删除属性，web端的类型会自动同步更新，不需要两边手动修改，大幅降低维护成本。
• 如果存在部分属性不需要统一替换类型的场景，可以结合Omit、Pick等TypeScript内置工具类型做局部调整，举个例子：

// 示例：除channelLogo保留ViewStyle类型外，其余属性全部替换为ViewStyleWeb
type ChannelOverlayStylesWeb = Omit<ReplacePropertyType<ChannelOverlayStyles, ViewStyleWeb>, 'channelLogo'> & {
  channelLogo: ViewStyle;
};

内容的提问来源于stack exchange，提问作者Mr. Robot