TypeScript中合并同功能不同类型函数，确保返回类型与输入一致

嘿，这个场景太常见了！你想要的不是单纯的联合类型，而是用泛型+类型约束来实现输入与返回值的类型绑定，这样就能把两个重复的函数合并成一个，同时严格保证类型一致性。

先来看改造后的代码：

// 先定义你的样式类型联合（如果还没定义的话）
type StyleType = ViewStyle | TextStyle;

function getStyle<T extends StyleType>(styles: T[]): T {
  return Object.assign({}, ...styles);
}

为啥这样管用？ #

这里的泛型T会自动推断你传入的数组类型——当你传ViewStyle[]时，T就是ViewStyle，返回值也会被严格限定为ViewStyle；传TextStyle[]时同理。完美解决了你“输入某一类型成员，返回值必须与之相同”的约束。

如果不用泛型，单纯用联合类型的话：

// 这种写法达不到你的要求！
function getStyle(styles: (ViewStyle|TextStyle)[]): ViewStyle|TextStyle {
  return Object.assign({}, ...styles);
}

TypeScript只能知道返回值是两种类型的联合，但没法关联输入和输出的具体类型，调用后你还得手动断言类型，完全不符合你的需求。

原代码对比 #

你原来的重复代码：

const getViewStyle = (styles: ViewStyle[]): ViewStyle => { return Object.assign({}, ...styles); };
const getTextStyle = (styles: TextStyle[]): TextStyle => { return Object.assign({}, ...styles); };

用泛型改造后，既保留了类型安全，又消除了代码冗余，一举两得～

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