javascript - TypeScriptでのAngularJSのValue

私はAngularJSのValueをTypeScriptに変換したいです。

それをどうやって達成できますか？

AngularJS

angular.module('your_app').value('cgBusyDefaults',{
    message:'Loading Stuff',
    backdrop: false,
    templateUrl: 'my_custom_template.html',
    delay: 300,
    minDuration: 700,
    wrapperClass: 'my-class my-class2'
});

TypeScriptでクラスを作成し、そのクラスをモジュールの定義内で初期化しようとしましたが、その方法ではうまくいきませんでした。

TypeScript

export class CgBusyDefaults {

    private _message: string;
    private _backdrop: boolean;
    private _templateUrl: string;
    private _delay: number;
    private _minDuration: number;
    private _wrapperClass: string;

    constructor() {
        this._message = 'Loading Stuff';
        this._backdrop = true;
        this._templateUrl = 'app/administration/partials/administration-busy.html';
        this._delay = 300;
        this._minDuration = 700;
        this._wrapperClass = 'dv-busy';
    }

    get wrapperClass(): string {
        return this._wrapperClass;
    }

    set wrapperClass(value: string) {
        this._wrapperClass = value;
    }

    get minDuration(): number {
        return this._minDuration;
    }

    set minDuration(value: number) {
        this._minDuration = value;
    }

    get delay(): number {
        return this._delay;
    }

    set delay(value: number) {
        this._delay = value;
    }

    get templateUrl(): string {
        return this._templateUrl;
    }

    set templateUrl(value: string) {
        this._templateUrl = value;
    }

    get backdrop(): boolean {
        return this._backdrop;
    }

    set backdrop(value: boolean) {
        this._backdrop = value;
    }

    get message(): string {
        return this._message;
    }

    set message(value: string) {
        this._message = value;
    }

}

angular.module('your_app').value('cgBusyDefaults', new CgBusyDefaults());

TypeScriptで値を定義することは可能ですか？それとも、私が何かを見落としているだけでしょうか

回答 #1

次のTypeScriptを使用すると何が起こりますか？

export class CgBusyDefaults {

    public message: string;
    public backdrop: boolean;
    public templateUrl: string;
    public delay: number;
    public minDuration: number;
    public wrapperClass: string;

    constructor() {
        this.message = 'Loading Stuff';
        this.backdrop = true;
        this.templateUrl = 'app/administration/partials/administration-busy.html';
        this.delay = 300;
        this.minDuration = 700;
        this.wrapperClass = 'dv-busy';
    }
}

angular.module('your_app').value('cgBusyDefaults', new CgBusyDefaults());

私は一度、通常のプロパティの代わりにゲッターとセッターを使ったときに問題がありました。ただの直感です。

回答 #2

遅ればせながらですが、もしJSコードを直接TypeScriptに変換したい場合、クラスは必要ありません。代わりに、次のようにすることができます：

export interface CgBusyDefaults {
    message: string;
    backdrop: boolean;
    templateUrl: string;
    delay: number;
    minDuration: number;
    wrapperClass: string;
}

export const cgBusyDefaults: CgBusyDefaults = {
    message:'Loading Stuff',
    backdrop: false,
    templateUrl: 'my_custom_template.html',
    delay: 300,
    minDuration: 700,
    wrapperClass: 'my-class my-class2'
};

angular.module('your_app').value('cgBusyDefaults', cgBusyDefaults);

この場合、AngularJS に値を登録する際に new 呼び出しを省略する必要があることに注意してください。その代わりに、エクスポートされたオブジェクトリテラルを直接使用します。

interface 宣言は、AngularJS の値の型定義を持ちたい場合に必要です。そうでなければ、省略可能です（この場合、const のエクスポートは export const cgBusyDefaults: any={ ... } となります）。

クラスのソリューションは、タイプ情報を暗黙的に提供してくれるという利点がありますが、シングルトンの値として意図されたもののためのコンストラクタを持つクラスは、JS/TSがAngularJSの値と完全に一致するオブジェクトリテラルの概念を持っていることを考えると、私には不一致に感じられます。