Question Mark Operator in TypeScript

1. Use the Question Mark (?) Operator in TypeScript
2. Use the Question Mark (?) to Check for undefined in TypeScript

TypeScript has strict matching policies for type checking. The question mark or ? has relieved the users by defining optional parameters.

Moreover, the ? operator can also act as a shorthand for checking if a certain attribute of an object is null or undefined. We will discuss the use of the question mark operator in TypeScript in this article.

Use the Question Mark (?) Operator in TypeScript

The parameter? : type is a shorthand for parameter: type | undefined = undefined. Thus it gives a convenient shortcut for assigning undefined parameters.

Code Snippet:

interface Props{
    name : string ;
    age? : number ;
}

function getDetails(props : Props){
    if ( props.age !== undefined){
        console.log("Hi my name is " + props.name + " , and my age is " + props.age.toString() );
    } else {
        console.log("Hi my name is " + props.name );
    }
}

getDetails({ name : "Geralt"});
getDetails( { name : "Geralt", age : 95});

Output:

"Hi my name is Geralt"
"Hi my name is Geralt , and my age is 95"

The optional field in the Props interface allowed the age attribute to be empty while passing it to the getDetails function. It is also applicable for functions with arguments.

Let’s have another example without the Props interface.

Code Snippet:

function getDetails(name :string, age? : number){
    if ( age === undefined){
        console.log("Name : " + name);
    } else {
        console.log("Name : " + name + ", Age : " + age.toString());
    }
}

getDetails("Geralt");
getDetails("Geralt", 95);

Output:

"Name : Geralt"
"Name : Geralt, Age : 95"

The above function definition can also be written in the long-form as:

function getDetails(name :string, age : number | undefined = undefined){
    ...
}

Use the Question Mark (?) to Check for undefined in TypeScript

The question mark or ? operator can also be used to check if a certain attribute of an object is null or undefined.

Syntax:

user?.name

The above TypeScript code trans-compiles to JavaScript as:

user === null || user === undefined ? undefined : user.name;

The ? operator can also be chained to check for repeated null or undefined checks.

Code Snippet:

interface User {
    user : {
        name : string;
    }
}

interface Data {
    data : User
}

// faulty data from an API call
let d : Data = {
    data : {
        user : undefined
    }
}

let userName = d?.data?.user?.name ?? 'default name';
console.log(userName);

Output:

"default name"

Thus some faulty data from an API call may have some undefined fields. The above code segment shows how to chain the ? operator to have null and finally use the ?? operator if an undefined was returned.