TypeScript:更新联合类型中的公共(public)属性时出错

Question

我有以下联合类型。

type Common = { commonProp: string };
type MyFoo = Common & { foo: number };
type MyBar = Common & { bar: number };
type MyUnion = { tag: 'MyFoo'; value: MyFoo } | { tag: 'MyBar'; value: MyBar };
declare const myUnion: MyUnion;

如果我编写一个函数来更新所有联合成员共有的属性 (commonProp)，我会收到一个错误:

// Error
/*
Type '{ value: { commonProp: string; foo: number; } | { commonProp: string; bar: number; }; tag: "MyFoo"; } | { value: { commonProp: string; foo: number; } | { commonProp: string; bar: number; }; tag: "MyBar"; }' is not assignable to type 'MyUnion'.
    Type '{ value: { commonProp: string; foo: number; } | { commonProp: string; bar: number; }; tag: "MyFoo"; }' is not assignable to type 'MyUnion'.
        Type '{ value: { commonProp: string; foo: number; } | { commonProp: string; bar: number; }; tag: "MyFoo"; }' is not assignable to type '{ tag: "MyFoo"; value: MyFoo; }'.
            Types of property 'value' are incompatible.
                Type '{ commonProp: string; foo: number; } | { commonProp: string; bar: number; }' is not assignable to type 'MyFoo'.
                    Type '{ commonProp: string; bar: number; }' is not assignable to type 'MyFoo'.
                    Property 'foo' is missing in type '{ commonProp: string; bar: number; }' but required in type '{ foo: number; }'.ts(2322)
*/
const updateDescription = (t: MyUnion): MyUnion => ({
    ...t,
    value: {
        ...t.value,
        commonProp: 'foo',
    },
});

为什么会出现这个错误？

我似乎可以通过使函数通用(受联合约束)来解决这个问题，但我不明白为什么在以前的非通用函数不起作用时这会起作用。

// No error
const updateCommonProp = <T extends MyUnion>(t: T): T => ({
    ...t,
    value: {
        ...t.value,
        commonProp: 'foo',
    },
});

为什么非泛型函数不起作用时泛型函数起作用？

Answer 1

我认为，如果我们删除返回类型注释并查看编译器对返回类型的看法，我们就可以更好地了解编译器的推理方式。

// If no return type, updateDescription is inferred to:
const updateDescription: (t: MyUnion) => {
    value: {
        commonProp: string;
        foo: number;
    } | {
        commonProp: string;
        bar: number;
    };
    tag: "MyFoo";
} | {
    value: {
        commonProp: string;
        foo: number;
    } | {
        commonProp: string;
        bar: number;
    };
    tag: "MyBar";
}

Typescript 不会以任何方式跟踪变量或属性之间的关系。因此，当您传播 t 结果是与 t 具有相同类型的内容时，您添加一个 value 属性，该属性将覆盖 t 的 >value 属性。 t 是 MyUnion 联合，它将覆盖联合的每个成员中的 value。

但是问题来了。您要添加的 value 包含 t.value 的价差。但这本身就是 MyUnion (MyUnion['value']) 中所有可能值的并集。结果是现在原始联合的每个成员都与所有可能值的联合配对，使其无法分配给原始联合。 🤦‍♂️🤷‍♂️

对于泛型，情况就大不相同了。编译器不能只替换联合中的 value 属性，因为 T 在函数内部是未知的。在 3.2 ( PR ) 之前，在传播操作中使用泛型类型实际上是一个错误。自 3.2 起，行为已更改为使用乍一看应该等效的交集类型。所以让我们看看编译器认为通用版本的返回类型是:

// If no return type ts infers for updateCommonProp:
const updateCommonProp: <T extends MyUnion>(t: T) => T & {
    value: {
        commonProp: string;
        foo: number;
    } | {
        commonProp: string;
        bar: number;
    };
}

我们看到我们添加的 value 属性生成了与之前相同的联合。然而，这是可分配给 T 的，因为根据定义，交集类型可分配给它的任何成分。因此，如果我们实际上对交集进行合并，那么结果将不可分配并不重要，重要的是我们正在分配给交集的一个成员。

另一种解决方法是在不使用通用函数的情况下使用此交集分配规则以发挥我们的优势。我们可以只使用 Object.assign 来返回参数的交集，而不用像 spread 那样进行类型手术:

const updateDescription = (t: MyUnion): MyUnion => Object.assign({}, t, {
    value: {
        ...t.value,
        commonProp2: 'foo',
    },
});

平心而论，非泛型版本是类型更安全的版本。由于 ts 不跟踪变量之间的关系，因此无法判断您正在做的不是这个:

const updateDescription = (t: MyUnion, tOther: MyUnion) => ({
    ...t,
    value: {
        ...tOther.value,
        commonProp2: 'foo',
    },
});

从类型的角度来看，单参数版本与这两个参数版本相同，但这显然不是类型安全的，因为两个参数的 type 字段不必重合。