javascript to typescript: mix prototype based object with class based one

Question

i'm trying to mix javascript prototype with class based, like this:

function Cat(name) {
    this.name = name;
}
Cat.prototype.purr = function(){
    console.log(`${this.name} purr`);
}
Cat.prototype.meow = function(){
    console.log(`${this.name} meow`);
}


class Tiger extends Cat {
    constructor(name) {
        super(name);
    }

    meow() {
        console.log(`${this.name} roar`);
    }
}

the JS code above is valid. then I convert the code to typescript like this:

function Cat(this : any, name : string) {
    this.name = name;
}
Cat.prototype.purr = function(){
    console.log(`${this.name} purr`);
}
Cat.prototype.meow = function(){
    console.log(`${this.name} meow`);
}


// error: Type '(this: any, name: string) => void' is not a constructor function type.
class Tiger extends Cat {
    constructor(name : string) {
        super(name);
    }

    meow() {
        console.log(`${this.name} roar`);
    }
}

the class Tiger doesn't accept the class Cat as its base class. (valid in JS but not in TS). I cannot change the Cat to standard class syntax because I need the .prototype access to be pointed to another JS library.

anyone can fix the TS code above? maybe add some .d.ts definition.

Note: adding // @ts-ignore works but I cannot do that because the VS-code intellisense will not work.

"I cannot change the Cat to standard class syntax because I need the .prototype access to be pointed to another JS library." - class syntax uses prototype objects in exactly the same way. Please be more specific about that constraint - you really should use class Cat { … } in TypeScript. — Bergi
– Bergi, Commented Nov 21, 2020 at 22:50

jabuj · Accepted Answer · 2020-11-21 21:55:55Z

2

Well, you could attempt to do something like this

interface CatClass {
  name: string
  purr(): void
  meow(): void

  new (name: string): CatClass
}

const Cat = function(this: CatClass, name: string) {
  this.name = name
} as unknown as CatClass
// Then add functions to prototype and everything should be fine

The question is why you are doing this in the first place, why not rewriting it as a normal class? There doesn't seem to be any info about how to type such function classes without this as unknown as CatClass thing (which seems like a little hack but well), maybe because no one has ever needed to do this, which I understand. Anyway after transpilation all classes become functions

answered Nov 21, 2020 at 21:55

jabuj

3,7571 gold badge18 silver badges45 bronze badges

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

1 Comment

Heyyy Marco Over a year ago

well, actually i'm trying to make a jquery wrapper class. I need to doing JqueryWrapper.prototype = $.prototype . doing like this: class JqueryWrapper extends $ wouldn't work

Collectives™ on Stack Overflow

javascript to typescript: mix prototype based object with class based one

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related