Typed Functions as Function Parameters in TypeScript

  1. Use Typed Callbacks in Functions in TypeScript
  2. Typed Functions as Parameters Using Interface in TypeScript
Typed Functions as Function Parameters in TypeScript

In TypeScript, along with different variables consisting of different types, strongly and weakly typed functions can also be passed along as function parameters in other functions.

This is owing to the functional programming paradigm of JavaScript that different functions can be passed on as parameters of other functions, TypeScript ensuring those functions are being typed. This tutorial will demonstrate how to use typed functions as function parameters.

Use Typed Callbacks in Functions in TypeScript

Different kinds of typed callbacks can be used in function definitions. The callbacks can have different types and act as parameters for different functions.

The following code block shows a demonstration of this.

enum LogLevel {
    DEBUG,
    INFO,
    DANGER
}

interface LogFunction {
    (message : string, level? : LogLevel) : void
}

function showLogMessage(message : string, level : LogLevel = 5) {
    switch(level){
        case LogLevel.INFO:
            console.info("Message : " , message);
            break;
        case LogLevel.DEBUG:
            console.debug("Message : " , message);
            break;
        case LogLevel.DANGER:
            console.error("Message : " , message);
            break;
        default :
            console.log("Message : " , message);
    }
}

class Compute {
    compute(callback :LogFunction) {
        // Some Computation
        var a = 5 + 6;
        callback('Computed value of a : ' + a);
    }
}

var computeObj = new Compute();
computeObj.compute(showLogMessage);

Output:

"Message : ",  "Computed value of a : 11"

The above shows how typed functions can be used as function parameters of other functions. The Compute class has the compute function, which takes in a callback of the type LogFunction and calls the callback after some computation.

Any implementation of the callback can be used while calling the function compute. For this implementation, showLogMessage is used to implement the interface LogFunction.

Typed Functions as Parameters Using Interface in TypeScript

The functions passed in as parameters to different functions can have the types defined in the function definition, or an interface can be used to define the type of the function.

The following code blocks will show different types of typing that can be achieved while passing functions as parameters in other functions.

class Animal {

    name : string;

    constructor( name : string){
        this.name = name;
    }

    showInfo(speak : () => void){
        console.log(this.name);
        speak();
    }
}

var dog = new Animal('Dog');
dog.showInfo(() => console.log("Bark"));

Output:

"Dog"
"Bark"

The above example shows the inplace type definition of the speak callback function passed on to the showInfo function. The speak function can also have an interface as its definition.

interface SpeakCallBackFn {
    () : void
}


class Animal {

    name : string;

    constructor( name : string){
        this.name = name;
    }

    showInfo(speak : SpeakCallBackFn){
        console.log(this.name);
        speak();
    }
}

var cat = new Animal('Cat');
cat.showInfo(() => console.log("Meow"));

Output:

"Cat"
"Meow"

Thus, the above shows the implementation of the function typed using an interface.

Shuvayan Ghosh Dastidar avatar Shuvayan Ghosh Dastidar avatar

Shuvayan is a professional software developer with an avid interest in all kinds of technology and programming languages. He loves all kinds of problem solving and writing about his experiences.

LinkedIn Website

Related Article - TypeScript Function