A utility type for widening types
Tags: typescript, generics
Published: 2021-08-18 00:00:07

---
title: A utility type for widening types
published: true
description: How to widen or unwrap a type in typescript
tags: typescript, generics
canonical_url: https://cryogenicplanet.tech/posts/the-widen-type
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lp0kp3k87n65q099fjh5.png
---

I love typescript, it makes my life super easy and makes my dev experience far superior. That said one gripe I've always had in complex typescript codebase is with nested types, especially using things like `Pick` or `Omit` you had to check the type definition, 4-5 levels deep to actually know what the type is, this can be quite annoying.

Recently I found a solution a great solution to this called Type Widening and it can be super easily implemented.

If you just want the basic type, here you go.  That said I will break down how this works and how you can improve it below. You can also find a more advanced version of this with recursion and enum guards at bottom of the post.

```tsx
export type ToPrimitive<T> = 
  : T extends string
  ? string
  : T extends number
  ? number
  : T extends boolean
  ? boolean
  : T extends (..._args: any[]) => any
  ? (..._args: Parameters<T>) => ReturnType<T>
  : T

/**
 * Expands a type so you can nicely seem the primitives
 */
export type Widen<T> = {
  [key in keyof T]: ToPrimitive<T[key]>
}
```

## Usage

Usage is very simple just wrap the type you want with `Widen<MyType>` below is an embedded example which allows you to hover over the two types to see the difference


{% stackblitz cigjok file=index.ts view=editor %} 


## Extending the use of Widen

### Enums

We use `Enum` quite a bit in our codebase and unfortunately there is no `T extends enum` in typescript, so to hack around it you much create a Blacklist type which you can skip over

```tsx
// Unfortunately this is the only way I could find right now
type EnumBlackList = DogBread | CatBread | OtherEnums 
```

### Recursion

We can modify `ToPrimitive` to make it recursive like this

```tsx
type ToPrimitive<T> = T extends string
  ? string
  : T extends number
  ? number
  : T extends boolean
  ? boolean
  : T extends (..._args: any[]) => any
  ? (..._args: Parameters<T>) => ReturnType<T>:
	T extends object // Check if object and call itself
	? { [key in keyof T]: ToPrimitive<T[key]> }
  : T;
```

You can play with a demo below, which has all three different iterations setup for you

{% stackblitz gh5zni file=index.ts view=editor %} 

## How it works

Not going into too much detail here, just a brief summary 

This uses a combination of unity types from Typescript with conditional types to enable this

`T extends string` checks if the type is based on type string, which can be used as a conditional check. This allows us to check our base primitives like `string` `number` and `boolean`

To add support for functions, we need to check if the type has the structure of a function which we are doing by checking `T extends (...args: any[]) => any`  Then we are returning the function with its correct parameters and return type using the `Parameter` and `ReturnType` utility type

## Final Type

```tsx
type EnumBlacklist = // your enums go here like Enum1 | Enum2 | Enum 3

type Widen<T> = { [key in keyof T]: ToPrimitive<T[key]> };

type ToPrimitive<T> = 
	T extends EnumBlackList ? T :
	T extends string
  ? string
  : T extends number
  ? number
  : T extends boolean
  ? boolean
  : T extends (..._args: any[]) => any
  ? (..._args: Parameters<T>) => ReturnType<T>
	T extends object
	? { [key in keyof T]: ToPrimitive<T[key]> }
  : T;

type Test = Widen<MyType>
```

Feel free to email me any questions or suggestion on how I can improve this type or post at rahul@modfy.video