【问题标题】:Get TypeScript enum name from instance从实例中获取 TypeScript 枚举名称
【发布时间】:2018-06-24 20:35:43
【问题描述】:

我有以下 TypeScript 枚举:

enum Country {
    BR = "Brazil",
    NO = "Norway"
}

然后想象我有一个将Country 作为参数的方法,如下所示:

someFunc = (country: Country): void => {
    console.log(country) //Will print "Brazil" if country = Country.BR
    console.log(Country[country]) //Same as above
    console.log(???) //I want to print "BR" if country = Country.BR
}

如何解决第三个console.log 语句?

我如何获得枚举键?

问候

【问题讨论】:

    标签: javascript reactjs typescript enums


    【解决方案1】:

    ts-enum-util (github, npm) 支持字符串枚举的 value->key 反向查找、编译时类型安全和运行时验证。

    import {$enum} from "ts-enum-util";
    
    enum Country {
        BR = "Brazil",
        NO = "Norway"
    }
    
    someFunc = (country: Country): void => {
        // throws an error if the value of "country" at run time is
        // not "Brazil" or "Norway".  
        // type of "name": ("BR" | "NO")
        const name = $enum(Country).getKeyOrThrow(country);
    }
    

    【讨论】:

      【解决方案2】:

      我经常使用纯 JavaScript 对象而不是枚举,并使用 keyof 运算符来确保其键的类型安全:

      const CountryMap = {
          BR: "Brazil",
          NO: "Norway"
      };
      
      // equivalent to: type Country = 'BR' | 'NO';
      type Country = keyof typeof CountryMap;
      
      const someFunc = (country: Country): void => {
          console.log(country);
      }
      

      【讨论】:

        【解决方案3】:

        在枚举构造下,您会得到类似的东西

        Country["BR"] = "Brazil";
        Country["NO"] = "Norway";
        

        这是一个简单的对象。

        默认情况下,您无法获取枚举的密钥。但是您可以手动遍历键并尝试找到那个键。

        enum Country {
            BR = "Brazil",
            NO = "Norway"
        }
        
        console.log(Object.keys(Country).find(key => Country[key] === country))
        

        【讨论】:

        • 但这意味着为所有可能的值做一个 if 语句?
        • 为什么使用 if 语句?您可以与您的国家/地区进行比较
        • 它不是很灵活...假设我的 Country 枚举中有 100 个枚举值,我的方法想打印给定枚举实例的国家代码(枚举的键)。那么这个问题就没有办法解决了吗?
        • Country[key] === country) 此声明适用于每个国家/地区。它只是获取该枚举的密钥。如果我理解你是正确的。
        • 啊,是的,确实有效!希望有一个更简单的解决方案
        猜你喜欢
        • 2016-08-12
        • 2012-12-28
        • 1970-01-01
        • 2015-12-22
        • 2018-04-05
        • 1970-01-01
        • 1970-01-01
        • 2013-04-08
        • 1970-01-01
        相关资源
        最近更新 更多