TypeScript 如何指定对象解构属性类型解决类型推断问题

你当前写法的核心问题 #

• 尝试使用的typeof 'w'取的是运行时值的类型，最终得到的是宽泛的string，并不是你预期的字面量类型'w'
• 类型注解塞在单个解构属性后面的写法，语法上虽然能被TS识别，但完全偏离了类型声明的语义，很容易引发类型不匹配的报错

正确的实现方式 #

方案1：给log增加泛型，打通自动推导链路 #

原来的log把入参全部标注为any，等于直接切断了TS的类型推导路径。通过泛型让TS自动捕获传入的prop结构，回调函数的入参会自动和prop的类型保持一致，调用时完全不需要手动标注解构属性的类型：

function log<T>(prop: T, f: (_: T) => void) {
    f(prop);
}

const map = {
    'w': 3,
    'b': 4
}

// TS自动推导：传入的第一个参数结构为{piece: 'w'}，回调入参完全匹配，解构出的piece自动是字面量'w'类型
log({piece: 'w' }, ({piece}) => console.log(map[piece]));

这种写法是最符合TypeScript设计思路的，所有类型由编译器自动推导，既不会有冗余的类型标注，也不会出现索引报错。

方案2：手动标注解构对象的结构类型 #

如果因为历史兼容原因不能修改原log的函数定义，需要手动给回调的解构参数标注类型时，要遵循语法规则：类型注解要放在整个解构表达式的末尾，描述整个被解构对象的完整结构，而不是放在单个解构属性后面。
比如要让解构出的piece匹配map的键类型，可以直接复用现有map的类型做联合类型推导，不需要硬编码：

log({ piece: 'w' }, ({ piece }: { piece: keyof typeof map }) => console.log(map[piece]));

语法提示：TS中解构表达式的类型注解位置是在解构的圆括号之后，和普通变量的类型注解位置一致。你之前写的({ piece: typeof 'w' })其实是利用了解构的重命名语法，把解构出来的piece值重命名为了值typeof 'w'，完全不是你想要的类型声明效果。

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