如何在 TypeScript 中合并对象

使用扩展语法 ... 合并 TypeScript 中的对象，例如 const obj3 = { ...obj1, ...obj2}。

最终对象的类型将被成功推断，因此尝试添加或删除属性会导致类型检查器显示错误。

const obj1 = { name: '火焰兔', age: 30 };
const obj2 = { country: 'China' };

// 👇️ const obj3: {country: string; name: string; age: number;}
const obj3 = { ...obj1, ...obj2 };

// 👇️ { name: '火焰兔', age: 30, country: 'China' }
console.log(obj3);

我们使用扩展语法 ... 将属性从 2 个对象解包到第三个对象中。

即使我们没有明确地向任何对象添加类型，TypeScript 也能够推断出类型。

例如，如果我尝试向 obj3 添加一个新的键值对或尝试从对象中删除一个键，TypeScript 将显示错误。

const obj1 = { name: '火焰兔', age: 30 };
const obj2 = { country: 'China' };

// 👇️ const obj3: {country: string; name: string; age: number;}
const obj3 = { ...obj1, ...obj2 };
// 👇️ {name: '火焰兔', age: 30, country: 'China'}
console.log(obj3);

// ⛔️ Error: Property 'test' does not exist
// on type '{ country: string; name: string; age: number; }'.
obj3.test = 'hello';

// ⛔️ Error: The operand of a 'delete' operator must be optional.
delete obj3['name'];

类型检查器显示错误，因为最终对象的类型已将国家/地区、姓名和年龄属性设置为特定类型。

但是，只要提供类型正确的值，就可以更新对象上存在的属性。

const obj1 = { name: '火焰兔', age: 30 };
const obj2 = { country: 'China' };

// 👇️ const obj3: {country: string; name: string; age: number;}
const obj3 = { ...obj1, ...obj2 };

// 👇️ {name: '火焰兔', age: 30, country: 'China'}
console.log(obj3);

obj3.name = 'Alice';
obj3.age = 29;

console.log(obj3); // 👉️ {name: 'Alice', age: 29, country: 'China'}

合并对象时，顺序很重要，因为如果两个对象具有相同的键，则其属性较晚解包的对象将获胜。

const obj1 = { name: '火焰兔', age: 30 };
const obj2 = { name: 'Alice' };

// 👇️ const obj3: {name: string; age: number}
const obj3 = { ...obj1, ...obj2 };
console.log(obj3); // 👉️ { name: 'Alice', age: 30 }

这两个对象都具有 name 属性，但是 obj2 的键稍后会被解包，因此它的值会覆盖 obj1 中的 name 属性的值。

使用 Object.assign() 合并 TypeScript 中的对象

我们可能还会看到 Object.assign() 方法用于在 TypeScript 中合并对象。

const obj1 = { name: '火焰兔', age: 30 };
const obj2 = { country: 'China' };

// 👇️ const obj3: {name: string; age: number} & {country: string}
const obj3 = Object.assign({}, obj1, obj2);

// 👇️ {name: '火焰兔', age: 30, country: 'China'}
console.log(obj3);

Object.assign 方法采用的第一个参数是目标对象——源对象的属性应用到的对象。

该方法采用的下一个参数是一个或多个源对象。

TypeScript 还能够使用交集类型推断新对象的类型。

交集类型是使用 & 符号定义的，用于组合现有的对象类型。 我们可以根据需要多次使用 & 运算符来构造类型。

如果我们尝试向对象添加新属性或删除现有属性，类型检查器将抛出错误。

const obj1 = { name: '火焰兔', age: 30 };
const obj2 = { country: 'China' };

// 👇️ const obj3: {name: string; age: number} & {country: string}
const obj3 = Object.assign({}, obj1, obj2);

// 👇️ {name: '火焰兔', age: 30, country: 'China'}
console.log(obj3);

// ⛔️ Error: Property 'test' does not exist
// on type '{ country: string; name: string; age: number; }'.
obj3.test = 'hello';

// ⛔️ Error: The operand of a 'delete' operator must be optional.
delete obj3['name'];

这与使用扩展语法 ... 的方式相同。

只要提供正确类型的值，我们仍然可以更新对象的现有属性。

const obj1 = { name: '火焰兔', age: 30 };
const obj2 = { country: 'China' };

// 👇️ const obj3: {name: string; age: number} & {country: string}
const obj3 = Object.assign({}, obj1, obj2);

// 👇️ {name: '火焰兔', age: 30, country: 'China'}
console.log(obj3);

obj3.name = 'Alice';

console.log(obj3); // 👉️ {name: 'Alice', age: 30, country: 'China'}

目标对象的属性将被参数顺序中具有相同属性的其他对象覆盖。

const obj1 = { name: '火焰兔', age: 30 };
const obj2 = { name: 'Alice' };

// 👇️ const obj3: {name: string; age: number} & {country: string}
const obj3 = Object.assign({}, obj1, obj2);
console.log(obj3); // 👉️ {name: 'Alice', age: 30}

此行为也与扩展语法 ... 一致。

火焰兔

海报 链接