如何在 TypeScript 中使用带有枚举的 map() 方法

TypeScript 9月前 247

将 map() 方法与枚举一起使用：

使用 Object.keys() 方法获取枚举键的数组。
使用 map() 方法迭代数组。
在每次迭代中，返回最终数组应包含的值。

// ✅ For String Enums
enum Sizes {
  Small = 'S',
  Medium = 'M',
  Large = 'L',
}

const result = (Object.keys(Sizes) as (keyof typeof Sizes)[]).map(
  (key, index) => {
    console.log(key);
    return Sizes[key] + index;
  },
);

// 👇️ ['S0', 'M1', 'L2']
console.log(result);

// ✅ For Numeric Enums
enum SizesNumeric {
  Small,
  Medium,
  Large,
}

const result2 = (
  Object.keys(SizesNumeric).filter((v) =>
    isNaN(Number(v)),
  ) as (keyof typeof SizesNumeric)[]
).map((key, index) => {
  return SizesNumeric[key];
});

// 👇️ [0, 1, 2]
console.log(result2);

上面的示例显示了如何将 Array.map 方法与字符串和数字枚举一起使用。

TypeScript 中的枚举是真实的对象，存在于运行时。这就是我们能够将枚举传递给 Object.keys 方法的原因。

Object.keys() 方法返回一个包含对象键的数组。

// 👇️ ['name', 'age']
console.log(Object.keys({ name: 'Jim', age: 31 }));

但是，数字和字符串枚举的输出是不同的。

enum Sizes {
  Small = 'S',
  Medium = 'M',
  Large = 'L',
}

// 👇️ ['Small', 'Medium', 'Large']
console.log(Object.keys(Sizes));

// ✅ For String Enums
enum SizesNumeric {
  Small,
  Medium,
  Large,
}

// 👇️ ['0', '1', '2', 'Small', 'Medium', 'Large']
console.log(Object.keys(SizesNumeric));

请注意 ，对于数字枚举，输出包含键和值。

这就是我们在第一个示例中使用 filter() 方法的原因——从数组中排除所有不必要的值。

我们使用 keyof typeof 将数组中的值转换为枚举成员。

enum Sizes {
  Small = 'S',
  Medium = 'M',
  Large = 'L',
}

// 👇️ type U = "Small" | "Medium" | Large
type U = keyof typeof Sizes;

Keyof typeof 构造一个类型，将枚举中的所有键表示为字符串。

最后一步是使用 map() 方法。

我们传递给 map() 方法的函数会被数组中的每个值调用，我们从回调函数返回的任何内容都会被添加到新数组中。

换句话说，要将 map() 方法与枚举一起使用，我们必须将枚举键或值转换为数组，然后对结果调用 map() 方法。

如果要直接映射枚举的值，可以通过以下方式获取枚举值的数组。

enum Sizes {
  Small = 'S',
  Medium = 'M',
  Large = 'L',
}

const keys1 = Object.keys(Sizes);
console.log(keys1); // 👉️ ['Small', 'Medium', 'Large']

const values1 = Object.values(Sizes);
console.log(values1); // 👉️ ['S', 'M', 'L']

// ✅ For String Enums
enum SizesNumeric {
  Small,
  Medium,
  Large,
}

const keys2 = Object.keys(SizesNumeric).filter((v) => isNaN(Number(v)));
console.log(keys2); // 👉️ ['Small', 'Medium', 'Large']

const values2 = Object.values(SizesNumeric).filter((v) => !isNaN(Number(v)));
console.log(values2); // 👉️ [0, 1, 2]