TypeScript泛型键赋值报错：含可选属性时无法兼容null的原因

问题场景 #

使用泛型作为对象键时遇到类型错误，代码示例如下：

interface Foo {
    prop1: string | null,
    prop2: string | null,
    prop3?: number
}

const updateFoo = <K extends keyof Foo>(
    key: K,
    payload: Foo[K] | null
): Array<Foo> => {
    let somthingToEditUpdated = {} as Foo;
    somthingToEditUpdated[key] = payload;

    return []
}

触发的类型错误提示：

Type 'Foo[K] | null' is not assignable to type 'Foo[K]'.
Type 'null' is not assignable to type 'Foo[K]'.
Type 'null' is not assignable to type 'never'.

但当从Foo接口中移除prop3?: number这一行后，代码就能正常编译，这是什么原因？

原因解析 #

核心问题出在可选属性的类型处理上：

1. TypeScript中，可选属性prop3?: number的实际类型是number | undefined——可选意味着该属性可以不存在，对应类型中的undefined。
2. 当泛型K匹配到"prop3"时，Foo[K]的类型就是number | undefined，而你定义的payload是Foo[K] | null，也就是number | undefined | null。
3. 给somthingToEditUpdated[key]赋值时，TypeScript会严格校验类型：null并不属于Foo[K]（即number | undefined）的范围，因此抛出类型不兼容的错误。

而移除prop3后，剩下的prop1和prop2的类型都是string | null，此时Foo[K] | null和Foo[K]是完全等价的类型（因为本身已经包含null），所以赋值操作不会触发类型错误。

总结来说：

• 对prop1/prop2：Foo[K]本身包含null，payload的类型没有新增额外不兼容的类型，赋值合法；
• 对prop3：Foo[K]只包含number | undefined，payload多了null类型，无法匹配属性的类型要求。

内容的提问来源于stack exchange，提问作者four-eyes