Optional Parameters in TypeScript

An optional parameter is a parameter that can be omitted when calling a function.

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

The ? makes name optional.

Place the question mark after the parameter name and before the colon.

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

The general syntax is:

parameterName?: type

Because the parameter is optional, the function can be called without providing it.

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

greet();

The function call is valid.

You can also provide a value for the optional parameter.

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

greet("Amit");

The function works whether the parameter is provided or omitted.

When an optional parameter is not provided, its value can be undefined.

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

greet();

Inside the function, name may be a string or undefined.

Optional parameters can be combined with a function return type.

function greet(name?: string): string {
    return "Hello " + name;
}

The function returns a string.

You can check whether an optional parameter has a value.

function greet(name?: string): void {

    if (name) {
        console.log("Hello " + name);
    }

}

You can explicitly check whether an optional parameter is undefined.

function showName(name?: string): void {

    if (name !== undefined) {
        console.log(name);
    }

}

Optional parameters can also be numbers.

function showAge(age?: number): void {
    console.log(age);
}

showAge();
showAge(20);

A boolean parameter can also be optional.

function showStatus(
    active?: boolean
): void {
    console.log(active);
}

showStatus();
showStatus(true);

A function can have multiple optional parameters.

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

Both parameters can be omitted.

You can provide one or both optional parameters.

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

student();
student("Amit");
student("Amit", 20);

A required parameter can appear before an optional parameter.

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

The name parameter is required, while age is optional.

When a required parameter comes first, it must be provided.

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

greet("Rahul");
greet("Rahul", 21);

A default parameter automatically provides a value when an argument is omitted.

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

Default parameters and optional parameters solve related problems in different ways.

An optional parameter may be undefined when omitted. A default parameter receives a specified default value.

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

function defaultName(name: string = "Guest") {
    console.log(name);
}

Because an optional string may be undefined, check it before using string methods.

function upperName(name?: string): void {

    if (name !== undefined) {
        console.log(name.toUpperCase());
    }

}

Check an optional number before performing calculations.

function double(value?: number): number {

    if (value !== undefined) {
        return value * 2;
    }

    return 0;
}

An object can also be an optional parameter.

function showStudent(
    student?: {
        name: string;
        age: number;
    }
): void {

    if (student) {
        console.log(student.name);
    }

}

An array parameter can also be optional.

function showNumbers(
    numbers?: number[]
): void {

    if (numbers) {
        console.log(numbers);
    }

}

Arrow functions can also have optional parameters.

const greet = (
    name?: string
): void => {
    console.log(name);
};

greet();
greet("Amit");

Optional parameters can be useful in React utility functions where some information may not always be available.

function showMessage(
    message?: string
): void {

    if (message) {
        console.log(message);
    }

}

React Native applications often use functions that may receive optional information.

function openScreen(
    screenName: string,
    userId?: number
): void {

    console.log(screenName, userId);

}

An optional user ID can be useful when a function supports both general and user-specific actions.

function loadProfile(
    userId?: number
): void {

    if (userId !== undefined) {
        console.log("Loading user:", userId);
    } else {
        console.log("No user selected");
    }

}

An interface can be used as the type of an optional parameter.

interface User {
    name: string;
    age: number;
}

function showUser(
    user?: User
): void {

    if (user) {
        console.log(user.name);
    }

}

A common mistake is using an optional parameter directly without considering that it may be undefined.

function greet(name?: string) {

    // Check first
    if (name !== undefined) {
        console.log(name.toUpperCase());
    }

}

Always handle the possibility of an undefined value.

An optional parameter is not automatically the same as explicitly allowing null.

function show(
    value?: string
): void {
    console.log(value);
}

If you also want to explicitly allow null, include it in the type.

function show(
    value?: string | null
): void {
    console.log(value);
}

Optional parameters are useful when:

• A value is not always required.
• A function supports different calling situations.
• A value may not be available.
• You want to make a function flexible.

function sendMessage(
    message: string,
    recipient?: string
): void {
    console.log(message, recipient);
}

Here is a practical example using a required parameter and an optional parameter.

function createStudent(
    name: string,
    age?: number
): string {

    if (age !== undefined) {
        return name + " is " + age + " years old.";
    }

    return name + " age is not provided.";
}

console.log(createStudent("Amit"));
console.log(createStudent("Rahul", 21));

Optional parameters allow a function parameter to be omitted when calling the function.

function greet(
    name?: string
): void {

    if (name !== undefined) {
        console.log("Hello " + name);
    } else {
        console.log("Hello Guest");
    }

}

Use the ? symbol after the parameter name when the parameter is optional.