How to work or perform operations on function parameter variables with union type in TypeScript?
Tags: typescript
Published: 2021-11-09 00:00:00

---
  title: How to work or perform operations on function parameter variables with union type in TypeScript?
  published: true
  tags: TypeScript
  date: Tue Nov 09 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/work-or-perform-operations-function-parameter-variables-with-union-type-typescript
  cover_image: https://melvingeorge.me/_next/static/images/main-58c8d7d6d672736fada7999969196bed.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/work-or-perform-operations-function-parameter-variables-with-union-type-typescript)
  
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

```ts
// 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,

```ts
// 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.

```ts
// 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,

```ts
// 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,

```ts
// 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](https://codesandbox.io/s/work-or-perform-operations-function-parameter-variables-with-union-type-typescript-ofhvs?file=/src/index.ts).

That's all 😃!

### Feel free to share if you found this useful 😃.

---