javascript - 确保嵌套成员的接口(interface)类型

Question

我正在使用 JS/TypeScript 并遇到以下情况:

enum ResultFlag {
    BELOW_MEASUREMENT_RANGE = 1, ABOVE_MEASUREMENT_RANGE,
    BELOW_PATHOLOGICAL_RANGE, ABOVE_PATHOLOGICAL_RANGE
}

const FlagDefs = {
    [ResultFlag.BELOW_MEASUREMENT_RANGE]: {
        icon: 'down', color: palette.grey200
    },
    [ResultFlag.ABOVE_MEASUREMENT_RANGE]: {
        icon: 'up', color: palette.grey200
    },
    [ResultFlag.BELOW_PATHOLOGICAL_RANGE]: {
        letter: '<', color: palette.accent
    },
    [ResultFlag.ABOVE_PATHOLOGICAL_RANGE]: {
        letter: '>', color: palette.accent
    }
}

我想确保 FlagDefs 成员具有以下接口(interface):

interface IFlagDef {
    icon?: string;
    letter?: string;
    color: string;
}

以下内容无法编译:

const FlagDefs = {
    [ResultFlag.BELOW_MEASUREMENT_RANGE]: IFlagDef ({
        icon: 'down', color: palette.accent
    }) 
    //...
}

以下内容确实可以编译，但实际上完全没有意义，因为强制转换只是强制执行接口(interface)而不检查任何内容:

const FlagDefs = {
    [ResultFlag.BELOW_MEASUREMENT_RANGE]: {
        icon: 'down', color: palette.accent
    } as IFlagDef
    //...
}

我终于想出了一个可行的解决方案:

const FlagDefs = {
    [ResultFlag.BELOW_MEASUREMENT_RANGE]: ((): IFlagDef => { return {
        icon: 'down', color: palette.accent
    }; })()
    // ...
}

我想知道是否有人知道一种更简单、更直接的方法来确保 FlagDefs 的所有成员正确实现接口(interface) IFlagDef？

Answer 1

您可以通过为 FlagDefs 添加显式类型声明来解决此问题:

type FDStorage = { [key: number]: IFlagDef; };

const FlagDefs: FDStorage = {
    [ResultFlag.BELOW_MEASUREMENT_RANGE]: {
        icon: 'down', color: palette.accent
    }
    // ...
}

如您所见，我使用 number 作为键类型，因为枚举值是数字，并且只允许 number 或 string 类型作为关键类型。