在 TypeScript 中使用 Object.assign()

作者

在 TypeScript 中使用 Object.assign()

Using Object.assign() in TypeScript

要Object.assign()在 TypeScript 中使用该方法，请将目标对象作为第一个参数传递给方法和一个或多个源对象，例如
const result = Object.assign({}, obj1, obj2). 该方法会将属性从源对象复制到目标对象。

索引.ts
const obj1 = { name: 'Tom' };
const obj2 = { country: 'Chile' };

// 👇️ const result: { name: string; } & { country: string; }
const result = Object.assign({}, obj1, obj2);
console.log(result); // 👉️ {name: 'Tom', country: 'Chile'}

我们使用
Object.assign
方法将两个源对象合并为一个目标对象。

该方法采用的第一个参数是一个target对象，源对象的属性将应用于该对象。

下一个参数是source对象 – 包含您要应用到的属性的对象target。

在示例中，我们传递了一个空对象作为target，因为您通常应该避免改变对象，因为它会引起混淆。

例如，我们可以obj1作为目标和obj2源传递。

索引.ts
const obj1 = { name: 'Tom' };
const obj2 = { country: 'Chile' };

// 👇️ const result: { name: string; } & { country: string; }
const result = Object.assign(obj1, obj2);
console.log(result); // 👉️ {name: 'Tom', country: 'Chile'}

console.log(obj1); // 👉️ {name: 'Tom', country: 'Chile'}

// ⛔️ Error: Property 'country' does not
// exist on type '{ name: string; }'.ts(2339)
console.log(obj1.country);

请注意，target对象已就地更改。

这在使用 TypeScript 时尤其成问题，因为obj1已就地更改，但其类型仍然是{name: string}，即使该对象也包含一个country属性。

这就是为什么您经常会看到一个空对象作为第一个参数传递给该Object.assign方法的原因。

TypeScript 使用
交集类型
来键入方法的返回值Object.assign()。

索引.ts
const obj1 = { name: 'Tom' };
const obj2 = { country: 'Chile' };

// 👇️ const result: { name: string; } & { country: string; }
const result = Object.assign({}, obj1, obj2);
console.log(result); // 👉️ {name: 'Tom', country: 'Chile'}

换句话说，返回值的类型包含您传递给该Object.assign方法的所有对象的所有成员。

当您对Object.assign具有相同属性的对象使用该方法时，这些属性将被参数列表中后面出现的对象覆盖。

索引.ts
const obj1 = { name: 'Tom' };
const obj2 = { name: 'James' };

// 👇️ const result: { name: string; } & { name: string; }
const result = Object.assign({}, obj1, obj2);
console.log(result); // 👉️ {name: 'James'}

console.log(result.name); // 👉️ "James"

示例中的两个对象都具有 的属性name，因此以参数顺序较晚传递的对象为准。

您还应该考虑使用
扩展语法 (…)
来替代Object.assign.

索引.ts
const obj1 = { name: 'Tom' };
const obj2 = { country: 'Chile' };

// 👇️ const result: {country: string;name: string;}
const result = { ...obj1, ...obj2 };
console.log(result); // 👉️ {name: 'Tom', country: 'Chile'}

传播语法 (…) 将对象的属性解包到一个新对象中。

Object.assign()与使用该方法相比，TypeScript 正确键入新对象要容易得多。

这通常是一种更好的方法，因为您不能搬起石头砸自己的脚忘记提供一个空对象作为
Object.assign方法的第一个参数并无意中改变一个对象。

您可以根据需要将尽可能多的对象解压缩到一个新对象中，如果两个对象具有相同的属性，则较晚出现的对象将获胜。

索引.ts
const obj1 = { name: 'Tom' };
const obj2 = { name: 'James' };

// 👇️ const result: {name: string;}
const result = { ...obj1, ...obj2 };
console.log(result); // 👉️ {name: 'James'}

两个对象都具有该name属性，因此后一个对象获胜。

–

发表评论