javascript - TypeScript:为什么同一个对象在定义时不能用接口(interface)赋值，但在作为参数传递时可以赋值

Question

我这里有一个对象和一个接口(interface)，它的形状是这样的

interface OBJ {
  firstName: string;
  lastName: string;
}

const obj: OBJ = { firstName: "John", lastName: "Smith", random: 1 };

这里很明显 TS 编译器会在 'random' does not exist in type 'OBJ' 上出错。

但是如果我有这样的功能

const getNewObj = (obj: OBJ) => ({
  fullName: obj.firstName + obj.lastName,
  ...obj
});

然后我将 obj 传递给这个函数console.log(getNewObj(obj));

没有错误。怎么会？

现场演示:https://codesandbox.io/s/eager-joliot-s4j93?file=/src/index.ts:289-318

Answer 1

TypeScript 具有这种严格的对象文字检查。简单地说函数:如果您将对象引用(变量或常量)传递给函数， typescript 将检查此对象引用是否包含您的函数所需的键。不少，但会允许更多的 key 。
示例:

const getNewObj = (obj: OBJ) => ({
  fullName: obj.firstName + obj.lastName,
  ...obj
});

const obj1 = {firstName: "John", lastName: "Smith", random: 1}
const obj2 = {lastName: "Smith", random: 1}

getNewObj(obj1); // This is good, eventhough property random is extra
getNewObj(obj2); // Error: property firstName is missing

另一方面，如果您向函数传递一个对象(而不是对象引用)，则 typescript 将对该对象进行类型检查，并在缺少和额外属性时抛出错误
示例，具有相同的功能:

getNewObj({ firstName: "John", lastName: "Smith" }) // good
getNewObj({ firstName: "John", lastName: "Smith", random: 1 }) //'random' does not exist..
getNewObj({ lastName: "Smith" }) // Property 'firstName' is missing...

---

可以在 this gitbook 中找到有关此严格对象文字 的更多详细信息