NonNullable type in Typescript - Step-by-Step Execution

Concept Flow - NonNullable type

Start with a type T

↓

Check each member of T

↓

Is member null or undefined?

Yes→Remove it

No↓

Keep member

↓

Result: Type without null or undefined

NonNullable removes null and undefined from a type, leaving only the usable parts.

Execution Sample

Typescript

type Example = string | number | null | undefined;
type Clean = NonNullable<Example>;

let a: Clean = "hello";
let b: Clean = 42;
// let c: Clean = null; // Error
// let d: Clean = undefined; // Error

This code removes null and undefined from Example, so Clean only allows string or number.

Execution Table

Step	Type Member	Is null or undefined?	Action	Resulting Type Members
1	string	No	Keep	string
2	number	No	Keep	string | number
3	null	Yes	Remove	string | number
4	undefined	Yes	Remove	string | number
5	End	-	-	string | number

💡 All members checked; null and undefined removed, leaving string | number

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	Final
Type Members	string | number | null | undefined	string	string | number	string | number	string | number	string | number

Key Moments - 2 Insights

Why can't we assign null or undefined to a NonNullable type variable?

Because NonNullable removes null and undefined from the type, so those values are not allowed. See execution_table rows 3 and 4 where null and undefined are removed.

Does NonNullable change the original type or create a new one?

It creates a new type without null and undefined, leaving the original type unchanged. The variable_tracker shows the transformation step by step.

Visual Quiz - 3 Questions

Look at the execution_table, what is the resulting type after step 2?

A string | number

B string

C null

D undefined

💡 Hint

Check the 'Resulting Type Members' column at step 2 in the execution_table.

At which step are null and undefined removed from the type?

A Step 1 and 2

B Step 3 and 4

C Step 5

D None

💡 Hint

Look at the 'Is null or undefined?' column in execution_table rows 3 and 4.

If the original type was only string | null, what would NonNullable<string | null> be?

A string | null

B null

C string

D string | undefined

💡 Hint

NonNullable removes null, so only string remains.

Concept Snapshot

NonNullable<T> removes null and undefined from type T.
Use it to ensure variables can't be null or undefined.
Syntax: type Clean = NonNullable<OriginalType>;
Result: Clean has only non-nullable members.
Useful for safer code and avoiding runtime errors.

Full Transcript

The NonNullable type in TypeScript takes a type T and removes null and undefined from it. This means if you have a type like string | number | null | undefined, applying NonNullable will give you string | number only. Step by step, each member is checked: if it is null or undefined, it is removed; otherwise, it is kept. This creates a new type without null or undefined. Variables of this new type cannot be assigned null or undefined values, helping prevent errors. The original type remains unchanged. This is useful when you want to be sure a value is always present and not null or undefined.