angular - 带有方法的对象上的 Typescript 展开运算符

Question

在我的 Angular 项目中，我有一个包含类型和状态字段的对象。状态可能因类型而异。有人可能会争辩说这是一种糟糕的设计，但目前就是这样。关键是我似乎无法在此对象上使用扩展运算符，因为编译器说 Property 'getStatusList' is missing in type ...

我简化了类，但它看起来像这样:

export class Foo {
    constructor(
        public type: number,
        public status: number
    ) { }

    getStatusList(): string[] {
        switch (this.type) {
            case 3: {
                return ['Off', 'Interval', 'On Hold']
            }

            default: {
                return ['Off', 'On']
            }
        }
    }
}

这是 typescript 2.9.2 和 angular cli 6.1.1

下面的代码会触发错误，但在 typescript playground 中编写示例代码时，我想也许我应该使用 Object.assign。虽然我仍然认为我可以使用扩展运算符简单地否决对象的某些属性？

const oldFoo: Foo = new Foo(3, 5);
console.log('old status: ', oldFoo.status);

const newFoo: Foo = { ...oldFoo, type: 1, status: 7 };
console.log('new status: ', newFoo.status);

Answer 1

当您使用 the spread operator in object literals 时，您将不会获得与原始对象属于同一类的对象。来自文档:

[The spread operator] copies own enumerable properties from a provided object onto a new object.

Shallow-cloning (excluding prototype) or merging of objects is now possible using a shorter syntax than Object.assign().

所以你只是“浅克隆”oldFoo。你会错过原型(prototype)上的任何东西，比如方法。如果你想要一个实际的 Foo 对象，你应该构造一个。一旦你构建了它，你就可以使用 Object.assign() 一次设置多个属性，但是如果你正在使用构造函数，我想你应该只将正确的参数传递给构造函数第一名。

---

您可以复制原型(prototype):

const newFoo  = { ...oldFoo, type: 1, status: 7 } as Foo;
Object.setPrototypeOf(newFoo, Object.getPrototypeOf(oldFoo));

这可能会奏效，但我不会轻率地处理原型(prototype)。

---

希望对您有所帮助。祝你好运!