Arrow Functions in TypeScript

An arrow function is a shorter syntax for creating a function.

const greet = () => {
    console.log("Hello");
};

greet();

The => symbol is called the arrow operator.

The basic syntax of an arrow function is:

const functionName = () => {
    // code
};

The function is stored inside a variable.

An arrow function can have no parameters.

const message = () => {
    console.log("Welcome to TypeScript");
};

message();

Empty parentheses () are used when there are no parameters.

An arrow function can receive a parameter.

const greet = (name: string) => {
    console.log("Hello " + name);
};

greet("Amit");

The parameter is typed as string.

TypeScript allows us to specify the parameter type.

const square = (number: number) => {
    return number * number;
};

console.log(
    square(5)
);

Output:

25

Multiple parameters are separated by commas.

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

    return a + b;
};

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

You can specify the return type after the parameter list.

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

    return a + b;
};

Here, : number means the function returns a number.

An arrow function can return a string.

const getName = (): string => {

    return "Rahul";
};

console.log(
    getName()
);

An arrow function can return a boolean value.

const isAdult = (
    age: number
): boolean => {

    return age >= 18;
};

console.log(
    isAdult(20)
);

When an arrow function contains only one return statement, it can be written in a shorter form.

const square = (
    number: number
): number => number * number;

The braces and return keyword are not required.

When the function contains a single expression, the result is automatically returned.

const double = (
    number: number
): number => number * 2;

console.log(
    double(10)
);

This is called an implicit return.

With curly braces, use the return statement explicitly.

const double = (
    number: number
): number => {

    return number * 2;
};

Both explicit and implicit return styles are valid.

When there is one parameter, parentheses can be omitted.

const square = number => number * number;

In TypeScript, however, adding the parameter type requires parentheses.

const square = (
    number: number
) => number * number;

With multiple parameters, parentheses are required.

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

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

Output:

20

Arrow functions can receive arrays as parameters.

const getLength = (
    items: string[]
): number => {

    return items.length;
};

console.log(
    getLength([
        "HTML",
        "CSS",
        "TypeScript"
    ])
);

Arrow functions are commonly used with array methods such as map().

const numbers: number[] = [
    1, 2, 3, 4
];

const doubled = numbers.map(
    number => number * 2
);

console.log(doubled);

Output:

[2, 4, 6, 8]

The filter() method can use an arrow function to select values.

const numbers: number[] = [
    10, 15, 20, 25
];

const result = numbers.filter(
    number => number > 15
);

console.log(result);

Output:

[20, 25]

Arrow functions are also commonly used with reduce().

const numbers: number[] = [
    10, 20, 30
];

const total = numbers.reduce(
    (sum, number) => sum + number,
    0
);

console.log(total);

Output:

60

An arrow function can be passed as a callback to another function.

const numbers: number[] = [
    10, 20, 30
];

numbers.forEach(
    number => {
        console.log(number);
    }
);

This pattern is very common in modern TypeScript code.

An arrow function can return an object.

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

const createStudent = (
    name: string,
    age: number
): Student => {

    return {
        name: name,
        age: age
    };
};

console.log(
    createStudent("Amit", 20)
);

TypeScript can often infer the return type automatically.

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

    return a + b;
};

TypeScript understands that the return type is number.

Arrow functions can use optional parameters.

const greet = (
    name?: string
): string => {

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

console.log(
    greet()
);

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

A default value can be assigned to an arrow function parameter.

const greet = (
    name: string = "Guest"
): string => {

    return "Hello " + name;
};

console.log(
    greet()
);

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

Arrow functions are frequently used for React event handlers and component functions.

const handleClick = (): void => {

    console.log("Button clicked");

};

This function can be used as an event handler.

React Native applications commonly use arrow functions for button handlers and other actions.

const handlePress = (): void => {

    console.log(
        "Button Pressed"
    );

};

This function can be connected to a React Native Button.

Arrow functions can also use rest parameters.

const add = (
    ...numbers: number[]
): number => {

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

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

When using curly braces, you need return if you want to return a value.

const square = (
    number: number
) => {

    return number * number;
};

Without return, the function does not return the calculated value.

Traditional function:

function add(
    a: number,
    b: number
): number {

    return a + b;
}

Arrow function:

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

    return a + b;
};

The arrow function provides a shorter syntax.

Here is a practical student result example using an arrow function.

const calculatePercentage = (
    total: number,
    marks: number
): number => {

    return (
        marks / total
    ) * 100;
};

const percentage =
    calculatePercentage(
        500,
        425
    );

console.log(
    "Percentage: " +
    percentage
);

Output:

Percentage: 85

Arrow functions provide a concise way to create functions in TypeScript.

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

They are especially common with array methods, callbacks, React components, event handlers, and React Native applications.