从 Typescript 中的 int 获取特定的枚举成员答案

【问题标题】：Get specific enum member from int in Typescript从 Typescript 中的 int 获取特定的枚举成员
【发布时间】：2018-09-11 15:36:28
【问题描述】：

我在这里有一个特定的情况，我有一个 React 按钮，它有一个由枚举定义的类，按钮通过 switch 语句选择正确的类，测试枚举的每个成员。这是硬编码的，这个组件工作正常（代码如下）。

import * as React from 'react';
import './SquareButton.css';

export interface Props {
    buttonType: ButtonType;
    style?: object;
}

const SquareButton = ({ buttonType, style }: Props) => {

    var className = "";
    switch (buttonType) {
        case ButtonType.Hamburger:
            className = "zmdi zmdi-menu zmdi-hc-2x";
            break;
        case ButtonType.Clock:
            className = "zmdi zmdi-time zmdi-hc-2x";
            break;
        case ButtonType.Wifi:
            className = "zmdi zmdi-network-wifi zmdi-hc-2x";
            break;
        default:
            break;
    }

    return (
        <div className="squareButton" style={style} >
            <i className={className} />
        </div>
    )
}

export enum ButtonType {
    Wifi,
    Hamburger,
    Clock
}

export default SquareButton;

我遇到的问题是在测试这个组件时，因为enum ButtonType 的这个列表可能会增长我希望能够循环遍历每个按钮类型，而不必编写单独的测试或每次添加新的测试一个新按钮。下面的示例测试。

for (var i = 0; i < Object.keys(ButtonType).length / 2; i++) {
    test(ButtonType[i] + 'square button icon class must contain zmdi', () => {
        const button = Enzyme.shallow(<SquareButton buttonType={i as ButtonType} />)
        expect(button.find('div').find('i').hasClass("zmdi")).toEqual(true);
    });
}

这成功地循环了枚举中的每个成员，但我不知道如何让循环中的特定枚举实例传递给组件。传递 i as ButtonType 仍然只传递一个 int 值，并命中开关中的默认值。我已经尝试了很多变体/字符串转换等，但我没有尝试过任何工作（如果我硬编码（例如）ButtonType.Wifi 值，则测试工作）。

如何从整数值中获取特定的枚举成员？

【问题讨论】：

stackoverflow.com/questions/39372804/… 有帮助吗？
不幸的是，“item”在这种情况下只返回一个字符串，就像我在每个循环上尝试 ButtonType[i] 一样

标签： reactjs typescript enums enzyme

【解决方案1】：

在这种情况下，i 整数已经是所需的值，ButtonType.Hamburger === 0 等

遍历枚举的问题是枚举值不一定是数字，枚举键的一半是数字索引是不必要的。

enum A {
        B,
        C,
        D = 'D'
}

产生这些键：

["0", "1", "B", "C", "D"]

故障安全的方法是：

for (const enumKey of Object.keys(ButtonType).filter(key => isNaN(+key))) {
  const enumVal = ButtonType[enumKey] as ButtonType;

  test(`ButtonType.${enumKey} square button icon class must contain zmdi`, () => {
    const button = Enzyme.shallow(<SquareButton buttonType={enumVal} />)
    ...
  })
}

由于最好还测试特定于ButtonType 的类，例如zmdi-menu，因此还应该有相应的测试，因此可能不需要带有迭代的通用测试。

【讨论】：