TypeScript에서는 const키워드를 사용하여 클래스 속성을 선언 할 수 없습니다. 이렇게하면 “클래스 멤버는 ‘const’키워드를 가질 수 없습니다.”라는 오류가 발생합니다.
코드에서 속성을 변경해서는 안된다는 것을 명확하게 표시해야합니다. 속성이 선언되면 속성에 새 값을 할당하려고하면 IDE 또는 컴파일러에서 오류가 발생하기를 원합니다. 너희들은 어떻게 이것을 달성합니까?
현재 읽기 전용 속성을 사용하고 있지만 Typescript (및 JavaScript)를 처음 사용하고 더 좋은 방법이 있는지 궁금합니다.
get MY_CONSTANT():number {return 10};typescript 1.8을 사용하고 있습니다. 제안?
추신 : 나는 지금 typescript 2.0.3을 사용하고 있으므로 David의 대답을 받아 들였습니다.
답변
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;
}답변
Angular 2 Opaque Constants라는 매우 멋진 기능을 제공합니다. 불투명 한 상수를 사용하여 클래스를 만들고 모든 상수를 정의하십시오.
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 토큰 위에 논리적으로 설계되었으며 Opaque 토큰은 Angular 4에서 더 이상 사용되지 않습니다.
답변
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와 다릅니다. someelse가 나와 같은 문제가있는 경우에도 여전히 여기에 둡니다.
