TypeScript의 public static const
TypeScript에는 public static constant라는 것이 있습니까?다음과 같은 클래스가 있습니다.
export class Library {
public static BOOK_SHELF_NONE: string = "None";
public static BOOK_SHELF_FULL: string = "Full";
}
그 수업에서 나는 할 수 있다.Library.BOOK_SHELF_NONE
TSC는 불평하지 않습니다.그러나 다른 곳에서 Library 클래스를 사용하려고 하면 동일한 작업을 수행하려고 하면 라이브러리가 인식되지 않습니다.
최신 브라우저의 정적 상수 값에 가까운 값을 원하는 경우(다른 코드로 변경할 수 없음)get
에 대한 유일한 접근자Library
class (이것은 ES5+ 브라우저와 노드에서만 기능합니다.JS):
export class Library {
public static get BOOK_SHELF_NONE():string { return "None"; }
public static get BOOK_SHELF_FULL():string { return "Full"; }
}
var x = Library.BOOK_SHELF_NONE;
console.log(x);
Library.BOOK_SHELF_NONE = "Not Full";
x = Library.BOOK_SHELF_NONE;
console.log(x);
실행해 보면, 이 설정을 실시하려고 하는 것을 알 수 있습니다.BOOK_SHELF_NONE
속성이 새 값으로 작동하지 않습니다.
2.0
TypeScript 2.0에서는readonly
매우 유사한 결과를 얻을 수 있습니다.
export class Library {
public static readonly BOOK_SHELF_NONE = "None";
public static readonly BOOK_SHELF_FULL = "Full";
}
구문은 조금 더 간단하고 명확합니다.단, 컴파일러는 실행 시간보다 변경을 방지합니다(첫 번째 예에서는 설명한 바와 같이 변경이 전혀 허용되지 않습니다).
다음과 같이 네임스페이스를 사용하여 수행할 수 있습니다.
export namespace Library {
export const BOOK_SHELF_NONE: string = 'NONE';
}
그런 다음 다른 위치에서 가져올 수 있습니다.
import {Library} from './Library';
console.log(Library.BOOK_SHELF_NONE);
클래스가 필요한 경우 네임스페이스 내에 클래스를 포함할 수도 있습니다.export class Book {...}
(TS Playground를 통해) 이 TS 스니펫의 내용은 다음과 같습니다.
define(["require", "exports"], function(require, exports) {
var Library = (function () {
function Library() {
}
Library.BOOK_SHELF_NONE = "None";
Library.BOOK_SHELF_FULL = "Full";
return Library;
})();
exports.Library = Library;
});
보시는 바와 같이 두 속성은 다음과 같이 정의됩니다.public static
는 단순히 내보낸 기능에 (속성으로) 첨부되어 있기 때문에 함수 자체에 올바르게 액세스만 하면 액세스 할 수 있습니다.
한편, 이것은 데코레이터와 조합하여 해결할 수 있습니다.Object.freeze
또는Object.defineProperty
저는 이걸 쓰고 있어요.게터를 많이 쓰는 것보다 조금 더 예뻐요.TS Playground를 직접 복사/붙여넣어 실제 동작을 확인할 수 있습니다.- 두 가지 옵션이 있습니다.
개별 필드를 "최종"으로 설정합니다.
다음 데코레이터는 주석이 달린 정적 필드와 비정적 필드를 모두 "getter-only-properties"로 변환합니다.
주의: 초기값이 없는 인스턴스 변수에 주석이 붙어 있는 경우@final
그러면 처음 할당된 값이 마지막 값이 됩니다.
// example
class MyClass {
@final
public finalProp: string = "You shall not change me!";
@final
public static FINAL_FIELD: number = 75;
public static NON_FINAL: string = "I am not final."
}
var myInstance: MyClass = new MyClass();
myInstance.finalProp = "Was I changed?";
MyClass.FINAL_FIELD = 123;
MyClass.NON_FINAL = "I was changed.";
console.log(myInstance.finalProp); // => You shall not change me!
console.log(MyClass.FINAL_FIELD); // => 75
console.log(MyClass.NON_FINAL); // => I was changed.
The Decorator: 코드에 반드시 포함시키세요!
/**
* Turns static and non-static fields into getter-only, and therefor renders them "final".
* To use simply annotate the static or non-static field with: @final
*/
function final(target: any, propertyKey: string) {
const value: any = target[propertyKey];
// if it currently has no value, then wait for the first setter-call
// usually the case with non-static fields
if (!value) {
Object.defineProperty(target, propertyKey, {
set: function (value: any) {
Object.defineProperty(this, propertyKey, {
get: function () {
return value;
},
enumerable: true,
configurable: false
});
},
enumerable: true,
configurable: true
});
} else { // else, set it immediatly
Object.defineProperty(target, propertyKey, {
get: function () {
return value;
},
enumerable: true
});
}
}
위의 데코레이터에 대한 대안으로, 엄격한 버전의 데코레이터도 있습니다.이 경우 누군가가 필드에 값을 할당하려고 할 때 에러가 발생합니다."use strict";
설정되어 있습니다.(이것은 정적 부분일 뿐입니다)
/**
* Turns static fields into getter-only, and therefor renders them "final".
* Also throws an error in strict mode if the value is tried to be touched.
* To use simply annotate the static field with: @strictFinal
*/
function strictFinal(target: any, propertyKey: string) {
Object.defineProperty(target, propertyKey, {
value: target[propertyKey],
writable: false,
enumerable: true
});
}
모든 정적 필드를 "최종"으로 설정합니다.
생각할 수 있는 단점:이 기능은 해당 클래스의 모든 통계 정보 또는 없음 통계 정보에만 사용할 수 있으며 특정 통계 정보에는 적용할 수 없습니다.
/**
* Freezes the annotated class, making every static 'final'.
* Usage:
* @StaticsFinal
* class MyClass {
* public static SOME_STATIC: string = "SOME_STATIC";
* //...
* }
*/
function StaticsFinal(target: any) {
Object.freeze(target);
}
// Usage here
@StaticsFinal
class FreezeMe {
public static FROZEN_STATIC: string = "I am frozen";
}
class EditMyStuff {
public static NON_FROZEN_STATIC: string = "I am frozen";
}
// Test here
FreezeMe.FROZEN_STATIC = "I am not frozen.";
EditMyStuff.NON_FROZEN_STATIC = "I am not frozen.";
console.log(FreezeMe.FROZEN_STATIC); // => "I am frozen."
console.log(EditMyStuff.NON_FROZEN_STATIC); // => "I am not frozen."
감사합니다.WiredPrairie!
답변을 조금 더 자세히 설명하면 상수 클래스를 정의하는 전체 예를 보여 줍니다.
// CYConstants.ts
class CYConstants {
public static get NOT_FOUND(): number { return -1; }
public static get EMPTY_STRING(): string { return ""; }
}
export = CYConstants;
사용방법
// main.ts
import CYConstants = require("./CYConstants");
console.log(CYConstants.NOT_FOUND); // Prints -1
console.log(CYConstants.EMPTY_STRING); // Prints "" (Nothing!)
다음의 솔루션은, TS 1.7.5 로도 동작합니다.
// Constancts.ts
export const kNotFoundInArray = -1;
export const AppConnectionError = new Error("The application was unable to connect!");
export const ReallySafeExtensions = ["exe", "virus", "1337h4x"];
사용 방법:
// Main.ts
import {ReallySafeExtensions, kNotFoundInArray} from "./Constants";
if (ReallySafeExtensions.indexOf("png") === kNotFoundInArray) {
console.log("PNG's are really unsafe!!!");
}
getter를 사용하면 속성이 읽기 전용이 됩니다.예:
export class MyClass {
private _LEVELS = {
level1: "level1",
level2: "level2",
level2: "level2"
};
public get STATUSES() {
return this._LEVELS;
}
}
다른 클래스에서 사용:
import { MyClass } from "myclasspath";
class AnotherClass {
private myClass = new MyClass();
tryLevel() {
console.log(this.myClass.STATUSES.level1);
}
}
클래스에서 단순히 '내보내기' 변수와 '가져오기'만 하면 됩니다.
export var GOOGLE_API_URL = 'https://www.googleapis.com/admin/directory/v1';
// default err string message
export var errStringMsg = 'Something went wrong';
이제 그것을 다음과 같이 사용하세요.
import appConstants = require('../core/AppSettings');
console.log(appConstants.errStringMsg);
console.log(appConstants.GOOGLE_API_URL);
언급URL : https://stackoverflow.com/questions/22991968/public-static-const-in-typescript
'programing' 카테고리의 다른 글
React에서 JQuery를 사용하는 방법JS (0) | 2023.04.05 |
---|---|
단순 ng-repeat용 단방향 바인딩? (0) | 2023.04.05 |
React 컴포넌트에서 Markdown을 렌더링하려면 어떻게 해야 합니까? (0) | 2023.04.05 |
콜백 함수에서 jQuery Ajax 요청 URL에 액세스하다 (0) | 2023.04.05 |
루트 네브링크는 항상 액티브클래스 React Router Domain을 가져옵니다. (0) | 2023.04.05 |