typescript - 如何在 Typescript 类中合并客户端传递的配置对象和默认配置对象？

Question

在编写纯 Javascript 时，我经常构建具有“config”属性的类，其键具有一些默认值，例如:

class MyClass{
    config = {
        someProp:true,
        otherProp:5
    }

    constructor(config){
        for(let prop in config){
            this.config[prop] = config[prop] 
        }
    }
}

这非常方便，因为我可以循环遍历传递的对象并覆盖默认值(如果提供了值)

在 typescript 中，我试过这样的事情:

class MyClass{
    config = {
        someProp:true,
        otherProp:5
    }  

    constructor(config?: { someProp?: boolean,otherProp?:number  }) {
        if (config) {
            for (let prop in config) {
                this.config[prop] = config[prop]
            }
        }

    }
}

我收到以下错误:

Element implicitly has an 'any' type because expression of type'string' can't be used to index type '{ someProp: boolean; otherProp:number; }'. No index signature with a parameter of type 'string' wasfound on type '{ someProp: boolean; otherProp: number; }'.

我或多或少理解这个错误的意思，但我想我这里的整个方法非常“JS-like”，应该改变。

在 Typescript 中执行此操作的传统、简单方法是什么？这个想法是将提供的属性与默认属性快速合并，而无需重复各种检查。

Answer 1

您可以像这样解决错误:

constructor(config?: { someProp?: boolean,otherProp?:number  }) {
    Object.assign(this.config, config);
}

Playground link

这种方式隐藏了 Object.assign 调用背后的 JavaScript-y 部分。 :-)

但是如果你想要更好的类型检查——这就是 TypeScript，对吧？ :-)——我可能会替换配置属性并使用扩展语法:

class MyClass {
    config = {
        someProp:true,
        otherProp:5
    }  

    constructor(config?: { someProp?: boolean,otherProp?:number  }) {
        if (config) {
            this.config = {...this.config, ...config};
        }
    }
}

Playground link

甚至可能

class MyClass {
    config: {someProp: boolean, otherProp: number};
    constructor(config?: { someProp?: boolean,otherProp?:number  }) {
        this.config = {
            someProp: true,
            otherProp: 5,
            ...config
        };
    }
}

Playground link

如果 config 为 undefined(或 null)，则扩展语法将不执行任何操作。

您甚至可以使用定义的类型来避免在两个地方编写相同的 Prop :

interface MyClassConfig {
    someProp: boolean;
    otherProp: number;
}
class MyClass {
    config: MyClassConfig;
    constructor(config?: Partial<MyClassConfig>) {
        this.config = {
            someProp: true,
            otherProp: 5,
            ...config
        };
    }
}

Playground link