如何在 TypeScript 中合并对象

在 TypeScript 中合并对象

How to merge Objects in TypeScript

使用扩展语法 (…) 合并 TypeScript 中的对象，例如
const obj3 = { ...obj1, ...obj2 }. 最终对象的类型将被成功推断，因此尝试向其添加或删除属性将导致类型检查器显示错误。

索引.ts


const obj1 = { name: 'Tom', age: 30 };
const obj2 = { country: 'Chile' };

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

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

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

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

索引.ts


const obj1 = { name: 'Tom', age: 30 };
const obj2 = { country: 'Chile' };

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

// ⛔️ 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'];

类型检查器显示错误，因为最终对象的类型已经设置为country,name和age属性设置为特定类型。

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

索引.ts


const obj1 = { name: 'Tom', age: 30 };
const obj2 = { country: 'Chile' };

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

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

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

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

索引.ts


const obj1 = { name: 'Tom', 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稍后会被解包，因此它的值会覆盖中的name属性
值obj1。

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

索引.ts


const obj1 = { name: 'Tom', age: 30 };
const obj2 = { country: 'Chile' };

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

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

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

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

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

如果您尝试向对象添加新属性或删除现有属性，类型检查器将抛出异常。

索引.ts


const obj1 = { name: 'Tom', age: 30 };
const obj2 = { country: 'Chile' };

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

// ⛔️ 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'];

这与使用扩展语法 (…) 的方式相同。

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

索引.ts


const obj1 = { name: 'Tom', age: 30 };
const obj2 = { country: 'Chile' };

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

obj3.name = 'Alice';

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

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

索引.ts


const obj1 = { name: 'Tom', 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}

此行为也与传播语法 (…) 一致。

–