Optional Parameters

Sometimes an argument really may be left out. The innkeeper welcomes every guest, but only some guests have a title, such as Sir or Lady. TypeScript would report a call without the title (Expected 2 arguments, but got 1.), so you have to say that the parameter is optional: put a question mark after its name:

function greet(name: string, title?: string): string {
    if (title === undefined) {
        return `Welcome, ${name}!`;
    }
    return `Welcome, ${title} ${name}!`;
}

console.log(greet("Kira"));
console.log(greet("Bruno", "Sir"));

This prints:

Welcome, Kira!
Welcome, Sir Bruno!

Now greet takes one or two arguments. With three, TypeScript reports Expected 1-2 arguments, but got 3.

When the argument is left out, the parameter is undefined, just as in JavaScript. So inside the function, title isn't simply a string. Its type is string | undefined: “a string, or undefined”. (The | means “or”. Such types are the topic of lesson 5.) TypeScript won't let you use title as a string until you've checked that it isn't undefined:

function greet(name: string, title?: string): string {
    return `Welcome, ${title.toUpperCase()} ${name}!`;
}

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

main.ts(2,24): error TS18048: 'title' is possibly 'undefined'.

'title' is possibly 'undefined': in JavaScript, greet("Kira") would crash here with TypeError: Cannot read properties of undefined (reading 'toUpperCase'). TypeScript reports it before the program runs.

In the first example, the if handles the guest without a title and returns. TypeScript follows the conditions in your code, so it knows that below this if, title can only be a string, and you may use it as one.

Be careful with template literals, though. TypeScript lets undefined into them, and it becomes the text undefined. Without the check, greet("Kira") would return Welcome, undefined Kira!, with no error. There, the check is up to you.

Optional parameters go after the required ones. Arguments go into parameters in order, so otherwise greet("Kira") would put "Kira" into the title:

function greet(title?: string, name: string): string {
    return `Welcome, ${name}!`;
}

main.ts(1,32): error TS1016: A required parameter cannot follow an optional parameter.

Typical mistakes:

• Using the parameter without a check: 'title' is possibly 'undefined'.
• The question mark after the type, title: string?, instead of after the name. TypeScript reports '?' at the end of a type is not valid TypeScript syntax. Did you mean to write 'string | undefined'? The question mark goes right after the parameter's name: title?: string.