angulartypescriptprototype

Prototype extension doesn't work when Angular app is deployed


Since I have a C# backend, I thought of applying a C# principle to the Angular frontend, so I came up with this:

declare interface Date {
    addDays(days: number): Date;
    addYears(years: number): Date;
    isToday(): boolean;
    isSameDate(date: Date): boolean;
    customFormat(): string;
}

declare interface String {
    ToDate(): Date;
}

declare interface Array<T> {
    ToDate(): string[];
}

Array.prototype.ToDate = function (): string[] {
    return this.valueOf().map(timestamp => timestamp.ToDate());
};

String.prototype.ToDate = function (): Date {
    return new Date(this.valueOf());
};

Date.prototype.addDays = function (days: number): Date {
    if (!days) return this;
    let date = new Date(this.valueOf());
    date.setDate(date.getDate() + days);
    return date;
};

Date.prototype.addYears = function (years: number): Date {
    if (!years) return this;
    let date = new Date(this.valueOf());
    date.setFullYear(date.getFullYear() + years);
    return date;
};

Date.prototype.isToday = function (): boolean {
    let today = new Date();
    return this.isSameDate(today);
};

Date.prototype.isSameDate = function (date: Date): boolean {
    return date && this.getFullYear() === date.getFullYear() && this.getMonth() === date.getMonth() && this.getDate() === date.getDate();
};

Date.prototype.customFormat = function (): string {
    let date = new Date(this.valueOf());
    let yyyy = date.getFullYear();
    let mm = date.getMonth() + 1;
    let dd = date.getDate();
    return dd + "/" + mm + "/" + yyyy;
};

The idea being that I can do stuff like

let foo = new Date();
foo.addYears(10);

Which is basically how extensions work in C#. The problem is that these prototype extensions work during development, but it looks like they disappear once in production.

At some point I tried declaring everything as global like this:

export {};

declare global {
    interface Date {
        addDays(days: number): Date;
        addYears(years: number): Date;
        isToday(): boolean;
        isSameDate(date: Date): boolean;
        customFormat(): string;
    }
}

declare global {
    interface String {
        ToDate(): Date;
    }
}

declare global {
    interface Array<T> {
        ToDate(): string[];
    }
}

// etc

to no avail.

I also tried importing the file date.extensions.ts in index.html in a script tag, but it still wouldn't work.

I also looked at this, but I don't really know where I should use the import statement in the last step of the answer.

How do I make the extensions work as expected?


Solution

  • The answer was here. Creating a global.d.ts file was the solution.

    I should've checked better in the first place. Sorry in case the question wasn't clear

    Thank you Krenom for your answer