Extending functionality in TypeScript [duplicate]

Question

Possible Duplicate:
How does prototype extend on typescript?

I am currently learning TypeScript, and would like to know how it is possible to add functionality to existing objects. Say I want to add an implementation for Foo to the String object. In JavaScript I would do this:

String.prototype.Foo = function() {
    // DO THIS...
}

Understanding that TypeScript classes, interfaces and modules are open ended led me to try the following, without success

1. Reference the JavaScript implementation from TypeScript

    JavaScript:

    String.prototype.Foo = function() {
        // DO THIS...
    }

    TypeScript:

    var x = "Hello World";
    x.Foo(); //ERROR, Method does not exist

2. Extend the interface

interface String {
    Foo(): number;
}

var x = "Hello World";
x.Foo(); //Exists but no implementation.

3. Extend the class

class String {
    Foo(): number {
        return 0;
    }
}

// ERROR: Duplicate identifier 'String'

As you can see from these results, so far I have been able to add the method via an interface contract, but no implementation, so, how do I go about defining AND implementing my Foo method as part of the pre-existing String class?

Matthew Layton · Accepted Answer · 2015-02-05 14:01:15Z

77

I have found the solution. It takes a combination of the interface and the JavaScript implementation. The interface provides the contract for TypeScript, allowing visibility of the new method. The JavaScript implementation provides the code that will be executed when the method is called.

Example:

interface String {
    foo(): number;
}

String.prototype.foo= function() {
    return 0;
}

As of TypeScript 1.4 you can now also extend static members:

interface StringConstructor {
    bar(msg: string): void;
}

String.bar = function(msg: string) {
    console.log("Example of static extension: " + msg);
}

edited Feb 5, 2015 at 14:01

answered Dec 16, 2012 at 1:32

Matthew Layton

42.9k59 gold badges213 silver badges349 bronze badges

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

33 Comments

Oleg Mihailik Over a year ago

Exactly, that's how it is meant to be. Remember, TypeScript is not a language in itself, it is just a syntactic sugar. So writing something in 'JavaScript style' is a good practice that has no drawbacks whatsoever.

sebas2day Over a year ago

Does this solution really work with String? Because I'm doing the exact same thing and get compile errors that the property doesn't exist on the String type. What am I missing? (using tsc 1.4.1)

Alex Over a year ago

@OlegMihailik Aren't all langues just syntactic sugar?

Rami Chasygov Over a year ago

@series0ne, if copypast code above, [ts] Property 'foo' does not exist on type 'String'.

Z Smith Over a year ago

In case anyone else has the same problem I did: I used the code here, and found it worked. BUT, if I use it in a module (i.e. with an export statement) then I get the error [ts] Property 'foo' does not exist on type 'String'. (in both VS Code and the playground) . The fix is to make the interface global: declare global { interface String { foo(): number; } }.

|

Collectives™ on Stack Overflow

Extending functionality in TypeScript [duplicate]

1 Answer 1

33 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

33 Comments

Linked

Related