如何将 js 函数构造函数转换为打字稿？

Question

I'm moving from js to typescript and i have some challenges.

I need to convert a constructor function to the equivalent of typescript.

The function in js is like so:

export default function(address) {
  var self = this ;
  self.address = address;
  
  self.init = function(){
    //some code
  }

  self.onClick = function() {
   // some code
  }
}

---

I tried to convert it but it complains in this keyword. (missing anotation)

const Address: (address: string) => void = function (address: string) {
   this.address = address;
 }

Address.prototype.init = function() {
  // some code here
}

export default Address

and I'm planning to call it inside react component, from another file, like so: new (Address as any)( address_here ));

I'm having the issue with the this so I haven't checked if the prototype function works too.

Answer 1

You can create a class and add methods to it.

Note: All methods in TS Class goes to prototype and properties to object. You can even define a static method which is similar to adding method to function in ES5

export default class SetAddress {
  constructor( public readonly address: string ) {}

  public init(): void {}

  public onClick(event: HTMLEventAction): void {}
}

You can even test at TS PlayGround . You will have to set the target version to ES5

Answer 2

Well you can use class declaration syntax:

export default class Address{
    constructor({address}:Object){
       this.address : String = address;
    }

    init():void{ // or your type of return
      // some code
    }

    onClick():void{ // or your type of return
      // some code
    }
}