【问题标题】:How to create enum like type in TypeScript?如何在 TypeScript 中创建类似类型的枚举?
【发布时间】:2012-09-23 03:49:12
【问题描述】:

我正在为 TypeScript 的 Google 地图 API 编写定义文件。

我需要定义一个枚举类型,例如。 google.maps.Animation 包含两个属性:BOUNCE 和 DROP。

这在 TypeScript 中应该如何完成?

【问题讨论】:

  • Google Maps v3 定义现已完成,可在 Github 和 NuGet 上找到

标签: enums typescript


【解决方案1】:

TypeScript 0.9+ 有一个枚举规范:

enum AnimationType {
    BOUNCE,
    DROP,
}

最后的逗号是可选的。

【讨论】:

  • 我建议不要在这个阶段使用 enum 构造,因为 TypeScript 团队已经明确表示它会改变 - 所以它会中断。
  • 请让自己熟悉编辑工具,例如添加到答案中的代码。我在您的答案中更改了它,请看一下。如果有关于该语言功能的相关讨论,也请留下一些参考。
  • enum Animation { BOUNCE=1, DROP },因为这是 Maps API 定义它们的方式。
【解决方案2】:

从 TypeScript 0.9(目前是 alpha 版本)开始,您可以像这样使用枚举定义:

enum TShirtSize {
  Small,
  Medium,
  Large
}

var mySize = TShirtSize.Large;

默认情况下,这些枚举将分别分配 0、1 和 2。如果您想显式设置这些数字,可以将其作为枚举声明的一部分。

清单 6.2 具有显式成员的枚举

enum TShirtSize {
  Small = 3,
  Medium = 5,
  Large = 8
}

var mySize = TShirtSize.Large;

这两个例子都是直接从TypeScript for JavaScript Programmers中提取出来的。

请注意,这与 0.8 规范不同。 0.8 规范看起来像这样 - 但它被标记为实验性的并且可能会更改,因此您必须更新任何旧代码:

免责声明 - 这个 0.8 示例将在较新版本的 TypeScript 编译器中被破坏。

enum TShirtSize {
  Small: 3,
  Medium: 5,
  Large: 8
}

var mySize = TShirtSize.Large;

【讨论】:

  • 这现在应该是公认的答案,因为它仍在 RC 中工作,因此不太可能与 TS 的未来版本中断。
【解决方案3】:

现在这是语言的一部分。有关这方面的文档,请参阅 TypeScriptLang.org > Basic Types > enum。有关如何使用这些枚举的文档摘录:

enum Color {Red, Green, Blue};
var c: Color = Color.Green;

或使用手动支持编号:

enum Color {Red = 1, Green = 2, Blue = 4};
var c: Color = Color.Green;

您也可以使用 Color[2] 等返回枚举名称。

这是一个如何将这一切结合在一起的示例:

module myModule {
    export enum Color {Red, Green, Blue};

    export class MyClass {
        myColor: Color;

        constructor() {
            console.log(this.myColor);
            this.myColor = Color.Blue;
            console.log(this.myColor);
            console.log(Color[this.myColor]);
        }
    }
}

var foo = new myModule.MyClass();

这将记录:

undefined  
2  
Blue

因为,在撰写本文时,Typescript Playground 将生成以下代码:

var myModule;
(function (myModule) {
    (function (Color) {
        Color[Color["Red"] = 0] = "Red";
        Color[Color["Green"] = 1] = "Green";
        Color[Color["Blue"] = 2] = "Blue";
    })(myModule.Color || (myModule.Color = {}));
    var Color = myModule.Color;
    ;
    var MyClass = (function () {
        function MyClass() {
            console.log(this.myColor);
            this.myColor = Color.Blue;
            console.log(this.myColor);
            console.log(Color[this.myColor]);
        }
        return MyClass;
    })();
    myModule.MyClass = MyClass;
})(myModule || (myModule = {}));
var foo = new myModule.MyClass();

