带有方法的对象上的打字稿传播运算符

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 时，您将不会获得与原始对象相同类的对象。来自文档：

[扩展运算符]将自己的可枚举属性从提供的对象复制到新对象。

现在可以使用比Object.assign() 更短的语法进行对象的浅克隆（不包括原型）或合并。

所以你只是“浅克隆”oldFoo。你会错过原型上的任何东西，比如方法。如果您想拥有一个实际的Foo 对象，您可能应该构造一个。构建完成后，您可以使用Object.assign() 一次设置多个属性，但如果您使用的是构造函数，我想您应该首先将正确的参数传递给构造函数。

---

您可以复制原型：

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

这可能会奏效，但我不会轻易搞砸原型。

---

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