Learn to create functions, function type declaration, optional parameters, default parameters and rest parameters with example.
Table of Contents Create function Function Types Optional Parameters Default Parameters Rest Parameters
Create function
In TypeScript, you can create functions in two ways.
Function Declarations
These are named functions written in traditional JavaScript style.
console.log( showMyName("Lokesh") ); // Hi! Lokesh function showMyName (name: string): string { return `Hi! ${name}`; }
Function Expressions
These functions don’t have names. They are assigned to
console.log(showMyName("Lokesh")); //Error - Define functional expression first. let showMyName = function(name: string): string { return `Hi! ${name}`; }; console.log(showMyName("Lokesh")); //Hi! Lokesh
Function Types
In TypeScript, everything is type, functions are also types. You can declare a variable’s type to be Function
as shown.
let showMyName: Function = function(name: string): string { return `Hi! ${name}`; };
In above example, showMyName
is a variable which can point to a Function
type only.
If you don’t specify a type of variable, TypeScript infers the type automatically.
Optional Parameters
Unlike JavaScript, the TypeScript compiler will throw an error if we attempt to invoke a function without providing the exact number and types of parameters that its signature declares.
To solve this problem, you can use optional parameters using question mark sign ('?'
). In below example, message
is marked as optional parameter.
let showMyName = function(name: string, message?: string): string { return `Hi! ${name} {message}`; }; showMyName(); //Error showMyName('Lokesh'); //Hi! Lokesh showMyName('Lokesh', 'How are you?'); //Hi! Lokesh How are you?
Default Parameters
Optional parameters are great feature but leave us with the logic to implement the scenarios where it’s values can be undefined
. It require lots of null
checks and if-else
blocks.
A better approach would be to have default values of these parameters, rather than to declare them optional. If will lead to more cleaner code and easy maintenance of code.
let showMyName = function(name: string, message: string = 'How are you?'): string { return `Hi! ${name} {message}`; }; showMyName('Lokesh'); //Hi! Lokesh How are you? showMyName('Lokesh', 'How are you buddy?'); //Hi! Lokesh How are you buddy?
2) You cannot make any parameter optional and default both. Only one type is allowed.
REST Parameters
Sometimes, you may want to create functions which can have undetermined number of parameters. For one or two parameters, you can use optional parameters or default parameters. But what if number of parameters are not known, or can vary at runtime.
e.g. You are reading input field values and that can vary due to dynamic UI. Here rest parameters will help you. The REST parameter syntax allows us to represent an indefinite number of arguments as an array.
- To create REST parameter, use ellipsis i.e. three dots (
'...'
) before the variable name. - A REST parameter must be of an array type or we will get a compilation error.
- Theoretically, there is no specific limit to the maximum number of arguments.
let addInputValues = function( ...values: number[] ): number { let result = 0; for (let val of values) { result += val; } return result; }; addInputValues(); //OK - You can choose not to pass anything as well addInputValues(1, 1); //OK addInputValues(1, 2, 3); //OK addInputValues(1, 2, 3, 4, 5, 6); //OK
Drop me your questions in comments section.
Happy Learning !!
Ashwin
What is the difference between rest parameters and passing an array as optional parameter in function? Both does the same work
g8up
what if the rest params array have multiple types ?
IM 12
It wouldn’t work, they have to be similar types.