TypeScript中接收回调的函数如何实现解构属性类型校验

默认编写的代码不会触发TypeScript的类型报错，调整类型定义后即可让类型系统在解构不存在属性时抛出对应错误。

原有代码不报错的原因 #

你当前给test函数的入参fn标注的返回类型是Record<string, Object>，这个类型的含义是「返回一个键为任意字符串、值为Object类型的对象」，属于非常宽泛的类型声明。TypeScript做类型校验时，会判定从该类型的返回值上读取任意字符串键都是合法操作，因此即使foo实际返回的对象里没有tree属性，解构时也不会触发类型错误。

实现解构校验的修改方式 #

要让类型系统识别出不存在的属性，核心是不要用宽泛的Record类型抹掉传入回调的实际返回结构，通过泛型捕获传入函数的真实返回类型即可，修改后代码如下：

const foo = () => ({
  bar: {
    hi: 5
  },
  six: {
    max: 10
  }
})

// 用泛型T捕获传入fn的实际返回值结构
function test<T extends object>(fn: () => T) {
  return fn()
}

// 此处TS会直接抛出类型错误：类型"{ bar: { hi: number; }; six: { max: number; }; }"上不存在属性"tree"
const {six, tree } = test(foo) // <- line 14

console.log(tree)

这种写法下TypeScript会完整保留foo返回对象的结构类型，当你尝试解构对象上未定义的属性时，类型系统会直接抛出错误，完全符合预期校验效果。

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