Defining TypeScript callback type – Types

Photo of author
Written By M Ibrahim
callback mime-types reacttypescript

Quick Fix: In TypeScript, a callback type can be defined using the following syntax:

public myCallback: (name: type) => returntype;

For example:

class CallbackTest
{
    public myCallback: () => void;

    public doWork(): void
    {
        //doing some work...
        this.myCallback(); //calling callback
    }
}

You can also define a type alias for the callback type:

The Problem:

In TypeScript, I have a class with a method that takes a callback as an argument. How can I define the type of this callback? Is it possible to avoid using the ‘any’ type?

The Solutions:

Solution 1: Define a callback type

To define a TypeScript callback type, use the following syntax:

public myCallback: (name: type) => returntype;

In this example, it would be:

“`
class CallbackTest
{
public myCallback: () => void;

public doWork(): void
{
    //doing some work...
    this.myCallback(); //calling callback
}

}

<p>You can also define a type alias for the callback:</p>

type MyCallback = (name: type) => returntype;

Solution 2: Declaring a type pointer to a function signature

To refine the callback type definition, you can create an interface that specifies the signature of the callback function. For instance, you could define the following interface:

interface myCallbackType {
  (myArgument: string): void;
}

This interface defines a function that takes a string argument and returns nothing (void). You can then use this interface type to declare the myCallback field in your class:

public myCallback: myCallbackType;

By doing so, you ensure that the callback function passed to doWork has the correct signature and can be called with the expected arguments.

Solution 3: Defining TypeScript Callback Type

You can create a new type using the following syntax:
after that 
- Pass this type to the function parameter.
- Now you can call this function with allowed parameters.

Here's an example:

1. Define the new type `MyHandler`, which is a function that takes a single string argument and returns nothing.

2. Declare a variable `handler` of type `MyHandler.

3. Assign a function to the `handler` variable that takes a single string argument and does something with it.

4, Call the `handler` function with a string argument.

 This approach allows you to define the expected type of the `myCallback` and ensures that it is called with the correct arguments.

Solution 4: Defining TypeScript callback type

Here’s how you can define a callback type in TypeScript and assign it to a class field:

class CallbackTest {
  public myCallback: { (): void };

  public doWork(): void {
    // Doing some work...
    this.myCallback(); // Calling callback
  }
}

let test = new CallbackTest();
test.myCallback = () => alert("done");
test.doWork();

This defines a callback with no parameters and no return value. To accept parameters or return a value, simply add the appropriate types to the callback definition:

// Callback with a single string parameter and no return value
public myCallback: { (msg: string): void };

// Callback with a single string parameter and a number return value
public myCallback: { (msg: string): number };

Solution 5: Defining TypeScript callback type

If you want a generic function you can use the following. Although it doesn’t seem to be documented anywhere.

class CallbackTest {
  myCallback: Function;
}