从 TypeScript 接口到类构造函数的快捷语法

Question

如果我有如下的 TypeScript 界面：

interface myInterface {
    prop1: string;
    prop2: string;
    prop3: number;
    prop4: boolean;
    ..
    ..
    ..
    prop30: string
}

我想创建一个实现myInterface 的类，我只知道这样做的详细方法，如下所示：

class MyClass implements myInterface {
    prop1;
    prop2;
    prop3;
    prop4;
    ..
    ..
    prop30;

    constructor(data: myInterface) {
        this.prop1 = data.prop1;
        this.prop2 = data.prop2;
        this.prop3 = data.prop3;
        this.prop4 = data.prop4;
        ..
        ..
        this.prop30 = data.prop30;
    }
}

有什么方法可以让这个语法更短，或者有更好的方法从接口实现这样的类吗？

Answer 1

您可以使用Object.assign() 将data 参数的所有成员一次复制到this，但TypeScript 仍然要求您单独declare the fields：

class MyClass implements MyInterface {
    prop1!: string;
    prop2!: string;
    prop3!: number;
    prop4!: boolean;
    /* ..
    ..
    ..*/
    prop30!: string;
    constructor(data: MyInterface) {
        Object.assign(this, data);
    }
}

所以这更好，但不是很好。

（另请注意，编译器无法验证属性是否已分配，因此您需要在字段声明中使用definite assignment assertion operator (!) 来抑制警告。）

---

如果您可以定义一个类工厂函数并使用它来生成一个超类，那么您可以省去这个麻烦。函数如下：

function AssignCtor<T extends object>() {
    return class {
        constructor(t: T) {
            Object.assign(this, t)
        }
    } as { new(t: T): T }
}

AssignCtor<T> 的返回值是asserted 一个带有construct signature 的类型，它接受一个T 类型的值并产生一个同样类型为T 的类实例。这就是你想用MyInterface 做的，所以让我们试试吧：

class MyClass extends AssignCtor<MyInterface>() implements MyInterface {

}

就是这样。让我们确保 MyClass 的行为符合您的预期：

function tryItOut(data: MyInterface) {
    const myClass = new MyClass(data);
    myClass.prop1.toUpperCase(); // okay    
}

看起来不错。值myClass 被视为具有MyInterface 的属性。

Playground link to code