Function Type Annotations in TypeScript

Function type annotations specify what types of values a function expects and what type of value it returns.

function add(a: number, b: number): number {
    return a + b;
}

Here, both parameters are numbers and the function returns a number.

You can specify the type of every parameter after its name.

function greet(name: string) {
    console.log("Hello " + name);
}

The name parameter must be a string.

A function parameter can be declared as a number.

function square(value: number) {
    return value * value;
}

The function expects a numeric value.

A string parameter can be declared using string.

function showName(name: string) {
    console.log(name);
}

Passing a number instead of a string will cause a TypeScript type error.

A parameter can also be declared as a boolean.

function checkStatus(active: boolean) {
    console.log(active);
}

The function expects either true or false.

You can add type annotations to multiple parameters.

function add(a: number, b: number) {
    return a + b;
}

Both a and b must be numbers.

Different parameters can have different types.

function studentInfo(
    name: string,
    age: number
) {
    console.log(name, age);
}

The first parameter is a string and the second parameter is a number.

A function's return type is written after the closing parenthesis.

function add(
    a: number,
    b: number
): number {
    return a + b;
}

The : number specifies the return type.

Use : string when the function returns a string.

function getName(): string {
    return "Rahul";
}

TypeScript expects the function to return a string.

Use : number when the function returns a number.

function getAge(): number {
    return 25;
}

Use : boolean when the function returns true or false.

function isAdult(age: number): boolean {
    return age >= 18;
}

A function that does not return a value can use the void return type.

function showMessage(message: string): void {
    console.log(message);
}

The function performs an action but does not return a value.

A typed function can be called by passing values that match its parameter types.

function greet(name: string): void {
    console.log("Hello " + name);
}

greet("Amit");

TypeScript reports an error when an incorrect type is passed to a function.

function greet(name: string) {
    console.log(name);
}

// Incorrect:
// greet(100);

The function expects a string.

Functions can have several typed parameters.

function student(
    name: string,
    age: number,
    active: boolean
): void {
    console.log(name, age, active);
}

Function annotations are useful for application logic.

function percentage(
    marks: number,
    total: number
): number {
    return (marks / total) * 100;
}

Both parameters and the return value are numbers.

An array can also be used as a typed parameter.

function total(numbers: number[]): number {
    return numbers.reduce(
        (sum, value) => sum + value,
        0
    );
}

An object type can be used as a function parameter.

function showStudent(
    student: { name: string; age: number }
): void {
    console.log(student.name);
    console.log(student.age);
}

You can also specify an object as the return type.

function getStudent(): {
    name: string;
    age: number;
} {
    return {
        name: "Amit",
        age: 20
    };
}

A parameter can accept more than one type using a union type.

function showValue(
    value: string | number
): void {
    console.log(value);
}

The function accepts either a string or a number.

A parameter can allow null using a union type.

function showName(
    name: string | null
): void {
    console.log(name);
}

The function accepts either a string or null.

A parameter can be optional by placing ? after its name.

function greet(
    name?: string
): void {
    console.log(name);
}

The optional parameter can be omitted when calling the function.

Arrow functions can also use parameter and return type annotations.

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

Type annotations are useful when defining functions used inside React components.

function showMessage(
    message: string
): void {
    console.log(message);
}

This makes the expected parameter type clear.

React Native applications frequently use functions for button presses, navigation, API calls, and other actions.

function handlePress(): void {
    console.log("Button pressed");
}

A typed function can be used as a button event handler.

const handleSave = (): void => {
    console.log("Data saved");
};

The void return type indicates that the function does not return a value.

Function annotations make code easier to understand and help detect incorrect values.

function add(
    a: number,
    b: number
): number {
    return a + b;
}

Anyone reading the function can immediately understand what values it expects and returns.

A common mistake is assigning a value that does not match the parameter type.

function multiply(
    a: number,
    b: number
): number {
    return a * b;
}

// Incorrect:
// multiply("10", 5);

Both arguments should be numbers.

Here is a complete example using parameter and return type annotations.

function calculateTotal(
    price: number,
    quantity: number
): number {

    return price * quantity;
}

let total: number =
    calculateTotal(500, 3);

console.log(total);

Function type annotations allow you to clearly define parameter types and return types.

function add(
    a: number,
    b: number
): number {
    return a + b;
}

This improves type safety, readability, and makes TypeScript functions easier to maintain.