TypeScript and inheritance

Question

I need a little help with TypeScript. How to do ~~extension methods~~ inheritance?

Lets say we have a class named MyClass with only one method Method1():

class MyClass {
   constructor () { }

   public Method1(): void {
   }
}

Now I want to make a sub class that adds a new method named Method2():

class MyClassExtension {
   public Method2(): void {
   }
}

When I have interfaces I can do this by declaring a new interface with the same name:

interface MyInterface {
   Method1(): void;
}

interface MyInterface {
   Method2(): void;
}

var x: MyInterface;
x.Method1(); // ok
x.Method2(); // ok

But I don't know how to do this for classes:/ Can any1 help me, please?

Thanks in advance!!!

typescript doesn't have "Extension methods" - you're confusing it with c#. — x0n
– x0n, Commented Dec 7, 2012 at 16:09

JohnnyHK · Accepted Answer · 2012-12-07 16:24:45Z

10

This is standard class inheritance, so you can do it like this:

class MyClassExtension extends MyClass {
   public Method2(): void {
   }
}

In your interface example, you're not declaring a new interface with the same name, you're splitting the MyInterface definition across two partial definitions. Interface definitions are open-ended but classes are not.

edited Dec 7, 2012 at 16:24

answered Dec 7, 2012 at 16:04

JohnnyHK

313k70 gold badges631 silver badges479 bronze badges

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

3 Comments

Jude Fisher Over a year ago

Worth noting that this also works for interfaces, and is a clearer way (IMO) of expressing interface inheritance.

Nickon Over a year ago

I wrote my post a little bad:S What I want? I have JQuery lib in TS. Now I want to add some extension methods into JQuery and JQueryStatic objects. And I want them to be available after . (dot): $.myNewExtensionMethod().

Tristan Warner-Smith Over a year ago

JQuery is only exposed as an interface, you can only extend other classes so you'd have to use @stopyoukid's option in that case.

stopyoukid · Accepted Answer · 2012-12-10 16:58:21Z

Based on your response to JohnnyHK's answer, can you do something like the following?

If your existing jquery.d.ts looks something like this:

interface JQuery {
    //...OTHER MEMBERS IN JQUERY
    addClass(classNames: string): JQuery;
    addClass(func: (index: any, currentClass: any) => JQuery);

    attr(attributeName: string): string;
    attr(attributeName: string, value: any): JQuery;
    //...OTHER MEMBERS IN JQUERY
}

interface JQueryStatic {
    //...OTHER MEMBERS IN JQUERY
    parent(selector?: string): JQuery;

    parents(selector?: string): JQuery;

    parentsUntil(selector?: string, filter?: string): JQuery;
    parentsUntil(element?: Element, filter?: string): JQuery;
    //...OTHER MEMBERS IN JQUERY
}


declare var jQuery: JQueryStatic;
declare var $: JQueryStatic;

Then all you would need to do in your code somewhere is define your extension methods, for example:

file1.ts

///<reference path='jquery.d.ts'/>
interface JQuery {
    myNewExtensionMethod() : string;
}
interface JQueryStatic {
    myNewExtensionMethod() : string;
}

jQuery.myNewExtensionMethod = () => {
    return "11";
}

$.myNewExtensionMethod = () => {
    return "11";
}

And then use them:

file2.ts

///<reference path='file1.ts'/>
var result = $.myNewExtensionMethod();

Collectives™ on Stack Overflow

TypeScript and inheritance

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related