带联合类型的条件类型导致函数无法调用的问题分析

这个问题的根源在于TypeScript的分布式条件类型特性——当条件类型的泛型参数是联合类型时，TypeScript会自动把联合的每个成员单独代入条件判断，再把结果重新联合起来。

在你的代码里，Container<{ boxedNumber: number } | number>会被展开成：

ObjectContainer<{ boxedNumber: number }> | ObjectContainer<number>

而联合类型的方法调用有个严格规则：调用时传入的参数必须能匹配联合中所有分支的方法参数。也就是说，你传入的33只能匹配ObjectContainer<number>的set，但无法匹配ObjectContainer<{ boxedNumber: number }>的set（它需要一个带boxedNumber属性的对象），所以TypeScript直接报错。

解决方案：阻止条件类型的分布式展开 #

我们可以通过把泛型参数T包裹在一个元组（或数组）中，让TypeScript把整个联合类型当作一个整体来判断，而不是拆分处理。修改Container的定义即可：

// 用元组[T]包裹，避免分布式展开
type Container<T> = [T] extends [any[]] ? ArrayContainer<T> : ObjectContainer<T>
type ArrayContainer<T> = { set(arr: T, index: number): void }
type ObjectContainer<T> = { set(obj: T): void }

const testContainer = {} as any as Container<{ boxedNumber: number } | number>
// 现在可以正常编译调用
testContainer.set(33)
testContainer.set({ boxedNumber: 42 })

原理说明 #

当我们用[T] extends [any[]]代替T extends any[]时，TypeScript不会再把联合类型拆分成单个成员，而是直接检查整个T（也就是{ boxedNumber: number } | number）是否属于数组类型。显然这个联合不是数组，所以会返回ObjectContainer<{ boxedNumber: number } | number>，此时set方法的参数是联合类型，传入任意一个分支的类型都能匹配，自然就可以正常调用了。

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