为什么联合类型的类型保护需要判别式？

Question

在下面的代码中，为什么typeof data.x === 'string'类型守卫不足以区分联合类型？

TS playground

interface A { x: string, y: number }
interface B { x: number, y: string }

function handler(data: A | B) {
    if (typeof data.x === 'string') {
        data.y // string | number --- WHUT?
    }
}

在什么情况下可以使用（无效）形状{ x: string: y: string } 调用handler？

使用判别式，它可以工作（为什么？）：

interface A { kind: 'A', x: string, y: number }
interface B { kind: 'B', x: number, y: string }

function handler(data: A | B) {
    if (data.kind === 'A') {
        data.y // number
    }
}

阅读Discriminated Unions 上的官方文档没有帮助。

他们只声明：

某些语言会自动为您区分工会；相反，TypeScript 建立在现有的 JavaScript 模式之上。

这并不能解释为什么 TS 在某些情况下可以使用类似的类型保护，而在联合的情况下却不能（我在第一个示例中没有看到任何歧义）。

Answer 1

有区别的工会需要有一个非常特殊的结构。我曾经挖过规则here：

只有在特定场景下，当属性被认为是联合的判别式时，才会缩小父对象的范围。如果满足以下条件，则将属性视为判别属性：

• 该属性是一个文字类型，如此处所述#9163
• 如果联合类型的联合类型包含至少一个单元类型且没有此处所述的可实例化类型#27695，则联合类型的属性将成为判别属性

如果不遵循这些规则，您最终只会得到字段区分而不是父对象区分。