TypeScript default parameter

Introduction to TypeScript default parameter

The default parameter in TypeScript is used to assign some default value to the variable. In JavaScript, we have this provision not to pass the required argument to the called function because it internally manages, But in TypeScript, we cannot do this. Instead, we can use default parameters to assign such argument some value. In TypeScript, we are not required to assign the type for the default parameter. In the coming section of the tutorial, we will discuss more the internal working and its usage inside the application in more detail.

Syntax

As discussed, default parameters are used inside the function in Typescript; by the use of them, we can give a default value to the function argument. Let’s see its syntax for better understanding and its implementation see below;

function function_name(variable1, variable2 = some_value){
// your logic will go here ..
}

As you can see in the above lines of syntax, we are defining one function and passing the default value to the function using the default parameter, so its value will not be null or undefined. Let’s have a look at one practice example for syntax see below;

example:

function demo(name, city = "some value"){
// your logic will go here ..
}

Above is one sample syntax for beginners; in the coming section, we will see its internal working in more detail for a better idea about its usage in application.

How does the default parameter work in TypeScript?

As we already know, that default parameter in TypeScript is used to assign some default value to the parameter passed inside the function because in TypeScript, we have to pass all the parameters required by the function, so we can give them some default values. If we do not pass the required parameter, then it will give us a compile-time error because it checks them. By using the default parameter, we can use the same parameter to perform some logic whose value will be the same for every variable passed. Let’s see its usage inside a function see below;

1) Inside a function: The default parameter can be used inside a function in TypeScript. while declaring the function we can assign a value to the default parameter. Also, while declaring a value for the default parameter, we do not require to pass the type for the default parameter. It is not mandatory in TypeScript. Let’s take a closer look at the method signature how it looks like;

Method signature:

function demo(val1, val2 = "some value"){
// your logic will go here ..
}

In the above signature, we define one function that takes the default parameter as the input param here. This function is like any normal function in TypeScript. We can define this function using the ‘function’ keyword, and inside this, we can define its body. Here we have a single element to pass inside it. Also, this same value will be used in the whole function logic. We are not defining any type for this default parameter here.

2) Multiple default parameters inside the same function: Also, we can pass any number of default param inside the function. Only we have to assign the value to the parameter; nothing more needs to be done. Let’s see its sample syntax for better understanding see below;

Method signature:

function demo(val1, val2 = "some value", vale, val4= some value, so on..){
// your logic will go here ..
}

As you can see in the above syntax, we can use multiple default parameters inside the same function itself. Let’s see one sample example to understand its internal working and implementation in the actual program for beginners see below;

example:

function demo(name: string, city ="same value here ") {
console.log("name is ::" + name);
console.log("city is ::" + city);
}
console.log("demo to show the default parameter working in Typescript !!");
let result1 = demo("abc");

In the above lines of code, we are trying to use the default param here. here we have defined the city variable as the default param inside the function. So every time the function will be executed, it will take up the default value from the function. Also, as you can see, we have not yet defined the variable type for the ‘city’ variable here. In this way, we can define the default parameter inside the function. Also, we can pass multiple parameters as well when needed.

Examples

1) In this example, we are using the default parameter inside the function. calling the function several times to see the effect. So the value of the default variable always is the same for all calling function. This is a simple example for beginners to understand its implementation.

Example:

function demo(name: string, rollno : number, city = "Mumbai") {
console.log("name is ::" + name);
console.log("city is ::" + city);
console.log("city is ::" + rollno);
}
console.log("demo to show the default paramter working in Typescript !!");
let result1 = demo("abc", 100);
let result2 = demo("abc", 200);
let result3 = demo("abc", 300);
let result4 = demo("abc", 400);
let result5 = demo("abc", 500);

Output:

Rules and regulation for default parameter

There is no such rules and regulation to use default parameter inside the function in TypeScript, but rather we have some points to keep in mind while using default parameter see below;

1) while using default parameters, we have to assign them a default value.

2) We do not require to provide any type for the default parameter.

3) Also, we can pass multiple default parameters inside the same function.

4) In TypeScript, there is no such keyword, symbol, or identifier to define the default parameter; they are just like another normal variable in TypeScript.

5) Pass all the default parameters at the end of the other parameter; otherwise, it will give an error and wrong value in the output.

Conclusion

By using the default parameter, we can assign value to the variable. This will be the same for all other variables passed, and every time the function will be called, it will be the same. Also, because in TypeScript, we have to pass all the param which are required; otherwise, it will give an error so we can pass the default param instead.

Recommended Articles

This is a guide to the TypeScript default parameter. Here we discuss How does the default parameter work in TypeScript and Example along with the output. You may also have a look at the following articles to learn more –

1. TypeScript Decorators
2. TypeScript Export Function
3. TypeScript Generic
4. TypeScript Versions