TypeScript에서 유형과 같은 열거 형을 만드는 방법은 무엇입니까?


120

TypeScript 용 Google지도 API에 대한 정의 파일을 작업 중입니다.

그리고 예를 들어 유형과 같은 열거 형을 정의해야합니다. google.maps.Animation두 개의 속성이 포함되어 있습니다 : BOUNCEDROP.

TypeScript에서 어떻게해야합니까?


3
이제 Google Maps v3 정의가 완료되었으며 GithubNuGet
eNepper

답변:


140

TypeScript 0.9+에는 열거 형에 대한 사양이 있습니다.

enum AnimationType {
    BOUNCE,
    DROP,
}

마지막 쉼표는 선택 사항입니다.


11
enumTypeScript 팀이 변경 될 것이므로이 단계에서 구조를 사용 하지 않는 것이 좋습니다.
Fenton 2012 년

1
예를 들어 답변에 추가 한 코드와 같은 편집 도구에 익숙해 지십시오. 나는 당신의 대답에서 그것을 변경했습니다. 또한 해당 언어 기능에 대한 관련 토론이있는 경우 참고 자료를 남겨주세요.
hakre

enum Animation {BOUNCE = 1, DROP}, 이것이 Maps API가 정의하는 방식이기 때문입니다.
dchest


열거 형 및 해당 멤버 명명 규칙은 C #에서와 동일합니다. (둘 다 Microsoft에서 제공). PascalCase입니다. UPPER_CASE가 아닙니다.
Dominik

66

TypeScript 0.9 (현재 알파 릴리스)부터 다음과 같이 열거 형 정의를 사용할 수 있습니다.

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;

이 두 예제 모두 JavaScript 프로그래머 용 TypeScript에서 직접 분리되었습니다 .

이것은 0.8 사양과 다릅니다. 0.8 사양은 다음과 같이 보였지만 실험적인 것으로 표시되었으며 변경 될 가능성이 있으므로 이전 코드를 업데이트해야합니다.

면책 조항 -이 0.8 예제는 최신 버전의 TypeScript 컴파일러에서 손상됩니다.

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

var mySize = TShirtSize.Large;

3
이것은 RC에서 여전히 작동하고 있으므로 향후 버전의 TS에서 깨질 가능성이 없기 때문에 이제 허용되는 답변이어야합니다.
Adrian Grigore 2014 년

24

이것은 이제 언어의 일부입니다. 이에 대한 문서는 TypeScriptLang.org> 기본 유형> 열거 를 참조하십시오 . 이 열거 형을 사용하는 방법에 대한 문서에서 발췌 한 내용 :

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();

14

다음과 같이 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};


}

2
어떻게 액세스 str하고 id사용 하시겠습니까?
kba

1
EnumyObjects.BOUNCE.str은 값에 액세스합니다.
done_merson 2013 년

2
이 디자인의 문제점은 객체가 모두 변경 가능하여 문제를 일으킬 수 있다는 것입니다. goo.gl/CT4Ip
Fenton

abstract classTypeScript에는 static class? 개념이 없기 때문에 인스턴스화를 방지하는 것이 더 적절할 것 입니다 .
jocull

10

업데이트 :

@ iX3에서 언급했듯이 Typescript 2.4 는 열거 형 문자열을 지원합니다.

참조 : Typescript에서 문자열 값을 사용하여 열거 형 만들기


원래 답변 :

String 멤버 값의 경우 TypeScript는 열거 형 멤버 값으로 숫자 만 허용합니다. 그러나 구현할 수있는 몇 가지 솔루션 / 핵이 있습니다.

해결책 1 :

복사 : https://blog.rsuter.com/how-to-implement-an-enum-with-string-values-in-typescript/

간단한 해결책이 있습니다. 할당하기 전에 문자열 리터럴을 any로 캐스팅하십시오.

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';

여기에서 리터럴 값 'Hello'만 할당 할 수있는 foo라는 변수를 만들었습니다. 이것은 아래에 설명되어 있습니다.

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는 열거 형의 문자열 리터럴 유형에 대한 지원을 포함합니다. stackoverflow.com/questions/15490560/…blogs.msdn.microsoft.com/typescript/2017/06/27/…
iX3

1

typescript의 열거 형 :

열거 형은 명명 된 상수 집합을 정의하기 위해 타이프 스크립트 언어에 입력됩니다. 열거 형을 사용하면 우리 삶이 더 쉬워 질 수 있습니다. 그 이유는 이러한 상수가 열거 형이 나타내는 값보다 읽기 쉬운 경우가 많기 때문입니다.

열거 형 만들기 :

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. 오랜 시간이 지난 후 코드를 검토하거나 다른 프로그래머가 코드를 검토하면이 숫자가 의미하는 바를 반드시 알 수는 없습니다.
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.