Làm thế nào để thực hiện các hằng lớp trong bản thảo?

Trong TypeScript, consttừ khóa không thể được sử dụng để khai báo các thuộc tính lớp. Làm như vậy sẽ khiến trình biên dịch bị lỗi với "Một thành viên lớp không thể có từ khóa 'const'."

Tôi thấy mình cần phải ghi rõ trong mã rằng một tài sản không nên thay đổi. Tôi muốn IDE hoặc trình biên dịch bị lỗi nếu tôi cố gán giá trị mới cho thuộc tính một khi nó đã được khai báo. Làm thế nào để các bạn đạt được điều này?

Tôi hiện đang sử dụng một thuộc tính chỉ đọc, nhưng tôi chưa quen với Bản mô tả (và JavaScript) và tự hỏi liệu có cách nào tốt hơn không:

get MY_CONSTANT():number {return 10};

Tôi đang sử dụng bản in 1.8. Gợi ý?

Tái bút: Hiện tại tôi đang sử dụng bản thảo 2.0.3, vì vậy tôi đã chấp nhận câu trả lời của David

TypeScript 2.0 có công cụ readonlysửa đổi :

class MyClass {
    readonly myReadOnlyProperty = 1;

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

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

Nó không chính xác là một hằng số vì nó cho phép gán trong hàm tạo, nhưng rất có thể đó không phải là vấn đề lớn.

Giải pháp thay thế

Một cách khác là sử dụng statictừ khóa với 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

Điều này có lợi ích là không được gán trong hàm tạo và chỉ tồn tại ở một nơi.

Các hằng số có thể được khai báo bên ngoài các lớp và sử dụng trong lớp của bạn. Nếu không, gettài sản là một cách giải quyết tốt đẹp

const MY_CONSTANT: string = "wazzup";

export class MyClass {

    public myFunction() {

        alert(MY_CONSTANT);
    }
}

Bạn có thể đánh dấu các thuộc tính bằng công cụ readonlysửa đổi trong khai báo của bạn:

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

@see TypeScript Deep Dive book - Chỉ đọc

Angular 2 Cung cấp một tính năng rất hay được gọi là Hằng số mờ. Tạo một lớp & Xác định tất cả các hằng số ở đó bằng cách sử dụng các hằng số mờ.

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

Tiêm nó trong các nhà cung cấp trong app.module.ts

Bạn sẽ có thể sử dụng nó trên tất cả các thành phần.

EDIT cho góc 4:

Đối với Angular 4, khái niệm mới là Token Token & Mã thông báo mờ không được dùng trong Angular 4.

Mã thông báo tiêm Thêm các chức năng trên đầu trang của Mã thông báo mờ, nó cho phép đính kèm thông tin loại trên mã thông qua các tổng quát của TypeScript, cộng với mã thông báo Tiêm, loại bỏ nhu cầu thêm @Inject

Mã ví dụ

Angular 2 Sử dụng Token Opaque

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 Sử dụng Token tiêm

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

Mã thông báo tiêm được thiết kế hợp lý trên đầu trang của mã thông báo Opaque & mã thông báo mờ được không dùng trong Angular 4.

Sử dụng công cụ sửa đổi readOnly với hằng số cần khai báo hoặc người ta có thể khai báo một hằng bên ngoài lớp và chỉ sử dụng cụ thể trong lớp được yêu cầu bằng toán tử get.

Đối với điều này, bạn có thể sử dụng công cụ readonlysửa đổi. Các thuộc tính đối tượng readonlychỉ có thể được gán trong quá trình khởi tạo đối tượng.

Ví dụ trong các lớp học:

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.

Ví dụ trong các đối tượng bằng chữ:

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

Cũng đáng để biết rằng công cụ readonlysửa đổi hoàn toàn là một cấu trúc bản thảo và khi TS được biên dịch thành JS, cấu trúc đó sẽ không xuất hiện trong JS được biên dịch. Khi chúng tôi sửa đổi các thuộc tính chỉ đọc, trình biên dịch TS sẽ cảnh báo chúng tôi về nó (đó là JS hợp lệ).

Đối với tôi không có câu trả lời trước đó hoạt động. Tôi đã cần phải chuyển đổi lớp tĩnh của tôi thành enum. Như thế này:

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

Sau đó, trong thành phần của tôi, tôi thêm thuộc tính mới như được đề xuất trong các câu trả lời khác

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

Sau đó, trong mẫu thành phần của tôi, tôi sử dụng nó theo cách này

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

EDIT: Xin lỗi. Vấn đề của tôi khác với OP. Tôi vẫn để điều này ở đây nếu ai đó có vấn đề tương tự như tôi.