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.

Practice

1.

What does the NonNullable type do in TypeScript?

easy

A. Converts a type to a string

B. Adds null and undefined to a type

C. Removes null and undefined from a type

D. Makes a type optional

Solution

1. Step 1: Understand the purpose of NonNullable

   The NonNullable type removes null and undefined from a given type, ensuring the value is always defined.

2. Step 2: Compare options with definition

   Only Removes null and undefined from a type correctly describes this behavior; others describe different or incorrect behaviors.

3. Final Answer:

   Removes null and undefined from a type -> Option C

4. Quick Check:

   NonNullable removes null and undefined [OK]

Hint: Remember: NonNullable cuts out null and undefined [OK]

Common Mistakes:

• Thinking it adds null or undefined
• Confusing it with making types optional
• Assuming it converts types to strings

2.

Which of the following is the correct syntax to use NonNullable on a type T?

easy

A. NonNullable(T)

B. NonNullable{T}

C. NonNullable[T]

D. NonNullable<T>

Solution

1. Step 1: Recall TypeScript generic syntax

   TypeScript uses angle brackets <> to apply generic types, like NonNullable<T>.

2. Step 2: Match options with correct syntax

   NonNullable<T> uses the correct generic syntax. Options A, C, and D use incorrect brackets or parentheses.

3. Final Answer:

   NonNullable<T> -> Option D

4. Quick Check:

   Generic types use <> brackets [OK]

Hint: Use angle brackets for generics: NonNullable<T> [OK]

Common Mistakes:

• Using parentheses instead of angle brackets
• Using square brackets or curly braces
• Confusing function call syntax with type syntax

3.

What is the type of value after this code runs?

type MaybeString = string | null | undefined;
const value: NonNullable<MaybeString> = "hello";

medium

A. string

B. null | undefined

C. string | null | undefined

D. never

Solution

1. Step 1: Understand the original type

   MaybeString can be string, null, or undefined.

2. Step 2: Apply NonNullable to remove null and undefined

   Using NonNullable<MaybeString> removes null and undefined, leaving only string.

3. Final Answer:

   string -> Option A

4. Quick Check:

   NonNullable removes null and undefined, leaving string [OK]

Hint: NonNullable removes null and undefined from union types [OK]

Common Mistakes:

• Thinking the type still includes null or undefined
• Confusing NonNullable with Partial or Required
• Assuming the type becomes never

4.

Identify the error in this code snippet:

type User = { name: string | null };
type CleanUser = NonNullable<User>;

medium

A. There is no error; code is correct

B. The syntax for NonNullable is incorrect

C. NonNullable removes null from properties inside objects automatically

D. NonNullable cannot be applied to object types directly

Solution

1. Step 1: Understand what NonNullable does

   NonNullable removes null and undefined from a type itself, not from nested properties.

2. Step 2: Analyze the code

   The code is syntactically correct. NonNullable<User> results in the same type as User since User is not a union including null or undefined at the top level.

3. Final Answer:

   There is no error; code is correct -> Option A

4. Quick Check:

   Code compiles without errors [OK]

Hint: NonNullable can be applied to object types but does not clean nested properties [OK]

Common Mistakes:

• Believing NonNullable cleans nested properties automatically
• Thinking the syntax for NonNullable is incorrect
• Thinking NonNullable cannot be applied to object types

5.

Given this type, how can you create a new type NonNullUser where the email property cannot be null or undefined using NonNullable?

type User = {
  id: number;
  email: string | null | undefined;
};

hard

A. type NonNullUser = NonNullable<User>

B. type NonNullUser = { id: number; email: NonNullable<string | null | undefined> }

C. type NonNullUser = { id: number; email: string }

D. type NonNullUser = { id: number; email: string | null }

Solution

1. Step 1: Understand the goal

   We want to keep id as is, but make email exclude null and undefined.

2. Step 2: Apply NonNullable to the email property only

   Using NonNullable<string | null | undefined> on email removes null and undefined, leaving just string.

3. Step 3: Check other options

   type NonNullUser = NonNullable<User> removes null/undefined from the whole User type, which does not affect nested properties. type NonNullUser = { id: number; email: string } changes the type but does not use NonNullable. type NonNullUser = { id: number; email: string | null } still allows null.

4. Final Answer:

   type NonNullUser = { id: number; email: NonNullable<string | null | undefined> } -> Option B

5. Quick Check:

   Apply NonNullable only to the property needing it [OK]

Hint: Use NonNullable on specific properties, not whole object [OK]

Common Mistakes:

• Applying NonNullable to the whole object type
• Not removing null and undefined from email
• Changing type without NonNullable