TypeScript functions optional parameters

bynNY5dJ_400x400

Have you ever been in a situation where you want a function with the same name but with different parameters? Yeah, I’m talking about function overloading…

Function overloading helps you define a function with the same name but with different signatures. But do JavaScript supports function overloading? No. There’s no function overloading in JavaScript, and thus TypeScript also doesn’t support it. Although in JavaScript, every parameter is optional.

Then how do create functions in TypeScript with the same name and different parameters? You don’t.

You create functions with optional parameters. If you’re familiar with C#, or ES6 (Which now officially supports optional / default parameters in JavaScript), you must be knowing what I’m talking about.

TypeScript provides the following syntax for optional parameters:

// Optional Parameters
sayHello(hello?: string) {
console.log(hello);
}

sayHello(); // Prints ‘undefined’

sayHello(‘world’); // Prints ‘world’

And for default parameters:

// Default Parameters
sayHello(hello: string = ‘hello’) {
console.log(hello);
}

sayHello(); // Prints ‘hello’

sayHello(‘world’); // Prints ‘world’

So what happened above? Both above allow us to call functions without parameters. The optional parameter takes makes the value of parameters to ‘undefined’, while Default parameters provide a default value to the parameter if you don’t provide it with any value.

But be cautious, passing ‘null’ to TypeScript function’s default parameter will not result to what you expect. Passing ‘null’ will cause the function to take ‘null’ as a value of that parameter. You must be thinking why it that? For that, we need to dig in the transpiled JavaScript code.

Go ahead to TypeScript Playground and write the following code:

class Greeter {
greet(str: string = ‘aa’) {
return “Hello, ” + str;
}
}

let greeter = new Greeter();

let button = document.createElement(‘button’);
button.textContent = “Say Hello”;
button.onclick = function() {
alert(greeter.greet(null));
}

document.body.appendChild(button);

Now if you look at the generated function here:

Greeter.prototype.greet = function (str) {
// TypeScript added following line for optional parameter
if (str === void 0) { str = ‘aa’; }
return “Hello, ” + str;
};

Now if you look at ‘void 0’. What is that? In JavaScript ‘void’ is an operator which takes a value as a parameter and always returns ‘undefined’.

So now, if you already know, in JavaScript ‘null === undefined’ is always false, therefore when we provide ‘null’ to the parameter, it’ll never provide ‘str’ to its default value. You can read more about ‘void 0’ here.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s