Function Types in TypeScript

A function type describes the structure of a function. It specifies its parameter types and return type.

(a: number, b: number) => number

This means the function accepts two numbers and returns a number.

A function type can be written using parameter types followed by the return type.

let operation: (
    a: number,
    b: number
) => number;

The variable can store a function matching this structure.

A function can be assigned to a variable with a function type.

let add: (
    a: number,
    b: number
) => number;

add = (
    a: number,
    b: number
): number => {

    return a + b;
};

Here the function must accept two numbers and return a number.

let calculate: (
    x: number,
    y: number
) => number;

calculate = (
    x,
    y
) => x + y;

console.log(
    calculate(10, 20)
);

Output:

30

A function type can specify string parameters and a string return value.

let greet: (
    name: string
) => string;

greet = (
    name
) => "Hello " + name;

console.log(
    greet("Amit")
);

A function type can return a boolean value.

let checkAge: (
    age: number
) => boolean;

checkAge = (
    age
) => age >= 18;

console.log(
    checkAge(20)
);

Use void when the function does not return a value.

let showMessage: (
    message: string
) => void;

showMessage = (
    message
) => {

    console.log(message);
};

Function types can contain several parameters.

let studentInfo: (
    name: string,
    age: number,
    active: boolean
) => string;

Any assigned function must follow this structure.

The assigned function must be compatible with the declared function type.

let studentInfo: (
    name: string,
    age: number
) => string;

studentInfo = (
    name,
    age
) => {

    return name + " is " + age;
};

TypeScript checks whether the assigned function follows the declared function type.

let add: (
    a: number,
    b: number
) => number;

add = (
    a,
    b
) => a + b;

This is valid because the parameter and return types match.

Function types can also contain optional parameters.

let greet: (
    name?: string
) => string;

greet = (
    name
) => {

    return name
        ? "Hello " + name
        : "Hello Guest";
};

The function assigned to a function type can use a default parameter.

let greet: (
    name?: string
) => string;

greet = (
    name = "Guest"
) => {

    return "Hello " + name;
};

Function types can accept arrays.

let total: (
    numbers: number[]
) => number;

total = (
    numbers
) => {

    return numbers.reduce(
        (sum, number) =>
            sum + number,
        0
    );
};

console.log(
    total([10, 20, 30])
);

A function type can also accept an object.

type Student = {
    name: string;
    age: number;
};

let showStudent: (
    student: Student
) => string;

showStudent = (
    student
) => {

    return student.name;
};

A type alias can make a function type easier to reuse.

type AddFunction = (
    a: number,
    b: number
) => number;

let add: AddFunction;

add = (
    a,
    b
) => a + b;

Once a function type is created, it can be used by multiple variables.

type Operation = (
    a: number,
    b: number
) => number;

let add: Operation;
let multiply: Operation;

add = (
    a,
    b
) => a + b;

multiply = (
    a,
    b
) => a * b;

The same function type can be used for different operations.

type Operation = (
    a: number,
    b: number
) => number;

const subtract: Operation = (
    a,
    b
) => a - b;

console.log(
    subtract(30, 10)
);

Output:

20

Here is another function using the same function type.

type Operation = (
    a: number,
    b: number
) => number;

const multiply: Operation = (
    a,
    b
) => a * b;

console.log(
    multiply(5, 4)
);

A function type can be used when another function receives a function as a parameter.

function calculate(
    a: number,
    b: number,
    operation: (
        x: number,
        y: number
    ) => number
): number {

    return operation(a, b);
}

An arrow function can be passed to a function expecting a function type.

function calculate(
    a: number,
    b: number,
    operation: (
        x: number,
        y: number
    ) => number
): number {

    return operation(a, b);
}

const result = calculate(
    10,
    20,
    (x, y) => x + y
);

console.log(result);

Function types are commonly used for callback functions.

function processNumber(
    number: number,
    callback: (
        value: number
    ) => number
): number {

    return callback(number);
}

console.log(
    processNumber(
        10,
        value => value * 2
    )
);

A callback can return no value.

function showMessage(
    message: string,
    callback: (
        value: string
    ) => void
): void {

    callback(message);
}

showMessage(
    "Hello",
    message => {
        console.log(message);
    }
);

Function types are useful for typing event handlers and callback props in React.

type ClickHandler = () => void;

const handleClick: ClickHandler = () => {

    console.log("Button clicked");

};

This ensures the handler does not require parameters and does not return a value.

React Native applications also use function types for button and component event handlers.

type PressHandler = () => void;

const handlePress: PressHandler = () => {

    console.log(
        "Button pressed"
    );

};

A function type can accept a value and return nothing.

type ValueHandler = (
    value: string
) => void;

const handleValue: ValueHandler = (
    value
) => {

    console.log(value);

};

This pattern is useful for reusable components.

A function type can also describe a function that accepts a variable number of arguments.

type AddFunction = (
    ...numbers: number[]
) => number;

const add: AddFunction = (
    ...numbers
) => {

    return numbers.reduce(
        (sum, number) =>
            sum + number,
        0
    );
};

console.log(
    add(10, 20, 30)
);

The function's parameters and return value should be compatible with the declared function type.

type AddFunction = (
    a: number,
    b: number
) => number;

const add: AddFunction = (
    a,
    b
) => {

    return a + b;
};

A function that returns an incompatible type should not be assigned to this function type.

Function types are useful when:

• Storing functions in variables.
• Creating reusable function definitions.
• Passing functions as parameters.
• Creating callback functions.
• Typing React event handlers.
• Typing React Native component callbacks.

The following example creates a reusable calculator using a function type.

type Operation = (
    a: number,
    b: number
) => number;

const add: Operation = (
    a,
    b
) => a + b;

const multiply: Operation = (
    a,
    b
) => a * b;

function calculate(
    a: number,
    b: number,
    operation: Operation
): number {

    return operation(a, b);
}

console.log(
    calculate(10, 20, add)
);

console.log(
    calculate(10, 20, multiply)
);

Output:

30
200

Function types describe the structure of functions in TypeScript.

type Operation = (
    a: number,
    b: number
) => number;

They make code safer and easier to understand, especially when functions are passed around as values or callbacks.