paint-brush
How to Pass Optional Parameters in Typescriptby@smpnjn
5,782 reads
5,782 reads

How to Pass Optional Parameters in Typescript

by Johnny SimpsonJuly 12th, 2022
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

In Javascript, if a function has 4 parameters, and we only use 3, it's no big deal - Javascript just ignores the missing parameter and runs the function as if it is 'undefined` In TypeScript, an optional parameter cannot be followed by a required one. This may not be your desired behaviour, which is exactly why TypeScript has these controls in place - it can help prevent unwanted outcomes by requiring certain parameters. For example, if we wanted to make `c` optional on our original function, we could write the same code - and not get an error.

Company Mentioned

Mention Thumbnail
featured image - How to Pass Optional Parameters in Typescript
Johnny Simpson HackerNoon profile picture


In Javascript, if a function has 4 parameters, and we only use 3, it's no big deal - Javascript just ignores the missing parameter and runs the function as if it is undefined.


In TypeScript, things are a little different. If you try to run a function with a different number of parameters than the function actually has, you'll get an error. For example, consider this:


const myFunction = (a: string, b: string, c?: string) => {
    return a + " " + b + " " + c;
}

let runFunction = myFunction("Hello", "there");


The above code will throw the following error:


Expected 3 arguments, but got 2.


TypeScript does this to ensure fewer errors, since leaving a parameter out of a function you are calling can sometimes break the function. As such, we need to tell TypeScript specifically that one or more of the parameters we defined on the function is optional.


In order to do that, we use a ? after the parameter, to denote that it is actually an optional parameter.


For example, if we wanted to make c optional on our original function, we could write the following - and not get an error:


const myFunction = (a: string, b: string, c?: string) => {
    return a + " " + b + " " + c;
}

let runFunction = myFunction("Hello", "there");

console.log(runFunction);


Now our function will run as expected, however, the output will be Hello there undefined. This may not be your desired behavior, which is exactly why TypeScript has these controls in place - it can help prevent unwanted outcomes by requiring certain parameters.


In TypeScript, however, an optional parameter cannot be followed by a required one. So for example, the following code will not work:


const myFunction = (a: string, b?: string, c: string) => {
    return a + " " + b + " " + c;
}


It will produce the following error:


A required parameter cannot follow an optional parameter.


We can combine this optionality with the use of the typeof operator to produce code that makes sense. For example, if c is optional and undefined, then we can ignore it, like so:


const myFunction = (a: string, b: string, c?: string) => {
    
    if(typeof c === undefined) {
        return a + " " + b;
    }

    return a + " " + b + " " + c;
}

let runFunction = myFunction("Hello", "there");

console.log(runFunction);


Now the output of our code will be Hello there, but we could also run it with c to produce a different output, for example:


const myFunction = (a: string, b: string, c?: string) => {
    
    if(typeof c === undefined) {
        return a + " " + b;
    }

    return a + " " + b + " " + c;
}

let runFunction = myFunction("How", "are", "you?");

// Returns "How are you?"
console.log(runFunction);



Also published here.