Part of Series: TypeScript Utility Types

How the TypeScript NonNullable Type Works

πŸ“£ Sponsor

The NonNullable is a utility type in TypeScript which creates a new type, whilst 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 type 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 which 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.

Last Updated 1651162125831

More Tips and Tricks for Typescript

Subscribe for Weekly Dev Tips

Subscribe to our weekly newsletter, to stay up to date with our latest web development and software engineering posts via email. You can opt out at any time.

Not a valid email