클래스 상수를 구현하는 방법

클래스 상수를 구현하는 방법

TypeScript는const클래스 속성을 선언하는 데 키워드를 사용할 수 없습니다.계속하다

나는 재산이 변경되어서는 안 된다는 것을 코드에 명확하게 나타낼 필요가 있다.IDE 또는 컴파일러가 선언된 후 속성에 새 값을 할당하려고 하면 오류가 발생합니다.어떻게 하는 거야?

현재 읽기 전용 속성을 사용하고 있습니다만, 더 나은 방법이 없을까요?

get MY_CONSTANT():number {return 10};

나는 1.8 활자를 쓰고 있다.제안사항?

추신: 저는 현재 타이프스크립트 2.0.3을 사용하고 있기 때문에 David의 답변을 받아들였습니다.

TypeScript 2.0에는 다음 수식어가 있습니다.

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

@TypeScript 딥 다이브북 참조 - 읽기 전용

각도 2 불투명 상수라는 매우 좋은 기능을 제공합니다.클래스를 만들고 불투명 상수를 사용하여 모든 상수를 정의합니다.

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의 공급자에 주입합니다.

모든 컴포넌트에서 사용할 수 있습니다.

각도 4의 편집:

Angular 4의 경우 새로운 개념은 Injection Token이고 Angular 4에서는 Opaque token이 사용되지 않습니다.

Injection Token 불투명 토큰 위에 기능을 추가합니다. TypeScript 제네릭스를 통해 토큰에 유형 정보를 첨부할 수 있으며, Injection Token을 추가할 필요가 없습니다.

코드 예시

불투명 토큰을 사용한 각도 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
    ]
  }
]

사출 토큰을 사용한 각도 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!
    ]
  }
]

주입 토큰은 불투명 토큰 위에 논리적으로 설계되어 있으며 Angular 4에서는 불투명 토큰이 사용되지 않습니다.

은 " " " 입니다.readonlyTS를 사용합니다.라이브러리가 되어도 실제로는 아무것도 방해되지 않고 TS 컴파일러 자체에 대한 경고만 제공합니다.

스태틱도 올바르지 않습니다.즉, 클래스의 인스턴스가 아닌 클래스에 메서드를 추가하는 것이기 때문에 직접 대처해야 합니다.

이를 관리하는 방법은 여러 가지가 있지만, 순수한 TS 방식은 다음과 같습니다.getter- 당신이 이미 한 것과 똑같습니다.

또 다른 방법은 그것을 로서 넣는 것입니다.readonly, 단, 를 사용합니다.Object.defineProperty잠그는 것 - 이것은 Getter를 통해 실행되는 것과 거의 동일하지만, 그것을 얻기 위해 사용하는 방법이 아니라 가치를 가지기 위해 잠글 수 있습니다.

class MyClass {
    MY_CONSTANT = 10;

    constructor() {
        Object.defineProperty(this, "MY_CONSTANT", {value: this.MY_CONSTANT});
    }
}

기본적으로는 읽기 전용이지만 자세한 내용은 문서를 참조하십시오.

이를 위해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).

선언해야 하는 상수와 함께 readOnly 한정자를 사용하거나 get 연산자를 사용하여 클래스 외부에 상수를 선언하고 특히 필요한 클래스에서만 사용할 수 있습니다.

다음과 같이 간단히 선언할 수도 있습니다.src/classes/Car/consts/Honda.ts

export const CIVIC: string = "Civic";

export default {
    CIVIC: CIVIC
};

그런 다음 클래스 파일에서 다음과 같은 작업을 수행합니다.

import Honda from "./consts/Honda";

export class Car {

    protected model: string = Honda.Civic;

    [...]

}

export default Car;

이렇게 하면 상수가 되도록 할 수 있습니다.이 방법은 데이터 세트를 구축하는 경우에도 매우 효과적입니다.

상수를 캡슐화하는 경우 클래스가 아니라 네임스페이스일 수 있습니다.다양한 옵션은 다음과 같습니다.

const MY_CONST_1 = "MyText"

이것이 가장 적합한 옵션이며 다음 js를 생성합니다.

const MY_CONST_1 = "MyText"

다른 opcion은 네임스페이스에 캡슐화되어 있습니다.

namespace Constants {
  export const MY_CONST_1: string = 'MyText';  
}

그러면 다음 js가 생성됩니다.

var Constants;
(function (Constants) {
    Constants.MY_CONST_1 = 'MyText';
})(Constants || (Constants = {}));

및 클래스의 기타 옵션:

abstract class ConstantsClass {
    static readonly MY_CONST_1 = "MyText";
}

그러면 다음 js가 생성됩니다.

class ConstantsClass {
}
ConstantsClass.MY_CONST_1 = "MyText";

자신에게 가장 적합한 것을 선택할 수 있습니다.

내게는 이전의 어떤 대답도 통하지 않는다.정적 클래스를 열거형으로 변환해야 했습니다.다음과 같이 합니다.

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

그런 다음 다른 답변에 제시된 대로 내 컴포넌트에 새 속성을 추가합니다.

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

내 컴포넌트 템플릿에서는 이렇게 사용합니다.

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

편집: 죄송합니다.내 문제는 OP의 문제와는 달랐다.만약 누군가 나와 같은 문제를 가지고 있다면, 나는 여전히 이것을 여기에 두고 간다.

언급URL : https://stackoverflow.com/questions/37265275/how-to-implement-class-constants