CODEWITHSUNDEEP
javascriptangularjstypescript
Tobias Timm
Tobias Timm

Reputation: 2050

AngularJS Value in TypeScript

I want to convert an AngularJS Value to TypeScript.

How can i achieve that?

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

I tried to create a Class with TypeScript and initialize that class in the definition of the module, but I wasn't successful with that approach.

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

Is it possible to define Values with TypeScript? Or maybe I'm just missing something

Upvotes: 2

Views: 671

Answers (2)

basti1302
basti1302

Reputation: 606

Late to the party, but if you would want to directly convert the JS code to TypeScript, the class is not necessary. As an alternative, you can do this:

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

Note that in this case you need to omit the new call in when registering the value with AngularJS, instead you simple use the exported object literal directly.

The interface declaration is necessary if you want to have a type definition for your AngularJS value, otherwise it can be omitted (the const export would be export const cgBusyDefaults: any = { ... } in this case).

The class solution has the benefit of providing you the with type information implicitly, but having a class with a constructor for a thing that is meant to be a singleton value feels like a mismatch to me when JS/TS have the concept of object literals that perfectly match AngularJS values.

Upvotes: 1

MartyIX
MartyIX

Reputation: 28648

What does happen when you use the following 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());

I had an issue once when I used getters&setters instead of normal properties. It's just a hunch.

Upvotes: 4

Related Questions