4

I currently have the following interfaces defined in a project

interface foo {
  fooProperty: number;
  fooFunction(): void;
}

interface bar extends foo {
  barProperty: string;
  barFunction(): void;
}

Now I want to define a class like

class myBar implements bar {
  public barProperty: string ="bar";
  public barFunction() {
    // do dosmething
  }
}

However I don't want to have to implement foo's functions and properties too, as these are already defined in an existing JS class which the interfaces define.

Essentially what I'm trying to do is create a typescript class that is extended from a 3rd party JS library for which I have "d.ts" files that describe the implementation, but which is NOT in typescript in it's source form.

In order to use a particular function in the 3rd party library, I have to create a custom class that derives from a class they provide in JS, but which I then override using "prototype", however I need to do this using typescript.

Update 1

It seems that folks reading this are not quite getting what I'm trying to achieve here, so let me elaborate a bit more.

In the project I'm working on we use a 3rd party JS lib, lets call this "thirdLib.js"

Within "thirdLib.js" there is functionality, that in order to use it, requires me to extend a JS style class provided as part of "thirdLib.js" like so:

function myClass(){
  thirdlib.thirdclass.call(this);
}

thirdLib.utilities.extendclass(myClass, thirdLib.thirdClass);

myClass.prototype.overriddenFunc = function(){
  // Do custom function here
}

The "extendClass" method in "thirdlib" copys the constructor of the class I'm deriving from into my constructor or so I'm lead to believe.

Which is then used later on, elsewhere in "thirdlib.js" EG:

var myStuff = new thirdLib();
var theClass = new myClass();

myStuff.registerSomething(theClass);
myStuff.doAThing();

At the point where I call "doAThing", thirdLib.js has the new JS class registered with it, and that class has ALL the original functionality as present in "thirdClass" but with MY customisations added to it.

All I have for "thirdLib.js" is the JavaScript code (Minified) and a set of Typescript definition files (Which I've written myself, as none where provided with the lib), and I need to be able to create "myClass()" using normal Typescript functionality, while still extending and consuming everything that's in the original JS class, and while being able to add my functionality to the TS class and have that override the functionality in the base JS class when I do.

Update April 2022

For those who are wondering, about 6 months after my last comment I moved on from the company I was doing this project for, and so I never got to see it through to a resolution, since I don't have the code or access to it anymore, I doubt very much it will ever be resolved. For those who are interested, the "Custom Drawing Handler" I was trying to implement, was a custom drawing class for a (Then Commercial, now it's OSS) 3rd party JS library called "MXGraph"

shawty
  • 5,729
  • 2
  • 37
  • 71
  • [Is this SO answer](http://stackoverflow.com/questions/14000645/how-to-extend-native-javascript-array-in-typescript) related to your question? – A1rPun Mar 07 '16 at 11:05
  • Funny enough, I just found that jqfaq post after I posted this on SO, and am currently playing with the ideas in it to see if I get anywhere. The problem is similar but not quite identical, as that SO post and proposed solutions all seem to revolve around extending built in types, which never seems to work when trying to apply them to 3rd party JS libs. – shawty Mar 07 '16 at 11:27

1 Answers1

0

If I got your problem right you could just have your class myBar extend the class myFoo, hence inheriting the given implementation and fulfilling the criteria defined in the interface.

Aides
  • 3,643
  • 5
  • 23
  • 39
  • The problem is, "myFoo" doesn't exist. the TS interface for "foo" is a "d.ts" file describing a concrete implementation that exists already in "foo.js". Because "foo" is defined in JS I can't extend "foo" in a typescript class. – shawty Mar 07 '16 at 12:01
  • It's not just about extending the definition though, I have to create a concrete implementation of the new definition, and then fill in certain procs to override. I'll update my question a bit see if that helps. – shawty Mar 07 '16 at 13:38
  • Okay, so you kind of want to "inject" your custom code into the predefined JS lib function which is then executed on the lib function call, right? – Aides Mar 07 '16 at 14:20
  • Kind of yes. The library I'm using has the ability to draw shapes, and it has a number of predefined shapes, however to draw a custom shape, I extend one of their existing shapes, add my own "Draw Handler" to that extended class, then use said extended class instead of using one of their built in shapes. So basically, all I need to change in this case is the "redraw" function, but the rest has to stay the same. in future though I may also want to add other customisations, such as properties that are only applicable to my drawing function. – shawty Mar 07 '16 at 15:08
  • Could you create a fiddle with the basic structure so I can try different options? – Aides Mar 07 '16 at 15:55
  • JS fiddle or TS fiddle? (Is there a TS fiddle?) --- Actually scrap that idea, it's probably best (Because of the mixed language stuff) if I put together a quick and dirty example on my github page. Which I'll do later once I leave the office. – shawty Mar 07 '16 at 16:08
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/105644/discussion-between-aides-and-shawty). – Aides Mar 08 '16 at 08:20
  • Can't at the moment Aides, not while I'm in the office. And sorry I get delayed getting back last night. Can't do chat/discussion until after 6pm my time (Currently GMT+0) – shawty Mar 08 '16 at 09:30
  • Sorry no, I got re-assigned to deal with something else. This still is a bit of work that will need to be addressed in our project though, but alas, you know what it's like working in the software enterprise :-) I will get re-assigned to it again in the near future, and I will continue to do my own research into it outside the office. – shawty Mar 12 '16 at 12:32
  • Ok, just post here if there is any way I can help you with (your problem sounds really interesting) ^^ – Aides Mar 12 '16 at 13:20
  • Will do, it's actually something I had a crack at in a previous project too, but didn't get chance to follow up, this time though it will have to be done.... but, when the bosses deem it's important. – shawty Mar 12 '16 at 22:43
  • For those who are wondering, about 6 months after my last comment I moved on from the company I was doing this project for, and so I never got to see it through to a resolution, since I don't have the code or access to it anymore, I doubt very much it will ever be resolved. For those who are interested, the "Custom Drawing Handler" I was trying to implement, was a custom drawing class for a (Then Commercial, now it's OSS) 3rd party JS library called "MXGraph" – shawty Apr 11 '22 at 15:19