TypeScript对象增加属性|极客教程

TypeScript对象增加属性

在 TypeScript 中，我们经常会遇到需要给已有对象增加新属性的情况。这种情况可能在项目开发中频繁出现，因此有必要掌握在 TypeScript 中如何给对象增加属性。

使用“as”语法

一个简单的方法是使用 TypeScript 的类型断言语法“as”。这个方法能够让我们直接给对象增加属性，并且告诉 TypeScript 编译器我们知道这个对象的类型：

interface Person {
    name: string;
    age: number;
}

let person: Person = {
    name: 'Alice',
    age: 30
};

// 使用类型断言给person对象增加新属性
(person as any).city = 'New York';

console.log(person);

上面的代码中，我们定义了一个名为Person的接口，接着创建了一个person对象并给它赋值。然后通过类型断言as any的方式给person对象增加了一个名为city的属性。最后输出person对象，可以看到这个对象已经包含了新的属性。

使用索引签名

另一种方法是通过索引签名的方式给对象增加属性。索引签名允许我们在定义接口的时候指定允许对象具有任意属性，这样我们就可以在后续的代码中给对象动态增加属性。

interface Person {
    name: string;
    age: number;
    [key: string]: any;
}

let person: Person = {
    name: 'Alice',
    age: 30
};

// 给person对象增加新属性
person.city = 'New York';

console.log(person);

在上面的代码中，我们对Person接口添加了一个索引签名[key: string]: any，表示这个接口允许对象具有任意属性。然后我们给person对象增加了一个名为city的新属性，并输出这个对象。

使用“Object.assign()”方法

除了上面两种方法，我们还可以使用Object.assign(target, ...sources)方法来给对象增加属性。这个方法会将源对象的属性复制到目标对象上，如果目标对象已有相同属性，则会覆盖原有的属性。

interface Person {
    name: string;
    age: number;
}

let person: Person = {
    name: 'Alice',
    age: 30
};

// 使用Object.assign()给person对象增加新属性
Object.assign(person, { city: 'New York' });

console.log(person);

在上述代码中，我们使用了Object.assign()方法将一个包含city属性的对象合并到person对象中，这样就成功给person对象增加了新的属性。