迹忆客 专注技术分享

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

const obj1 = { name: 'Jiyik' };
const obj2 = { country: 'China' };

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

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

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

下一个参数是源对象 - 包含要应用于目标的属性的对象。

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

例如，我们可以将 obj1 作为目标，将 obj2 作为源。

const obj1 = { name: 'Jiyik' };
const obj2 = { country: 'China' };

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

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

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

上述代码示例会产生错误

请注意，目标对象已更改。

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

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

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

const obj1 = { name: 'Jiyik' };
const obj2 = { country: 'China' };

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

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

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

const obj1 = { name: 'Jiyik' };
const obj2 = { name: 'Fql' };

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

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

示例中的两个对象都具有 name 属性，因此后面按参数顺序传递的对象获取。

我们还应该考虑使用扩展语法 (...) 作为 Object.assign 的替代品

const obj1 = { name: 'Jiyik' };
const obj2 = { country: 'China' };

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

扩展语法 (...) 将对象的属性解包到一个新对象中。

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

这通常是一种更好的方法，因为您不会因为忘记提供一个空对象作为 Object.assign 方法的第一个参数并无意中就地改变对象而使自己陷入困境。

我们可以根据需要将任意数量的对象解包到一个新对象中，如果两个对象具有相同的属性，则后面出现的对象获胜。

const obj1 = { name: 'Jiyik' };
const obj2 = { name: 'Fql' };

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

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