จะสร้าง enum like type ใน TypeScript ได้อย่างไร?


121

ฉันกำลังทำงานกับไฟล์คำจำกัดความสำหรับ Google maps API สำหรับ TypeScript

และฉันต้องกำหนด enum เช่นประเภทเช่น google.maps.Animationซึ่งประกอบด้วยสองคุณสมบัติ: BOUNCEและDROP.

สิ่งนี้ควรทำอย่างไรใน TypeScript


3
คำจำกัดความของ Google Maps v3 เสร็จสมบูรณ์แล้วและสามารถพบได้ในGithubและNuGet
eNepper

คำตอบ:


141

TypeScript 0.9+ มีข้อกำหนดสำหรับ enums:

enum AnimationType {
    BOUNCE,
    DROP,
}

ลูกน้ำสุดท้ายเป็นทางเลือก


11
ฉันขอแนะนำไม่ให้ใช้enumโครงสร้างในขั้นตอนนี้เนื่องจากทีม TypeScript ได้ระบุไว้อย่างชัดเจนว่ากำลังจะเปลี่ยนแปลง - ดังนั้นมันจะแตก
Fenton

1
โปรดทำความคุ้นเคยกับเครื่องมือแก้ไขตัวอย่างเช่นด้วยรหัสที่คุณเพิ่มในคำตอบ ฉันเปลี่ยนคำตอบของคุณสำหรับโปรดดู นอกจากนี้โปรดทิ้งข้อมูลอ้างอิงไว้หากมีการอภิปรายที่เกี่ยวข้องเกี่ยวกับคุณลักษณะภาษานั้น
hakre

enum Animation {BOUNCE = 1, DROP} เนื่องจากเป็นวิธีที่ Maps API กำหนด
dchest


enum และหลักการตั้งชื่อสมาชิกจะเหมือนกับใน c # (ทั้งจาก Microsoft) มันคือ PascalCase ไม่ใช่ UPPER_CASE
Dominik

66

ใน TypeScript 0.9 (ปัจจุบันเป็นรุ่นอัลฟ่า) คุณสามารถใช้นิยาม enum ดังนี้:

enum TShirtSize {
  Small,
  Medium,
  Large
}

var mySize = TShirtSize.Large;

โดยค่าเริ่มต้นการแจงนับเหล่านี้จะถูกกำหนด 0, 1 และ 2 ตามลำดับ หากคุณต้องการตั้งค่าตัวเลขเหล่านี้อย่างชัดเจนคุณสามารถทำได้โดยเป็นส่วนหนึ่งของการประกาศ enum

รายการ 6.2 การแจงนับกับสมาชิกที่ชัดเจน

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

var mySize = TShirtSize.Large;

ตัวอย่างทั้งสองนี้ยกออกจากTypeScript สำหรับโปรแกรมเมอร์ JavaScriptโดยตรง

โปรดทราบว่าสิ่งนี้แตกต่างจากข้อกำหนด 0.8 ข้อกำหนด 0.8 มีลักษณะดังนี้ - แต่ถูกทำเครื่องหมายว่าเป็นแบบทดลองและมีแนวโน้มที่จะเปลี่ยนแปลงดังนั้นคุณจะต้องอัปเดตโค้ดเก่า

ข้อจำกัดความรับผิดชอบ - ตัวอย่าง 0.8 นี้จะใช้งานไม่ได้ในคอมไพเลอร์ TypeScript เวอร์ชันใหม่กว่า

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

var mySize = TShirtSize.Large;

3
ตอนนี้ควรเป็นคำตอบที่ยอมรับแล้วเนื่องจากยังคงใช้งานได้ใน RC ดังนั้นจึงไม่น่าจะผิดกับ TS เวอร์ชันในอนาคต
Adrian Grigore

24

ตอนนี้เป็นส่วนหนึ่งของภาษา ดูTypeScriptLang.org> ประเภทพื้นฐาน> enumสำหรับเอกสารเกี่ยวกับเรื่องนี้ ข้อความที่ตัดตอนมาจากเอกสารเกี่ยวกับวิธีการใช้ enums เหล่านี้:

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

