NonNullable type in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of filtering with NonNullable?

Consider the following TypeScript code using the NonNullable utility type. What will be the output when the code runs?

Typescript

type CleanString = NonNullable<string | null | undefined>;

const values: (string | null | undefined)[] = ["hello", null, "world", undefined];

const filtered: CleanString[] = values.filter((v): v is CleanString => v !== null && v !== undefined);

console.log(filtered);

A ["hello", "world"]

B ["hello", null, "world", undefined]

C [null, undefined]

D TypeError at runtime

💡 Hint

Think about what NonNullable removes from the union type and how the filter works.

The NonNullable type removes null and undefined from the union. The filter function keeps only values that are not null or undefined, so the resulting array contains only strings.

🧠 Conceptual

intermediate

What does NonNullable do in TypeScript?

Choose the best description of what the NonNullable utility type does.

A It makes all properties of T required.

B It adds null and undefined to the type T.

C It converts T to a string type.

D It removes null and undefined from the type T.

💡 Hint

Think about what values are excluded by NonNullable.

NonNullable creates a type by excluding null and undefined from T, so the resulting type cannot be null or undefined.

🔧 Debug

advanced

Why does this code cause a type error?

Look at this TypeScript code snippet. Why does it cause a type error?

Typescript

function processValue(value: string | null | undefined) {
  const safeValue: NonNullable<string | null | undefined> = value;
  console.log(safeValue.toUpperCase());
}

processValue(null);

A There is no error; the code runs fine.

B Assigning 'value' directly to 'safeValue' is invalid because 'value' can be null or undefined.

C Calling toUpperCase on safeValue is invalid because safeValue is not a string.

D The function processValue cannot accept null as an argument.

💡 Hint

Consider the types of 'value' and 'safeValue' and what NonNullable means.

The variable 'value' can be null or undefined, but 'safeValue' must be a non-nullable string. Assigning 'value' directly to 'safeValue' without checking causes a type error.

📝 Syntax

advanced

Which option correctly uses NonNullable in a type alias?

Which of the following TypeScript type aliases correctly uses NonNullable to exclude null and undefined from a union type?

A type NoNull = NonNullable<string | number | null | undefined>;

B type NoNull = NonNullable<string | number | null | undefined) ;

C type NoNull = NonNullable<string | number | null | undefined;

D type NoNull = NonNullable<string | number | null | undefined> => string | number;

💡 Hint

Check for correct syntax of type alias and NonNullable usage.

Option A correctly defines a type alias using NonNullable with proper syntax. Other options have syntax errors like missing parentheses or invalid arrow usage.

🚀 Application

expert

How many items are in the resulting array after applying NonNullable filter?

Given this TypeScript code, how many items will the 'cleaned' array contain after filtering?

Typescript

const mixed: (string | null | undefined | number)[] = ["a", null, 5, undefined, "b", 0];

const cleaned: NonNullable<(string | null | undefined | number)[]> = mixed.filter((item): item is NonNullable<typeof item> => item !== null && item !== undefined);

console.log(cleaned.length);

A 6

B 3

C 4

D 2

💡 Hint

Count how many items are not null or undefined in the array.

The array has 6 items: "a", null, 5, undefined, "b", 0. Filtering out null and undefined leaves "a", 5, "b", 0, which is 4 items.