Remove Null and Undefined from a Type in TypeScript

# Remove Null and Undefined from a Type in TypeScript

Use the NonNullable utility type to remove null and undefined from a type in TypeScript.

The NonNullable utility type constructs a new type with null and undefined excluded from the type.

index.ts

Copied!
type Salary = null | undefined | number;

// 👇️ type T0 = number
type T0 = NonNullable<Salary>;

remove null and undefined from type

The code for this article is available on GitHub

The NonNullable utility type excludes null and undefined from the passed-in type.

index.ts

Copied!
type Name = null | undefined | string;

// 👇️ type T2 = string
type T2 = NonNullable<Name>;

The union in the example consists of null, undefined and string.

Once passed to the NonNullable utility type, the result only has a type of string.

All of the non-nullable types are preserved in the result.

index.ts

Copied!
type Employees = null | undefined | string | string[];

// 👇️ type T2 = string | string[]
type T2 = NonNullable<Employees>;

# Using the `NonNullable` type recursively

However, in some situations, you might need to use the NonNullable type recursively, to make all of the keys in a type non-nullable.

index.ts

Copied!
type WithoutNullableKeys<Type> = {
  [Key in keyof Type]-?: WithoutNullableKeys<NonNullable<Type[Key]>>;
};

type Employee = {
  name?: string | null;
  country?: string | null;
  salary?: number | null;
};

// 👇️ type T1 = {
//     name: string;
//     country: string;
//     salary: number;
//    }
type T1 = WithoutNullableKeys<Employee>;

using non nullable type recursively

The code for this article is available on GitHub

The -? syntax is called a mapping modifier and is used to set the attributes of a type to required (remove optionality).

index.ts

Copied!
type Employee = {
  name?: string | null;
  country?: string | null;
  salary?: number | null;
};

type Concrete<Type> = {
  [Key in keyof Type]-?: Type[Key];
};

// 👇️ type T2 = {
//     name: string | null;
//     country: string | null;
//     salary: number | null;
// }
type T2 = Concrete<Employee>;

The example shows how the Concrete type makes all of the keys in Employee required.

This approach can also be used to remove null and undefined from an interface.

index.ts

Copied!
type WithoutNullableKeys<Type> = {
  [Key in keyof Type]-?: WithoutNullableKeys<NonNullable<Type[Key]>>;
};

interface Employee {
  name?: string | null;
  country?: string | null;
  salary?: number | null;
}

// 👇️ type T1 = {
//     name: string;
//     country: string;
//     salary: number;
//    }
type T1 = WithoutNullableKeys<Employee>;

I've also written an article on how to set a default value if null or undefined in TS.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Remove Null and Undefined from a Type in TypeScript