How to implement Typescript Construct Signature?

Question

I want to create a function that can be invoked with the new keyword. However, none of my implementation works and Typescript keeps showing me errors.

Below is my code. You can see it on the Typescript Playground too

type Account = {
  username: string
  password: string
}

type AccountConstructor = {
  new (username: string, password: string): Account
  (username: string, password: string): Account
}

// const Account: AccountConstructor = function (username: string, password: string) {
//   return {username, password}
// }

// Type '(username: string, password: string) => { username: string; password: string; }' is not assignable to type 'AccountConstructor'.
// Type '(username: string, password: string) => { username: string; password: string; }' provides no match for the signature 'new (username: string, password: string): Account'.
const Account: AccountConstructor = function(username: string, password: string) {
  return {
    username,
    password
  }
}

// Type 'typeof Account' is not assignable to type 'AccountConstructor'.
// Type 'typeof Account' provides no match for the signature '(username: string, password: string): Account'.
const Account: AccountConstructor = class {
  constructor(public username: string, public password: string) {}
}

new Account('username', 'password')

How to implement the Construct Signature correctly that the function could be invoked using the new keyword?

How is the class approach not working? could you elaborate what error do you see when doing " new AccountClass ('username', 'password') " ? also i can't see you doing that in the code above. — root
– root, Commented Oct 16, 2022 at 4:56
@root My mistake. The AccountClass class is created just to test if the normal class works fine. It does not relate to the question. I have updated the code, so we can focus on the errors thrown by the Construct Signature, which is the AccountConstructor type — Ngọc Nguyễn
– Ngọc Nguyễn, Commented Oct 16, 2022 at 6:53
@kaya3 class Account { ... } is okay but I want to use the new keyword to invoke a function just like I can do with JavaScript. I discovered construct signature, but don't know how to use it. The official doc doesn't show how to implement it too. — Ngọc Nguyễn
– Ngọc Nguyễn, Commented Oct 16, 2022 at 6:56
The official documentation doesn't show how to do it because you aren't supposed to do it - that is the old way of creating "classes", from before Javascript had the class syntax. — kaya3
– kaya3, Commented Oct 16, 2022 at 6:57

kaya3 · Accepted Answer · 2022-10-16 07:26:42Z

In Typescript code you should write classes, not constructor functions; constructor functions are the old way of implementing "classes" in Javascript, from before the class syntax was added. This pattern may still be used in older libraries, or libraries compiled to ES5 or earlier for compatibility purposes. (If you need this compatibility, set your target to ES5, and your Typescript class declarations will be automatically converted when you compile.)

Constructor signatures are primarily meant to be used when defining types in a .d.ts file for a library that is not written in Typescript. However, you can also use them for passing classes around like this:

type Foo = {x: string}

type FooConstructor = new (x: string) => Foo

class FooClass {
    constructor(public x: string) {}
}

const fooConstructor: FooConstructor = FooClass;

Playground Link

The difference between this and your example using a class, is that your interface requires both a construct signature and a call signature, but classes do not have call signatures.

Collectives™ on Stack Overflow

How to implement Typescript Construct Signature?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related