如何在打字稿中实现类常量？

在TypeScript中，const关键字不能用于声明类属性。这样做会导致编译器出现“ A类成员不能具有'const'关键字”的错误。

我发现自己需要在代码中明确指出不应更改属性。如果在声明属性后尝试为该属性分配新值，我希望IDE或编译器出错。你们如何实现这一目标？

我当前使用的是只读属性，但是我是Typescript（和JavaScript）的新手，想知道是否有更好的方法：

get MY_CONSTANT():number {return 10};

我正在使用打字稿1.8。有什么建议吗？

PS：我现在正在使用打字稿2.0.3，所以我已经接受了大卫的回答

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

这样的好处是不能在构造函数中分配，而只能存在于一个位置。

常量可以在类外部声明，也可以在类中使用。否则，该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;
}

@see TypeScript Deep Dive书-只读

Angular 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：

对于Angular 4，新概念是“注入令牌”和“不透明令牌”在Angular 4中已弃用。

注入令牌在不透明令牌的基础上添加功能，它允许通过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!
    ]
  }
]

注入令牌在逻辑上是在Opaque令牌之上设计的，而Angular 4中已弃用了Opaque令牌。

要么使用带有常量的readOnly修饰符，要么需要声明一个常量，或者可以在类外部声明一个常量，并仅使用get运算符仅在所需的类中使用它。

为此，您可以使用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）。

对我而言，先前的答案均无效。我确实需要将我的静态类转换为枚举。像这样：

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

然后在我的组件中，按照其他答案的建议添加新属性

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

然后在我组件的模板中以这种方式使用它

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

编辑：对不起。我的问题不同于OP的问题。如果还有其他问题，我仍然将其留在这里。