TypeScript is a natural extension of JavaScript that’s used in many projects in place of JavaScript.
However, not everyone knows how it actually works.
In this article, we’ll look at how to use functions in our TypeScript code.
Defining Functions
TypeScript enhances the JavaScript syntax for functions by making them more predictable.
We can add the assumptions explicit so that it can be checked by the TypeScript compiler.
For instance, the following is a regular JavaScript function:
const getTax = price => {
return price * 0.2;
};
It has no data type annotations and we can pass in anything as an argument.
Redefining Functions
TypeScript provides warnings for implicitly inferred types and explicit data type annotations.
As long as the TypeScript compiler can check the data types, we’ll get errors for any data type mismatch.
If we want a function to be able to process different types of data, we define one function to do everything.
JavaScript doesn’t allow function overloading, so we can only define one function with a given name.
Function Parameters
Function parameters are processed differently with TypeScript than JavaScript.
TypeScript expects the same number of arguments as there are parameters.
If the number of arguments doesn’t match the number of parameters, then we’ll get errors from the compiler.
The compiler has the noUnusedParameters option to warn us if a function defines a parameter that it doesn’t use.
Optional Parameters
Function parameters are mandatory by default in TypeScript.
However, we can make them optional with the ? symbol.
For instance, we can write:
const getTax = (price: number, discount?: number) => {
return price * 0.2 - discount;
};
Then discount would be optional. price is mandatory since there’s no ? after the name.
To make sure that we don’t have unexpected results when we do calculations, we should make sure that discount is number.
We can use the || to do that:
const getTax = (price: number, discount?: number) => {
return (price * 0.2) - (discount || 0);
};
Then we don’t have to worry about discount being undefined.
Function Parameter with a Default Value
We can have a parameter with a default value. The syntax is inherited from JavaScript.
For instance, we can write:
const getTax = (price: number, discount: number = 0) => {
return price * 0.2 - discount;
};
We set discount ‘s to 0 as the default value.
Now we don’t have to check for undefined value when we call getTax .
Rest Parameter
The rest parameter is an alternative to default parameters. It allows a function to accept a variable number of arguments. They’re grouped and presented together as an array.
A function can only have one rest parameter. Also, it must be the last parameter.
For instance, we can write:
const getTax = (price: number, ...fees: number[]) => {
return price * 0.2 - fees.reduce((total, fee) => total + fee, 0);
};
fees is set to the number[] type so that we can only pass in numbers as arguments.
In the function body, we can add all the values safely without worrying that any argument is not a number.
Type Annotations for Function Parameters
Type annotations for function parameters can be added, as we can see from the previous examples, we added data annotations to parameters, including the rest parameter.
Null Parameter Values
null and undefined can be used as values of all types in TypeScript.
Therefore, we can pass in null or undefined as values of functions.
To prevent this from happening, we can use strictNullChecks to disable the use of null and undefined as values of all types.
Function Results
We can add return type data annotations so that we can return something with the type that we want.
For instance, we can write:
const getTax = (price: number, ...fees: number[]): number => {
return price * 0.2 - fees.reduce((total, fee) => total + fee, 0);
};
Now we only can only return a number.
However, it implicitly can also return undefined but this is made impossible with the type annotation for the parameters.
Conclusion
TypeScript lets us add more data type safety to JavaScript functions by adding data type annotations to parameters.
Also, we can set default values so that we won’t have undefined when we call functions without some arguments.
TypeScript will also check if the number of parameters and arguments are matched by default unless we specify a rest parameter.
