web-dev-qa-db-ja.com

型定数でクラス定数を実装する方法

TypeScriptでは、constキーワードをクラスプロパティの宣言に使用することはできません。これを行うと、「クラスメンバーは 'const'キーワードを持つことができません」というエラーが発生します。

プロパティを変更すべきではないことをコードで明確に示す必要があることに気付きました。宣言されたプロパティに新しい値を代入しようとすると、IDEまたはコンパイラにエラーが発生します。あなたはどうやってこれを達成しますか？

私は現在読み取り専用のプロパティを使用していますが、私はTypeScript（およびJavaScript）に初めて慣れているので、もっと良い方法があるかどうか疑問に思います

get MY_CONSTANT():number {return 10};

TypeScript 1.8を使っています。提案？

シモンズ：私は今TypeScript 2.0.3を使っているので、私は/を受け入れました Davidの答え

typescriptclass-constants
292
BeetleJuice

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

これには、コンストラクタ内で代入できず、1か所にしか存在しないという利点があります。

444
David Sherret

定数はクラスの外で宣言してクラス内で使用することができます。そうでなければgetプロパティはいい回避策です

const MY_CONSTANT: string = "wazzup";

export class MyClass {

    public myFunction() {

        alert(MY_CONSTANT);
    }
}
50
j3ff

宣言の中でreadonly修飾子でプロパティをマークすることができます。

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

@see TypeScriptディープダイブブック - Readonly

25
Andrew

角度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のプロバイダにそれを注入する

あなたはすべてのコンポーネントにわたってそれを使うことができるでしょう。

Angular 4のEDIT：

Angular 4の新しい概念はインジェクショントークンで、不透明トークンはAngular 4では非推奨です。

インジェクショントークンOpaqueトークンの上に機能性を追加し、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!
    ]
  }
]

インジェクショントークンは不透明トークンの上に論理的に設計されています。不透明トークンはAngular 4で廃止されました。

7
Parth Ghiya

宣言する必要がある定数でreadOnly修飾子を使用するか、クラスの外側で定数を宣言してget演算子を使用して必要なクラスでのみ使用することができます。

3
kg11

このために、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修飾子は純粋にTypeScriptコンストラクトであり、TSがJSにコンパイルされると、コンストラクトはコンパイルされたJSに存在しないことも知っておく価値があります。読み取り専用のプロパティを変更すると、TSコンパイラはそれについて警告します（有効なJSです）。

1
Willem van der Veen