What is the best way to design an interface in TypeScript that accepts a class as a parameter, rather than an instance of the class?

Question

What is the best way to design an interface in TypeScript that accepts a class as a parameter, rather than an instance of the class?

I am looking to develop an interface that can receive an actual class instead of an instance of the class. Here is a sample code snippet:

class CheckIfGoNextPage{
  localResult;
  next;
  constructor(localResult:string, next:string){
    this.localResult = localResult;
    this.next = next;
  }
}
interface Component{
  CheckIfCanGoNext: CheckIfGoNextPage;
}
let x:Component = {"CheckIfCanGoNext": CheckIfGoNextPage}

let f = new x["CheckIfCanGoNext"]("sss", "")
console.log(f.localResult);

If I set CheckIfCanGoNext to any it will work but I will lose the type.

typescript class interface

Answer 1

Answer №1

If you ever need to determine the type of a specific named value, you can utilize the typeof type query operator. To assign the actual value named CheckIfGonextPage, which is the class constructor, to the CheckifCanGoNext property of a Comp object, you can reference that type as typeof CheckIfGonextPage:

interface Comp {
    CheckifCanGoNext: typeof CheckIfGonextPage;
}
let x: Comp = { "CheckifCanGoNext": CheckIfGonextPage }
let f = new x["CheckifCanGoNext"]("sss", "")

Another approach would be using a construct signature to describe something that can be constructed with the new operator. It resembles a function call signature, but with the addition of the word new before it:

interface Comp {
    CheckifCanGoNext: new (localResult: string, next: string) => CheckIfGonextPage
}
let x: Comp = { "CheckifCanGoNext": CheckIfGonextPage }

let f = new x["CheckifCanGoNext"]("sss", "");

Both methods should achieve the desired outcome.

Link to Playground for code demonstration

Answer 2

If you ever need to determine the type of a specific named value, you can utilize the typeof type query operator. To assign the actual value named CheckIfGonextPage, which is the class constructor, to the CheckifCanGoNext property of a Comp object, you can reference that type as typeof CheckIfGonextPage:

interface Comp {
    CheckifCanGoNext: typeof CheckIfGonextPage;
}
let x: Comp = { "CheckifCanGoNext": CheckIfGonextPage }
let f = new x["CheckifCanGoNext"]("sss", "")

Another approach would be using a construct signature to describe something that can be constructed with the new operator. It resembles a function call signature, but with the addition of the word new before it:

interface Comp {
    CheckifCanGoNext: new (localResult: string, next: string) => CheckIfGonextPage
}
let x: Comp = { "CheckifCanGoNext": CheckIfGonextPage }

let f = new x["CheckifCanGoNext"]("sss", "");

Both methods should achieve the desired outcome.

Link to Playground for code demonstration

What is the best way to design an interface in TypeScript that accepts a class as a parameter, rather than an instance of the class?

Answer №1

Similar questions

Manually close the AntD Menu without using any shortcuts

What are the best practices for integrating PrimeVue with CustomElements?

What is the best way to encrypt the JWT decode token payload using Angular 8 on the client-side?

Are there any @types available for browser extension objects that are interoperable?

Creating an object using a class in Python and extracting data from a list: A step-by-step guide

Utilizing a TypeScript getter or local variable to reference a service variable within an Angular component

Difficulty encountered while managing dropdown functionality in Protractor using TypeScript

Encountering issues with setting headers in Angular HttpClient when receiving a response from the server, particularly when testing in Postman

Encountering a compilation error while compiling using Angular Ivy

Can a form component be recycled through the use of inheritance?

Navigating in express

Modifying state within reducers is not allowed

I am unable to retrieve the values from a manually created JavaScript list using querySelectorAll()

When defining a stripe in TypeScript using process.env.STRIPE_SECRET_KEY, an error of "string | undefined" is encountered

The element type 'ReactElement<any>' does not match a JSX element constructor function. 'undefined' cannot be assigned to type 'Element | null'

Conceal the message using star symbols

Having difficulty transitioning a function with a promise from JavaScript to TypeScript

How can I implement dynamic styling for the rows in the PrimeNG table?

Comparing TypeScript's `return;` with `return undefined;`: which is better?

TS2322 error: What does it mean when the type is both not assignable and assignable?