The Widen⋖Type⋗

Technical

The Widen<Type>

8/18/2021

··

Rahul Tarak

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.

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

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

// 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

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

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

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