typescript函数通过枚举值进行Map，搜索特定值

sbdsn5lh 于 6个月前发布在 TypeScript

关注(0)|答案(1)|浏览(100)

我已经做了一个返回字符串的API调用，例如“clear”。我已经做了一个枚举SkyEnuments来匹配这个字符串：

export enum SkyGradients {
  Overcast = "linear-gradient(135deg, #808080, #404040)",
  Clear = "linear-gradient(135deg, #C0C0C0, #808080)",
}

字符串
关于SkyColors：

export enum SkyColors {
  Overcast = "rgb(128, 128, 128)",
  Clear = "rgb(192, 192, 192)",
}

型
现在我想做的是使用字符串“Clear”获取相应的颜色和渐变
我试过这个：

export function getGradients(text: string): string | undefined {
    for (const gradient in Gradients) {
        if (Gradients[gradient] === text) {
            return gradient;
        }
    }
}

型
但我得到了这个错误：

'Gradients' only refers to a type, but is being used a value here.

型
以及：

Element implicitly has an 'any' type because of type 'string' can't be used to index type 'typeof Gradients'. No index signature with a parameter of type 'string' was found on type 'typeof Gradients'

型
我理解错误，但不知道如何修复

typescript

来源：https://stackoverflow.com/questions/77449505/typescript-function-to-map-through-enum-values-searching-for-specific-value

1条答案

按热度按时间

gkn4icbw1#

除非您确实需要枚举模式，否则更好的解决方案似乎是

export type SkyFills = {
  Overcast: string,
  Clear: string,
  [key: string]: string | undefined // This lets you index with any string
}

export const skyGradients: SkyFills = {
  Overcast: "linear-gradient(135deg, #808080, #404040)",
  Clear: "linear-gradient(135deg, #C0C0C0, #808080)",
};

export const skyColors: SkyFills = {
  Overcast: "rgb(128, 128, 128)",
  Clear: "rgb(192, 192, 192)",
}

字符串
那么要获取这个值，

skyGradients.Overcast // "linear-gradient(135deg, #808080, #404040)"
skyGradients["Overcast"] // "linear-gradient(135deg, #808080, #404040)"
skyGradients["someString"] // undefined

型
TSPlayground示例
参见下面的其他解决方案。
既然在键不存在的情况下返回undefined是可以接受的，那么就可以安全地将枚举强制转换为any。

export function getGradients(text: string): string | undefined {
    return (SkyGradients as any)[text];
}

型
TSPlayground示例
尽管如果您向枚举中添加了非字符串的值，则会导致运行时错误。
如果你声明对象而不是枚举，你可以获得更健壮的类型安全（枚举只是编译成对象）。你可以对对象进行类型转换，仍然推断对象的类型，但也允许使用任意字符串进行索引。你甚至可以创建一个类型来充当枚举类型。
这就消除了对getter函数的需要，同时保持了严格的类型安全和与枚举相同的功能。

const _skyGradients = {
  Overcast: "linear-gradient(135deg, #808080, #404040)",
  Clear: "linear-gradient(135deg, #C0C0C0, #808080)",
} as const;

export type SkyGradients = typeof _skyGradients[keyof typeof _skyGradients];

export const skyGradients = _skyGradients as typeof _skyGradients & {[key: string]: SkyGradients | undefined}

型
示例用法：

const test1 = skyGradients.Overcast // type is "linear-gradient(135deg, #808080, #404040)"
const test2 = skyGradients.Clear // type is "linear-gradient(135deg, #C0C0C0, #808080)"
const test3 = skyGradients["someString"] // type is SkyGradients | undefined

function someFn(g: SkyGradients) {}

someFn(skyGradients.Overcast) // Ok
someFn("someString") // Not Ok

型
TSPlayground示例

赞(0）回复(0）举报 6个月前

我来回答

typescript函数通过枚举值进行Map，搜索特定值

1条答案

相关问题

热门标签

最新问答