Add a method to an existing class in typescript?

Question

I am working in an angular 2 cli project in which I have to create a definition of a plugin, because it doesn't exists its typed. This plugin depends of a main library that has already its own typed and it works.

Anyway, I have two files the main one with

LIBRARY TYPES FILE A

export class A extends B {
    constructor(...);
    methodX(): void;
}

And I would need to add a new method for my plugin so my class would be like

export class A extends B {
        constructor(...);
        methodX(): void;
        methodY(): void;
    }

The point is that I need to add it in a separate file. The problem is adding a method to an existent class without creating a new one

If I put

PLUGIN TYPES FILE B

export class A extends B {
    constructor(...);
    methodX(): void;
}

or

PLUGIN TYPES FILE B

export class A extends B {
        constructor(...);
        methodX(): void;
        methodY(): void;
}

It doesn't work, does anyone how can I achieve overwriting a class or extending it with a new method that?

Thanks

Not sure from your question. It is not clear. Do you need Mixins? typescriptlang.org/docs/handbook/mixins.html — Amit
– Amit, Commented Mar 24, 2017 at 12:45
If you ask how "extending it", it is simple as class C extends A. But I think you mean "adding a new method without changing the class name". If that is right, please clarify your question. — Bünyamin Sarıgül
– Bünyamin Sarıgül, Commented Mar 24, 2017 at 12:47
@toskv because sometimes you want to extend capabilities of a commonly used class. For example, adding flatMap to Array if you're using NodeJS < 11 (ts-node is Node in version 8). — Jezor
– Jezor, Commented Mar 19, 2019 at 11:36

Serban Stokker · Accepted Answer · 2020-04-28 16:40:44Z

32

The "Declaration Merging > Module Augmentation" section from the TypeScript docs seems to offer the solution:

https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation

In your case, if class A is exported from file1.ts, and you want to add methodY() to that class within a different module file2.ts, then try this:

//// file1.ts
export class A extends B {
    constructor(...);
    methodX(): void;
}

//// file2.ts
import { A } from "./file1";
declare module "./file1" {
    interface A {
        methodY(): void;
    }
}
A.prototype.methodY = function() {}

answered Apr 28, 2020 at 16:40

Serban Stokker

4544 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Serban Stokker Over a year ago

Btw adding a new method to a class within the SAME file would have been done like so: class A {}; interface A { methodY(): void; }; A.prototype.methodY = function () {};

panzi Over a year ago

This is the one solution that actually worked! Thanks!

manroe Over a year ago

to add to the first comment, declare module './file1' still works inside of file1.ts You must do this for the compiler to understand your calls to methodY in other places. Read more here on Module Augmentation

toskv · Accepted Answer · 2017-03-24 12:51:22Z

19

You could do it by making an interface with the new method and modifying the prototype.

Something like this:

class B { }

class A extends B {
    constructor() {
        super();
    }
    methodX(): void { };
    methodY(): void { };
}


interface B {
    newMethod(): void;
}

B.prototype.newMethod = function () { console.log('a') };

This allows you do have proper typing when doing.

new A().newMethod();

I made a playground example here.

answered Mar 24, 2017 at 12:51

toskv

31.8k7 gold badges77 silver badges77 bronze badges

10 Comments

Bünyamin Sarıgül Over a year ago

Do you need to use an interface? I added the function to the class itself, and it worked.

toskv Over a year ago

I had to add it otherwise the interface of B doesn't change and it wouldn't let me change the prototype of B.

toskv Over a year ago

it might depend where you make the change. in your example you do it inside the class itself. I do it from the outside. I think the OP wasn't allowed to change the code. :)

toskv Over a year ago

nope, it's not that.. I think it's just plnkr not complaining about it. :) It might have something to do with in browser compiler.

Bünyamin Sarıgül Over a year ago

I didn't think he was asking to change interface B, but it makes sense to do it this way. My answer becomes unnecessary then, sorry for duplicate answer :)

|

Bünyamin Sarıgül · Accepted Answer · 2017-03-24 12:54:40Z

3

You can do it directly as A.prototype.functionName = function(){...}

Here is a plunker: http://plnkr.co/edit/6KrhTCLTHw9wjMTSI7NH?p=preview

answered Mar 24, 2017 at 12:54

Bünyamin Sarıgül

3,0914 gold badges35 silver badges57 bronze badges

1 Comment

lakam99 Over a year ago

This should be the accepted answer. I've found in VSCode with typescript it won't accept the 'A.prototype.functionName' notation but will accept 'A.prototype["functionName"]'.

Collectives™ on Stack Overflow

Add a method to an existing class in typescript?

3 Answers 3

3 Comments

10 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

10 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related