TypeScript三元运算符类型收窄失效，与if-else为何不等价？

问题核心 #

你编写的泛型函数中，三元运算符版本未能将myStringArray的类型正确收窄为string[]，而if-else版本可以实现预期效果，这本质是TypeScript对两种代码结构的类型推导逻辑存在差异。

为什么三元运算符无法正确收窄类型？ #

当泛型约束为T extends string | string[]时，三元表达式的两个分支类型会被TypeScript推断为T & string[]（数组分支）和T[]（非数组分支）。这是因为TypeScript会保留泛型的约束关系，而非直接将T解析为具体的string或string[]类型，最终导致联合类型无法自动合并为单纯的string[]。

而if-else结构会触发TypeScript的控制流分析：在if (Array.isArray(myParam))分支内，TypeScript明确知道myParam的类型是string[]；在else分支内，myParam的类型是string。因此赋值给myStringArray后，类型会被正确推断为string[]。

让三元运算符实现正确类型收窄的方案 #

方案1：使用类型断言 #

直接对三元表达式的结果断言为string[]（需确保逻辑绝对安全）：

export const myFunction = <T extends string | string[]>(
  myParam: T
) => {
  let myStringArray = (Array.isArray(myParam) ? myParam : [myParam]) as string[];
};

方案2：通过条件类型明确推导 #

利用条件类型让TypeScript根据泛型输入动态推导返回类型，使三元表达式的类型与返回类型对齐：

export const myFunction = <T extends string | string[]>(
  myParam: T
): T extends string ? string[] : T => {
  return Array.isArray(myParam) ? myParam : [myParam];
};

这种方式下，当输入T为string时返回string[]，当T为string[]时返回自身，最终myStringArray的类型会符合预期。

两种表达式是否等价？ #

• 运行逻辑等价：从JavaScript执行层面看，三元运算符和if-else的判断、赋值逻辑完全一致，运行结果没有区别。
• 类型系统不等价：TypeScript对if-else会进行控制流级别的类型收窄，而三元运算符作为表达式，类型推导仅依赖泛型约束的直接组合，无法自动完成类型收窄。

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