在 TypeScript 中使用 Object.assign()

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

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

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

在 TypeScript 中使用 Object.assign()

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

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

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

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

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

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

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

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

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

上述代码示例会产生错误

在 TypeScript 中使用 Object.assign()

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

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

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

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

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

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

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

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

const obj1 = { name: 'Zadmei' };
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: 'Zadmei' };
const obj2 = { country: 'China' };

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

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

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

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

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

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

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

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