Bagaimana mengimplementasikan konstanta kelas dalam naskah?

Dalam TypeScript, constkata kunci tidak dapat digunakan untuk mendeklarasikan properti kelas. Melakukannya menyebabkan kesalahan kompiler dengan "Anggota kelas tidak dapat memiliki kata kunci 'const'."

Saya menemukan diri saya perlu menunjukkan dengan jelas dalam kode bahwa properti tidak boleh diubah. Saya ingin IDE atau kompiler untuk kesalahan jika saya mencoba untuk memberikan nilai baru ke properti setelah dideklarasikan. Bagaimana kalian mencapai ini?

Saat ini saya menggunakan properti read-only, tetapi saya baru mengenal Typescript (dan JavaScript) dan bertanya-tanya apakah ada cara yang lebih baik:

get MY_CONSTANT():number {return 10};

Saya menggunakan naskah 1.8. Saran?

PS: Saya sekarang menggunakan naskah 2.0.3, jadi saya sudah menerima jawaban David

TypeScript 2.0 memiliki readonlypengubah :

class MyClass {
    readonly myReadOnlyProperty = 1;

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

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

Ini bukan konstanta karena memungkinkan penugasan dalam konstruktor, tetapi kemungkinan besar itu bukan masalah besar.

Solusi alternatif

Alternatifnya adalah menggunakan statickata kunci dengan 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

Ini bermanfaat karena tidak dapat ditugaskan di konstruktor dan hanya ada di satu tempat.

Konstanta dapat dideklarasikan di luar kelas dan digunakan di dalam kelas Anda. Kalau tidak, getproperti adalah solusi yang bagus

const MY_CONSTANT: string = "wazzup";

export class MyClass {

    public myFunction() {

        alert(MY_CONSTANT);
    }
}

Anda bisa menandai properti dengan readonlypengubah dalam deklarasi Anda:

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

@lihat buku menyelam Deep TypeScript - Readonly

Angular 2 Menyediakan fitur yang sangat bagus yang disebut Konstanta Buram. Buat kelas & Tentukan semua konstanta di sana menggunakan konstanta buram.

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

Suntikkan di penyedia di app.module.ts

Anda akan dapat menggunakannya di setiap komponen.

EDIT untuk Angular 4:

Untuk Angular 4 konsep baru adalah Token Injeksi & Token Tidak Berlaku dalam Angular 4.

Injeksi Token Menambahkan fungsi di atas Token Buram, memungkinkan untuk melampirkan info jenis pada token melalui generik TypeScript, ditambah token Injeksi, menghilangkan kebutuhan menambahkan @Inject

Kode Contoh

Sudut 2 Menggunakan Token Buram

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

Sudut 4 Menggunakan Token Injeksi

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

Token injeksi dirancang secara logis di atas Token buram & Token buram tidak digunakan lagi dalam Angular 4.

Baik menggunakan pengubah readOnly dengan konstanta yang harus dideklarasikan atau orang mungkin mendeklarasikan konstanta di luar kelas dan menggunakannya secara khusus hanya di kelas yang diperlukan menggunakan operator get.

Untuk ini, Anda dapat menggunakan readonlypengubah. Properti objek yang readonlyhanya dapat ditugaskan selama inisialisasi objek.

Contoh di kelas:

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.

Contoh dalam Objek literal:

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

Perlu juga diketahui bahwa readonlymodifikator adalah murni sebuah konstruksi naskah dan ketika TS dikompilasi ke JS, konstruksi tersebut tidak akan ada dalam JS yang dikompilasi. Ketika kita memodifikasi properti yang hanya dibaca, kompiler TS akan memperingatkan kita tentang hal itu (ini adalah JS yang valid).

Bagi saya tidak ada jawaban sebelumnya yang berfungsi. Saya memang perlu mengubah kelas statis saya menjadi enum. Seperti ini:

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

Kemudian di komponen saya, saya menambahkan properti baru seperti yang disarankan dalam jawaban lain

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

Kemudian dalam template komponen saya, saya menggunakannya dengan cara ini

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

EDIT: Maaf. Masalah saya berbeda dari OP. Saya masih meninggalkan ini di sini jika seseorang memiliki masalah yang sama dengan saya.