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 IFlagDef {
    icon?: string;
    letter?: string;
    color: string;
}

以下内容无法编译：

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

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

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的所有成员正确实现IFlagDef接口？

Answer 1

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

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

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

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

确保嵌套成员的接口类型

1 个答案: