Wie implementiere ich Klassenkonstanten in Typoskript?

In TypeScript kann das constSchlüsselwort nicht zum Deklarieren von Klasseneigenschaften verwendet werden. Dies führt dazu, dass der Compiler einen Fehler mit "Ein Klassenmitglied kann das Schlüsselwort 'const' nicht haben."

Ich muss im Code klar angeben, dass eine Eigenschaft nicht geändert werden sollte. Ich möchte, dass die IDE oder der Compiler einen Fehler macht, wenn ich versuche, der Eigenschaft einen neuen Wert zuzuweisen, sobald sie deklariert wurde. Wie erreicht ihr das?

Ich verwende derzeit eine schreibgeschützte Eigenschaft, bin jedoch neu in Typescript (und JavaScript) und frage mich, ob es einen besseren Weg gibt:

get MY_CONSTANT():number {return 10};

Ich benutze Typoskript 1.8. Vorschläge?

PS: Ich verwende jetzt Typoskript 2.0.3, also habe ich Davids Antwort akzeptiert

TypeScript 2.0 hat den readonlyModifikator :

class MyClass {
    readonly myReadOnlyProperty = 1;

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

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

Es ist nicht gerade eine Konstante, weil es die Zuweisung im Konstruktor ermöglicht, aber das ist höchstwahrscheinlich keine große Sache.

Alternative Lösung

Eine Alternative besteht darin, das staticSchlüsselwort zu verwenden mit 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

Dies hat den Vorteil, dass es im Konstruktor nicht zuweisbar ist und nur an einer Stelle vorhanden ist.

Konstanten können außerhalb von Klassen deklariert und innerhalb Ihrer Klasse verwendet werden. Ansonsten ist die getEigenschaft eine schöne Problemumgehung

const MY_CONSTANT: string = "wazzup";

export class MyClass {

    public myFunction() {

        alert(MY_CONSTANT);
    }
}

Sie können Eigenschaften mit dem readonlyModifikator in Ihrer Deklaration markieren :

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

@see TypeScript Deep Dive Buch - Readonly

Winkel 2 Bietet eine sehr schöne Funktion, die als undurchsichtige Konstanten bezeichnet wird. Erstellen Sie eine Klasse und definieren Sie alle Konstanten dort mit undurchsichtigen Konstanten.

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

Injizieren Sie es in Anbietern in app.module.ts

Sie können es für alle Komponenten verwenden.

EDIT für Angular 4:

Für Angular 4 lautet das neue Konzept Injection Token & Opaque Token ist in Angular 4 veraltet.

Injection Token Fügt Funktionen zusätzlich zu undurchsichtigen Token hinzu. Es ermöglicht das Anhängen von Typinformationen an das Token über TypeScript-Generika sowie Injection Token, sodass @Inject nicht mehr hinzugefügt werden muss

Beispielcode

Winkel 2 Verwenden undurchsichtiger Token

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

Winkel 4 Verwenden von Injektionstoken

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!
    ]
  }
]

Injektionsmarker werden logisch über undurchsichtigen Token entworfen und undurchsichtige Token sind in Winkel 4 veraltet.

Verwenden Sie entweder den Modifikator readOnly mit der Konstante, die deklariert werden muss, oder deklarieren Sie eine Konstante außerhalb der Klasse und verwenden Sie sie speziell nur in der erforderlichen Klasse mit dem Operator get.

Hierfür können Sie den readonlyModifikator verwenden. readonlyObjekteigenschaften, die nur während der Initialisierung des Objekts zugewiesen werden können.

Beispiel in Klassen:

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.

Beispiel in Objektliteralen:

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

Es ist auch wichtig zu wissen, dass der readonlyModifikator ein reines Typoskript-Konstrukt ist und wenn der TS zu JS kompiliert wird, das Konstrukt im kompilierten JS nicht vorhanden ist. Wenn wir schreibgeschützte Eigenschaften ändern, warnt uns der TS-Compiler davor (es ist gültiges JS).

Für mich funktioniert keine der früheren Antworten. Ich musste meine statische Klasse in enum konvertieren. So was:

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

Dann füge ich in meiner Komponente eine neue Eigenschaft hinzu, wie in anderen Antworten vorgeschlagen

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

Dann verwende ich es in der Vorlage meiner Komponente so

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

EDIT: Entschuldigung. Mein Problem war anders als bei OPs. Ich lasse das immer noch hier, wenn jemand das gleiche Problem hat wie ich.