接受 TypeScript 中的接口数组或单个接口 [重复]

Question

在 TypeScript 中真的很新。我有一组预设，用户可以添加或修改现有预设。因为它只有几个键，所以我做了一个界面。

interface IStylePreset {
    type : string;
    backgroundColor : string;
    color? : string
}

实现在这里：

static stylePresets : Array<IStylePreset> = [
    { type: "default", backgroundColor: "#37474f" , color: "#ECEFF1"},
    { type: "success", backgroundColor: "#37474f", color: "#ECEFF1" },
    { type: "error", backgroundColor: "#d32f2f", color: "#EEE"}
];

现在我有一个配置函数，它采用自定义预设来更改现有预设或添加新预设。

static config = {
    types(newPresets) : void {
        newPresets = [].concat(newPresets);
        for(var i = 0, len = newPresets.length, current; i< len; i++){
            var pos = Message.Util.find(Message.stylePresets, newPresets[i].type)
            current = newPresets[i];
            if(pos !== -1) for(var key in current) Message.stylePresets[pos][key] = current[key];
            else Message.stylePresets[Message.stylePresets.length] = current;
            }
        }
    };

问题是，我不知道在 newPresets 的类型中指定什么，因为它既接受对象数组，也接受单个对象（这构成单个元素数组 newPresets = [].concat(newPresets);） .

我正在尝试学习 TypeScript，但我不知道我所做的是否正确。有人可以帮我吗？进一步阅读材料或文档将是黄金。

Answer 1

你可以：

1) 像这样使用any 类型：types(newPresets : any)

或

2) 保持IStylePreset[] 类型（例如types(newPresets : IStylePreset[]) 并在传递单个对象时将其包装在这样的数组中：config.types([{ type: "default", backgroundColor: "#37474f" , color: "#ECEFF1"}]);

Answer 2

使用 TypeScript union type: IStylePreset | IStylePreset[]。

在函数体中，您可以使用Array.isArray() 检查是否传递了数组或单个实例。实际上，在这种情况下，concat() 已经在内部检查了数组或实例是否被连接，因此解决方案很简单：

例如：

class Config {
    private presets: IStylePreset[] = [];

    public addPresets(presetOrArray: IStylePreset | IStylePreset[]) {
        // Concat will concat either Array or instance
        this.presets = this.presets.concat(presetOrArray);
    }

    public getPresets(): IStylePreset[] {
        return this.presets;
    }
}

let config = new Config();
config.addPresets(stylePresets);
config.addPresets(stylePresets[0]);
console.log(config.getPresets().length); // prints 4