หรือด้วยหมายเลขสำรองด้วยตนเอง:

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

คุณยังสามารถกลับไปที่ชื่อ enum โดยใช้ตัวอย่างเช่น 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();

14

โปรดทราบว่าคุณสามารถใส่รหัส / สตริงได้ดังนี้:

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


}

2
คุณจะเข้าถึงstrและidใช้สิ่งนั้นได้อย่างไร
kba

1
EnumyObjects.BOUNCE.str จะเข้าถึงค่า
done_merson

2
ปัญหาในการออกแบบนี้คือวัตถุทั้งหมดไม่แน่นอนซึ่งอาจทำให้เกิดปัญหา: goo.gl/CT4Ip
Fenton

จะabstract classเหมาะสมกว่าในการป้องกันการสร้างอินสแตนซ์เนื่องจาก TypeScript ไม่มีแนวคิดเกี่ยวกับ a static class?
jocull

10

อัปเดต :

ตามที่ระบุไว้โดย @ iX3 typescript 2.4รองรับสตริง enum

ดู: สร้าง enum ด้วยค่าสตริงใน typescript


คำตอบเดิม:

สำหรับค่าสมาชิก String TypeScript อนุญาตเฉพาะตัวเลขเป็นค่าสมาชิก enum แต่มีโซลูชัน / แฮ็กบางอย่างที่คุณสามารถนำไปใช้ได้

แนวทางที่ 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!

1
TypeScript 2.4 มีการสนับสนุนสำหรับประเภทลิเทอรัลสตริงใน enums ดูstackoverflow.com/questions/15490560/…และblogs.msdn.microsoft.com/typescript/2017/06/27/…
iX3

1

Enums ใน typescript:

Enums ถูกใส่ลงในภาษา typescript เพื่อกำหนดชุดของค่าคงที่ที่มีชื่อ การใช้ enums สามารถทำให้ชีวิตของเราง่ายขึ้น เหตุผลก็คือค่าคงที่เหล่านี้มักจะอ่านได้ง่ายกว่าค่าที่ enum แสดงถึง

การสร้าง enum:

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

ตัวอย่างนี้จากเอกสาร typescript อธิบายได้ดีมากว่า enums ทำงานอย่างไร สังเกตว่าค่า enum แรกของเรา (ขึ้น) เริ่มต้นด้วย 1 สมาชิกทั้งหมดต่อไปนี้ของ enum จะเพิ่มขึ้นโดยอัตโนมัติจากค่านี้ (เช่น Down = 2, Left = 3, Right = 4) หากเราไม่ได้เริ่มต้นค่าแรกด้วย 1 enum จะเริ่มต้นที่ 0 จากนั้นเพิ่มขึ้นอัตโนมัติ (เช่น Down = 1, Left = 2, Right = 3)

ใช้ enum:

เราสามารถเข้าถึงค่าของ enum ได้ในลักษณะต่อไปนี้:

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

สังเกตว่าวิธีนี้เราอธิบายวิธีการเขียนโค้ดได้ดีกว่า โดยพื้นฐานแล้ว Enums ป้องกันไม่ให้เราใช้ตัวเลขวิเศษ (ตัวเลขซึ่งแสดงถึงเอนทิตีบางอย่างเนื่องจากโปรแกรมเมอร์ได้ให้ความหมายกับพวกเขาในบริบทหนึ่ง ๆ ) เลขวิเศษไม่ดีเนื่องจากสาเหตุต่อไปนี้:

  1. เราต้องคิดให้หนักขึ้นก่อนอื่นเราต้องแปลตัวเลขเป็นเอนทิตีก่อนจึงจะสามารถหาเหตุผลเกี่ยวกับรหัสของเราได้
  2. หากเราตรวจสอบโค้ดของเราหลังจากนั้นไม่นานหรือโปรแกรมเมอร์คนอื่น ๆ ตรวจสอบโค้ดของเราพวกเขาไม่จำเป็นต้องรู้ว่าตัวเลขเหล่านี้มีความหมายอย่างไร
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.