typescript에서 클래스 상수를 구현하는 방법은 무엇입니까?

TypeScript에서는 const키워드를 사용하여 클래스 속성을 선언 할 수 없습니다. 이렇게하면 "클래스 멤버는 'const'키워드를 가질 수 없습니다."라는 오류가 발생합니다.

코드에서 속성을 변경해서는 안된다는 것을 명확하게 표시해야합니다. 속성이 선언되면 속성에 새 값을 할당하려고하면 IDE 또는 컴파일러에서 오류가 발생하기를 원합니다. 너희들은 어떻게 이것을 달성합니까?

현재 읽기 전용 속성을 사용하고 있지만 Typescript (및 JavaScript)를 처음 사용하고 더 좋은 방법이 있는지 궁금합니다.

get MY_CONSTANT():number {return 10};

typescript 1.8을 사용하고 있습니다. 제안?

추신 : 나는 지금 typescript 2.0.3을 사용하고 있으므로 David의 대답을 받아 들였습니다.

TypeScript 2.0에는 readonly수정자가 있습니다 .

class MyClass {
    readonly myReadOnlyProperty = 1;

    myMethod() {
        console.log(this.myReadOnlyProperty);
        this.myReadOnlyProperty = 5; // error, readonly
    }
}

new MyClass().myReadOnlyProperty = 5; // error, readonly

생성자에서 할당을 허용하기 때문에 상수는 아니지만, 그다지 큰 문제는 아닙니다.

대체 솔루션

대안은 static키워드를 readonly다음 과 함께 사용하는 것 입니다 .

class MyClass {
    static readonly myReadOnlyProperty = 1;

    constructor() {
        MyClass.myReadOnlyProperty = 5; // error, readonly
    }

    myMethod() {
        console.log(MyClass.myReadOnlyProperty);
        MyClass.myReadOnlyProperty = 5; // error, readonly
    }
}

MyClass.myReadOnlyProperty = 5; // error, readonly

이는 생성자에서 할당 할 수없고 한 곳에만 존재한다는 이점이 있습니다.

상수는 클래스 외부에서 선언하고 클래스 내에서 사용할 수 있습니다. 그렇지 않으면 get속성은 좋은 해결 방법입니다

const MY_CONSTANT: string = "wazzup";

export class MyClass {

    public myFunction() {

        alert(MY_CONSTANT);
    }
}

readonly선언에서 속성을 수정 자로 표시 할 수 있습니다 .

export class MyClass {
  public static readonly MY_PUBLIC_CONSTANT = 10;
  private static readonly myPrivateConstant = 5;
}

@see 타이프 라이터 딥 다이브 책 - 읽기 전용을

Angular 2 Opaque Constants라는 매우 멋진 기능을 제공합니다. 불투명 한 상수를 사용하여 클래스를 만들고 모든 상수를 정의하십시오.

import { OpaqueToken } from "@angular/core";

export let APP_CONFIG = new OpaqueToken("my.config");

export interface MyAppConfig {
    apiEndpoint: string;
}

export const AppConfig: MyAppConfig = {    
    apiEndpoint: "http://localhost:8080/api/"    
};

app.module.ts의 공급자에게 주입하십시오.

모든 구성 요소에서 사용할 수 있습니다.

Angular 4 편집 :

Angular 4의 경우 새로운 개념은 주입 토큰 및 불투명 토큰은 Angular 4에서 더 이상 사용되지 않습니다.

주입 토큰 불투명 토큰 위에 기능을 추가하고 TypeScript 제네릭과 주입 토큰을 통해 토큰에 유형 정보를 첨부 할 수 있으며 @Inject를 추가 할 필요가 없습니다.

예제 코드

불투명 토큰을 사용하는 Angular 2

const API_URL = new OpaqueToken('apiUrl'); //no Type Check


providers: [
  {
    provide: DataService,
    useFactory: (http, apiUrl) => {
      // create data service
    },
    deps: [
      Http,
      new Inject(API_URL) //notice the new Inject
    ]
  }
]

인젝션 토큰을 사용하는 Angular 4

const API_URL = new InjectionToken<string>('apiUrl'); // generic defines return value of injector


providers: [
  {
    provide: DataService,
    useFactory: (http, apiUrl) => {
      // create data service
    },
    deps: [
      Http,
      API_URL // no `new Inject()` needed!
    ]
  }
]

주입 토큰은 Opaque 토큰 위에 논리적으로 설계되었으며 Opaque 토큰은 Angular 4에서 더 이상 사용되지 않습니다.

readOnly 한정자를 상수와 함께 선언하거나 클래스 외부에서 상수를 선언하고 get 연산자를 사용하여 필요한 클래스에서만 사용하십시오.

이를 위해 readonly수정자를 사용할 수 있습니다 . 객체 readonly초기화 중에 만 할당 할 수 있는 객체 속성 .

수업 예 :

class Circle {
  readonly radius: number;

  constructor(radius: number) {
    this.radius = radius;
  }

  get area() {
    return Math.PI * this.radius * 2;
  }
}

const circle = new Circle(12);
circle.radius = 12; // Cannot assign to 'radius' because it is a read-only property.

객체 리터럴의 예 :

type Rectangle = {
  readonly height: number;
  readonly width: number;
};

const square: Rectangle = { height: 1, width: 2 };
square.height = 5 // Cannot assign to 'height' because it is a read-only property

그것은 또한 아는 가치 readonly개질제 순수 타이프 구조체이며, TS는 JS로 컴파일 될 때 구조는 컴파일 JS에 존재하지 않을 것이다. 읽기 전용 인 속성을 수정할 때 TS 컴파일러는 이에 대해 경고합니다 (유효한 JS 임).

나에게 이전의 대답은 없습니다. 정적 클래스를 열거 형으로 변환해야했습니다. 이처럼 :

export enum MyConstants {
  MyFirstConstant = 'MyFirstConstant',
  MySecondConstant = 'MySecondConstant'
}

그런 다음 내 구성 요소에서 다른 답변에서 제안한대로 새 속성을 추가합니다.

export class MyComponent {
public MY_CONTANTS = MyConstans;
constructor() { }
}

그런 다음 컴포넌트의 템플릿에서이 방식으로 사용합니다

<div [myDirective]="MY_CONTANTS.MyFirstConstant"> </div>

편집 : 죄송합니다. 내 문제는 OP와 다릅니다. someelse가 나와 같은 문제가있는 경우에도 여전히 여기에 둡니다.