TypeScript处理对象中的额外属性（未定义的属性）

时间：2025-04-04 20:14:42
  • TypeScript中额外的属性检查报错信息如何解决？
    举例说明
// 已知interface和createSquare
interface ObjType {
  name?: string;
  age?: number;
}
function createSquare(config: ObjType): {name?: string; age?: number} {
  return {name: config.name, age: config.age}
}

TypeScript会认为这段代码可能存在bug。 对象字面量会被特殊对待而且会经过 额外属性检查，当将它们赋值给变量或作为参数传递的时候。 如果一个对象字面量存在任何“目标类型”不包含的属性时，你会得到一个错误。

let obj = createSquare({color: "red", age: 100});
// error: 'color' does not exist in type 'ObjType'.

绕开这些检查非常简单。 最简便的方法是使用类型断言：

//解决方法一
let methodOne = createSquare({color: "red", age: 100} as ObjType);

然而，最佳的方式是能够添加一个字符串索引签名，前提是你能够确定这个对象可能具有某些做为特殊用途使用的额外属性。 如果 ObjectType带有上面定义的类型的name和age属性，并且还会带有任意数量的其它属性，那么我们可以这样定义它：

interface ObjType {
  name?: string;
  age?: number;
  [propName: string]: any;
}
let methodTwo = createSquare({color: "red", age: 100});

还有最后一种跳过这些检查的方式，这可能会让你感到惊讶，它就是将这个对象赋值给一个另一个变量： 因为 newObj不会经过额外属性检查，所以编译器不会报错。

let newObj = { color: "red", width: 100 };
let methodThree = createSquare(newObj);

要留意，在像上面一样的简单代码里，你可能不应该去绕开这些检查。 对于包含方法和内部状态的复杂对象字面量来讲，你可能需要使用这些技巧，但是大部额外属性检查错误是真正的bug。 就是说你遇到了额外类型检查出的错误，比如“option bags”，你应该去审查一下你的类型声明。 在这里，如果支持传入 color或width属性到createSquare，你应该修改ObjType定义来体现出这一点。

参考链接来自官网

相关文章