Whenever you need to work or perform operations on function parameter variables with a union type, you need to narrow down or simplify the type from the union type you need to perform the operation on. This is process is called Narrowing in TypeScript.
TL;DR
// A simple function that adds 100 to the number
// we provided as an argument to the function
function add100ToNumber(num: string | number) {
// Narrowing Types:
// check if "num" parameter value is of type "number"
if (typeof num === "number") {
return num + 100;
} else {
// then check if "num" parameter value is of type "string"
// then convert string to number type
return Number(num) + 100;
}
}
// call the function with
// both the string and number values
// and both will be valid since we have
// added checks for both the types inside
add100ToNumber("100"); // ✅ valid. returns: 200
add100ToNumber(200); // ✅ also valid. returns: 300
For example, let's say we have a function called add100ToNumber() with a parameter called num which has a union type composed of both the string and the number type.
When calling the function, we have to add 100 to the number we provided to the function as an argument. It may be a string or number.
It can be done like this,
// function that adds 100 to the number
// we provided as an argument to the function
function add100ToNumber(num: string | number) {
return num + 100;
}
Now you may think this would work fine. But in the TypeScript world, this would be an error saying Operator '+' cannot be applied to types 'string | number' and 'number'..
What the error is saying is that you cannot directly add the number 100 to the function parameter num which has a union type composed of both the string and number types. At this point, the TypeScript compiler is confused about which type to use. We have a string type and a number type to deal with.
// function that adds 100 to the number
// we provided as an argument to the function
function add100ToNumber(num: string | number) {
return num + 100; // 🔴 Error. Operator '+' cannot be applied to types 'string | number' and 'number'.
}
So to remove the error we have to Narrow types in TypeScript. What it means is that we have to check to see if the parameter num type is a string or number type and then do the appropriate operations on it.
First let's check to see if the num parameter value is of number type. To do that we can use an if conditional statement and check the type using the typeof operator like this,
// function that adds 100 to the number
// we provided as an argument to the function
function add100ToNumber(num: string | number) {
// Narrowing Types:
// check if "num" parameter value is of type "number"
if (typeof num === "number") {
return num + 100;
}
}
Inside the if block we add the number 100 to the num parameter and return it.
After checking for the number type, now we have to check for the case when the num parameter value is a string type. If it is a string type value then we would have to convert the string to a number type to do the addition with the number 100.
It can be done like this,
// function that adds 100 to the number
// we provided as an argument to the function
function add100ToNumber(num: string | number) {
// Narrowing Types:
// check if "num" parameter value is of type "number"
if (typeof num === "number") {
return num + 100;
} else {
// then check if "num" parameter value is of type "string"
// then convert string to number type
return Number(num) + 100;
}
}
// call the function with
// both the string and number values
// and both will be valid since we have
// added checks for both the types inside
add100ToNumber("100"); // ✅ valid. returns: 200
add100ToNumber(200); // ✅ also valid. returns: 300
Now we have successfully removed the errors and added correct checks for every type in the num parameter in the add100ToNumber function. 🎉
See the above code live in codesandbox.
That's all 😃!