时间戳

首页 > 解决方案 > Typescript 的通用枚举转换器到数组列表

angular - Typescript 的通用枚举转换器到数组列表

问题描述

性别.ts

export enum Gender {
  Male = 1,
  Female = 2
}

export let genderDescriptions: { [P in keyof typeof Gender]: string } = {
  Female: "FemaleDescriptionExample",
  Male: "MaleDescriptionExample"
}

选择项.ts

export interface SelectItem {
  label?: string;
  value: any;
}

我的组件.ts

var myList: SelectItem[] = (Object.keys(Gender) as Array<keyof typeof Gender>)
  .filter(p => typeof Gender[p] === "number")
  .map(p => ({
    label: genderDescriptions[p],
    value: Gender[p]
  }));

console.log(myList);

你好。我有一个性别枚举，我正在映射到 SelectItem 数组。控制台给我一个如下所示的结果。它运行良好。但我想要全局 enumConverter。所以我像下面这样写，但这不起作用。我怎样才能做到这一点？

1: {label: "MaleDescriptionExample", value: 1}
2: {label: "FemaleDescriptionExample", value: 2}

我给出了通用参数 T 和描述，但到处都给出了错误：

'T' 仅指一种类型，但在此处用作值

  enumToSelectItemArray<T,Description>() {
   return (Object.keys(T) as Array<keyof typeof T>)
      .filter(p => typeof T[p] === "number" && T[p] !== 3)
      .map(p => ({
        label: descriptin[p],
        value: T[p]
      }))
  }

标签： angulartypescriptenums

解决方案

类型参数在运行时在 typescript 中被擦除，因此您无法在运行时通过它们访问任何值。您将需要参数来传递枚举和描述对象。我们将使用泛型类型参数使编译器清楚地了解枚举对象和描述对象之间的关系。

enum Gender {
    Male = 1,
    Female = 2
}

let genderDescriptions: Record<keyof typeof Gender, string> = {
    Female: "FemaleDescriptionExample",
    Male: "MaleDescriptionExample"
}

function enumToSelectItemArray<TEnum>(enumObj: TEnum, descriptions: Record<keyof TEnum, string>)
{
    return (Object.keys(enumObj) as Array<keyof TEnum>)
        .filter(p => typeof enumObj[p] === "number")
        .map(p => ({
            label: descriptions[p],
            value: enumObj[p]
        }));
}

console.log(enumToSelectItemArray(Gender, genderDescriptions));

注意将映射类型替换为Record它们做同样的事情（它们实际上是同样的事情）并且记录看起来更好，在我之前的答案中忘记了。

推荐阅读