【讨论】:

    【解决方案4】:

    另外请注意,您可以使用以下内容进行 id/string 枚举:

    class EnumyObjects{
        public static BOUNCE={str:"Bounce",id:1};
        public static DROP={str:"Drop",id:2};
        public static FALL={str:"Fall",id:3};
    
    
    }
    

    【讨论】:

    • 您将如何使用它访问他们的str 和id?
    • EnumyObjects.BOUNCE.str 将访问该值。
    • 这种设计的问题是对象都是可变的,这可能会导致问题:goo.gl/CT4Ip
    • abstract class 是否更适合防止实例化,因为 TypeScript 没有 static class 的概念?
    【解决方案5】:

    更新:

    正如@iX3 所述,Typescript 2.4 支持枚举字符串。

    见:Create an enum with string values in Typescript


    原答案:

    对于字符串成员值,TypeScript 只允许数字作为枚举成员值。但是您可以实施一些解决方案/技巧;

    解决方案 1:

    复制自:https://blog.rsuter.com/how-to-implement-an-enum-with-string-values-in-typescript/

    有一个简单的解决方案:在分配之前将字符串文字转换为任意:

    export enum Language {
        English = <any>"English",
        German = <any>"German",
        French = <any>"French",
        Italian = <any>"Italian"
    }
    

    解决方案 2:

    复制自:https://basarat.gitbooks.io/typescript/content/docs/types/literal-types.html

    您可以使用字符串文字作为类型。例如:

    let foo: 'Hello';
    

    在这里,我们创建了一个名为 foo 的变量,它只允许将字面值“Hello”分配给它。如下所示:

    let foo: 'Hello';
    foo = 'Bar'; // Error: "Bar" is not assignable to type "Hello"
    

    它们本身不是很有用,但可以在类型联合中组合以创建强大(且有用)的抽象,例如:

    type CardinalDirection =
        "North"
        | "East"
        | "South"
        | "West";
    
    function move(distance: number, direction: CardinalDirection) {
        // ...
    }
    
    move(1,"North"); // Okay
    move(1,"Nurth"); // Error!
    

    【讨论】:

    【解决方案6】:

    打字稿中的枚举:

    枚举被放入打字稿语言中以定义一组命名常量。使用枚举可以让我们的生活更轻松。原因是这些常量通常比枚举所代表的值更容易阅读。

    创建一个枚举:

    enum Direction {
        Up = 1,
        Down,
        Left,
        Right,
    }
    

    来自 typescript 文档的这个例子很好地解释了枚举是如何工作的。请注意,我们的第一个枚举值 (Up) 初始化为 1。然后数字枚举的所有以下成员都从该值自动递增(即 Down = 2,Left = 3,Right = 4) .如果我们没有用 1 初始化第一个值,枚举将从 0 开始,然后自动递增(即 Down = 1,Left = 2,Right = 3)。

    使用枚举:

    我们可以通过以下方式访问枚举的值:

    Direction.Up;     // first the enum name, then the dot operator followed by the enum value
    Direction.Down;
    

    请注意,通过这种方式,我们在编写代码时更具描述性。枚举基本上阻止我们使用幻数(代表某些实体的数字,因为程序员在特定上下文中赋予了它们含义)。幻数不好的原因如下:

    1. 我们需要更加努力地思考,首先需要将数字转换为实体,然后才能对代码进行推理。
    2. 如果我们在很长一段时间后审查我们的代码,或者其他程序员审查我们的代码,他们不一定知道这些数字的含义。

    【讨论】:

      【解决方案7】:

      我可以像这样键入枚举(这也允许您将其作为对象循环):

      enum: { [x: string]: string }
      

      地图示例:

      export const yourFunction = (
        enum: { [x: string]: string },
       ) => { 
        const iHaveBeenMapped = Object.keys(enum).map((key) => {
         const enumValue = enum[key];
        }); 
       } 
      

      【讨论】:

        猜你喜欢
        • 2022-01-09
        • 2022-09-23
        • 1970-01-01
        • 2010-11-26
        • 2019-08-04
        • 1970-01-01
        • 2018-10-18
        • 2018-05-26
        相关资源
        最近更新 更多