TypeScript中如何将泛型联合类型参数收窄为子集类型？

我最近写了一段简化的TypeScript代码，用来处理颜色类型的判断，但在返回语句处遇到了类型错误，具体代码如下：

type OnlyBlue<T> = T extends 'blue' ? 'blue' : null

function parseBlue<Color extends 'red' | 'green' | 'blue'>(input: Color): OnlyBlue<Color> {
  if (input === 'blue') {
    const output = input
    return output
  }

  return null
}

遇到的问题 #

• 在return output的位置，TS提示类型不匹配：类型“Color”不能赋值给类型“OnlyBlue”
• 在return null的位置，TS提示类型不匹配：类型“null”不能赋值给类型“OnlyBlue”

更奇怪的是，在if (input === 'blue')的分支里，我原本以为input会被收窄为'blue'，但实际TS显示output的类型还是泛型Color，完全不是我预期的'blue'类型。

问题原因 #

这其实是TypeScript对泛型联合类型的类型收窄限制导致的。这里的Color是一个泛型参数，它代表的是联合类型'red' | 'green' | 'blue'中的某一个具体成员（而非整个联合类型）。

当你做input === 'blue'判断时，TS没办法提前确定当前调用时Color具体是联合类型里的哪一个值——比如调用parseBlue('red')时Color是'red'，调用parseBlue('blue')时Color是'blue'。在函数内部，TS无法针对泛型参数做精准的类型收窄，所以不会把input的类型缩小为'blue'。

解决方法 #

这里给你推荐几种实用的解决思路：

方法1：类型断言（简单直接）

直接通过类型断言告诉TS当前值的类型符合返回要求：

type OnlyBlue<T> = T extends 'blue' ? 'blue' : null

function parseBlue<Color extends 'red' | 'green' | 'blue'>(input: Color): OnlyBlue<Color> {
  if (input === 'blue') {
    return input as OnlyBlue<Color>
  }

  return null as OnlyBlue<Color>
}

方法2：函数重载（类型安全）

通过定义重载签名，明确不同输入对应的输出类型，TS会自动做正确的类型推断：

// 重载签名：明确不同输入的返回类型
function parseBlue(input: 'blue'): 'blue';
function parseBlue(input: 'red' | 'green'): null;
// 实现签名：处理实际逻辑
function parseBlue(input: 'red' | 'green' | 'blue'): 'blue' | null {
  if (input === 'blue') {
    return input
  }
  return null
}

这种方式下，TS能完美识别分支里的类型，而且外部调用时的类型提示也会更精准。

方法3：自定义类型守卫（优雅的泛型处理）

用自定义类型守卫帮助TS识别泛型参数的子集类型：

type OnlyBlue<T> = T extends 'blue' ? 'blue' : null

// 自定义类型守卫，提取泛型中属于'blue'的部分
function isBlue<T extends 'red' | 'green' | 'blue'>(input: T): input is Extract<T, 'blue'> {
  return input === 'blue'
}

function parseBlue<Color extends 'red' | 'green' | 'blue'>(input: Color): OnlyBlue<Color> {
  if (isBlue(input)) {
    return input // 此时input被正确收窄为Extract<Color, 'blue'>
  }
  return null as OnlyBlue<Color>
}

Extract<Color, 'blue'>会动态提取Color中匹配'blue'的类型，配合类型守卫就能让TS正确识别分支内的类型。

备注：内容来源于stack exchange，提问作者Ramon Balthazar