paint-brush
How the TypeScript NonNullable Type Worksby@smpnjn
2,119 reads
2,119 reads

How the TypeScript NonNullable Type Works

by Johnny SimpsonApril 29th, 2022
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

The NonNullable type is a utility type in TypeScript that creates a new type, while removing all null or undefined elements. It lets us take existing types, and modify them so they are more suitable in certain situations. Let's look at how it works.
featured image - How the TypeScript NonNullable Type Works
Johnny Simpson HackerNoon profile picture

The NonNullable type is a utility type in TypeScript that creates a new type, while removing all null or undefined elements. It lets us take existing types, and modify them so they are more suitable in certain situations. Let's look at how it works.

Custom Types

This article covers custom types. To learn more about custom types, read my guide about it here.

NonNullable Utility Type

The NonNullable utility type works a lot like other utility types, in that it can take an existing type, and modify it as you see fit. As an example, let's say we have a specific union type that accepts null and undefined as potential options:


type myType = string | number | null | undefined


This example works great in one example, but there is another part of our code where we don't want to accept null or undefined. We could create a new type for that, or we could reuse myType, using NonNullable:


type myType = string | number | null | undefined

type noNulls = NonNullable<myType>


In the above example, noNulls is now of type string | number.


Also Here