javascript - AngularJS vrijednost u TypeScriptu

Želim pretvoriti AngularJS Value u TypeScript.

Kako to mogu postići?

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'
});

Pokušao sam stvoriti klasu u TypeScriptu i inicijalizirati tu klasu u definiciji modula, ali nisam uspio s tim pristupom.

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());

Je li moguće definirati vrijednosti pomoću TypeScripta? Ili možda nešto propuštam

Odgovor #1

Što se događa kada koristite sljedeći 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());

Jednom sam imao problem kada sam koristio gettere i settere umjesto normalnih svojstava. To je samo slutnja.

Odgovor #2

Kasnimo na zabavu, ali ako biste željeli izravno pretvoriti JS kod u TypeScript, klasa nije potrebna. Kao alternativa, možete učiniti ovo:

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);

Imajte na umu da u ovom slučaju trebate izostaviti poziv new prilikom registriranja vrijednosti u AngularJS-u, umjesto toga jednostavno koristite izvezeni objektni literal izravno.

Deklaracija interface je potrebna ako želite imati definiciju tipa za svoju AngularJS vrijednost, inače se može izostaviti (u tom bi slučaju konstanta za izvoz bila export const cgBusyDefaults: any={ ... }).

Rješenje s klasom ima prednost što vam implicitno pruža informacije o tipu, ali imati klasu s konstruktorom za stvar koja je namijenjena da bude jedinstvena vrijednost meni izgleda kao nesklad, posebno kada JS/TS imaju koncept objektnog literala koji savršeno odgovara vrijednostima u AngularJS-u.