How to get the properties and methods of a single type when using union type on a variable in TypeScript?
Tags: typescript
Published: 2021-09-22 00:00:00

---
  title: How to get the properties and methods of a single type when using union type on a variable in TypeScript?
  published: true
  tags: TypeScript
  date: Wed Sep 22 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/get-properties-methods-single-type-when-using-union-types-variable-typescript
  cover_image: https://melvingeorge.me/_next/static/images/main-1bbddb362d7f5a994bfd8cd4c08ea58e.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/get-properties-methods-single-type-when-using-union-types-variable-typescript)
  
In TypeScript, a [Union Type](https://melvingeorge.me/blog/set-more-than-one-type-variable-typescript) is made by combining more than one type. So to access or get the properties and method of a single type when using union type on a variable, we have to narrow the variable type we need using an `if conditional statement check` and by using the `typeof` operator to check the type of the variable value in TypeScript.

This process is also called `Narrowing types` in TypeScript.

### TL;DR

```ts
// union type declaration
let nums: string | number;

// Dynamically assign value to the variable nums
// In real life this would be a value from an API response
// Here we are just emulating the setting of the value
nums = true ? "Hello" : 1000;

if (typeof nums === "string") {
  // now we can access string type
  // methods and propreties here

  const upperCase = nums.toUpperCase(); // toUpperCase() method is a string type method
  console.log(upperCase); // HELLO
} else {
  // we can access the number type
  // methods and properties here

  const precision = nums.toPrecision(2); // toPrecision() method is a number type method
  console.log(precision); // 1.0e+3
}
```

For example, let's consider a variable called `nums` which has a union type made of both the `string` type and the `number` type like this,

```ts
// union type declaration
let nums: string | number;
```

Now let's try to use the methods and properties available to us in the `nums` variable. If you are using `VSCode` as your code editor then it may show a autocomplete dropdown showing the methods and properties available to us like this,

![common methods and properties available in nums variable since it uses the union type composed of string and number type](https://melvingeorge.me/_next/static/images/common-methods-properties-available-nums-variable-8ecbadc097e9b4bc99947f414fd8e6dc.png)

As you can see from the above image that there are only 3 methods that the `VSCode` editor's autocomplete dropdown is showing. This is because the `nums` variable has a union type which is composed of both the `string` and the `number` type and thus it can only show the methods and properties common (or union) to both the `string` and the `number` type.

But what if we need the methods and properties of `string` type. To do that we have to narrow down the type of the variable `nums` using a `conditional statement check`.

To do that let's use an `if conditional statement check` and use the `typeof` operator to check if the variable value is of type `string` like this,

```ts
// union type declaration
let nums: string | number;

nums = "Hello";

if (typeof nums === "string") {
  // now we can access string type
  // methods and propreties here
  const upperCase = nums.toUpperCase(); // toUpperCase() method is a string type method
  console.log(upperCase); // HELLO
}
```

As you can see from the above code that the TypeScript compiler allowed us to use the `toUpperCase()` `string` type method inside the `if` block since we have checked to see if the variable value is of type `string` before getting into the `if` block.

Now if we add an `else` block to the above `if` condition, the TypeScript compiler is intelligent to know that the other type we can use is the `number` type. So let's try to access one of the methods of the `number` type in the `else` block like this,

```ts
// union type declaration
let nums: string | number;

// Dynamically assign value to the variable nums
// In real life this would be a value from an API response
// Here we are just emulating the setting of the value
nums = true ? "Hello" : 1000;

if (typeof nums === "string") {
  // now we can access string type
  // methods and propreties here

  const upperCase = nums.toUpperCase(); // toUpperCase() method is a string type method
  console.log(upperCase); // HELLO
} else {
  // we can access the number type
  // methods and properties here

  const precision = nums.toPrecision(2); // toPrecision() method is a number type method
  console.log(precision); // 1.0e+3
}
```

As you can see from the above code that the TypeScript compiler allowed us to use the `toPrecision()` `number` type method on the else block which is what we want to happen.

This means we have successfully type-checked against every possible scenario which may occur during the runtime of the program 🎉.

See the above code live in [codesandbox](https://codesandbox.io/s/access-properties-and-methods-of-a-single-type-when-using-union-type-in-typescript-2olre?file=/src/index.ts).

That's all 😃!

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

---