NonNullable type in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to remove null and undefined from the type using NonNullable.

Typescript

type CleanType = NonNullable<[1]>;

Drag options to blanks, or click blank then click option'

Anull | undefined

Bnumber | null

Cstring | null | undefined

Dboolean | undefined

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing a type that does not include both null and undefined.

Confusing NonNullable with Partial or Required.

The NonNullable type removes null and undefined from the given type. Here, it removes them from string | null | undefined, leaving just string.

2fill in blank

medium

Complete the code to define a variable that cannot be null or undefined using NonNullable.

Typescript

let value: NonNullable<[1]> = "hello";

Drag options to blanks, or click blank then click option'

Astring | undefined

Bstring | null | undefined

Cstring | null

Dstring

Attempts:

3 left

💡 Hint

Common Mistakes

Using a type that only has null or only undefined, not both.

Trying to assign null or undefined to the variable.

The type string | null | undefined includes both null and undefined. Using NonNullable removes these, so value can only be a string.

3fill in blank

hard

Fix the error in the code by using NonNullable correctly.

Typescript

function greet(name: [1]) {
  console.log(`Hello, ${name}!`);
}
greet(null);

Drag options to blanks, or click blank then click option'

ANonNullable<string | null>

Bstring | undefined

Cstring | null

Dstring

Attempts:

3 left

💡 Hint

Common Mistakes

Using just string | null which allows null.

Using string without considering the original type.

The function parameter name should not accept null. Using NonNullable removes null, so the function only accepts strings.

4fill in blank

hard

Fill both blanks to create a type that excludes null and undefined from a union type.

Typescript

type Cleaned = NonNullable<[1] | [2]>;

Drag options to blanks, or click blank then click option'

Astring

Bnull

Cundefined

Dnumber

Attempts:

3 left

💡 Hint

Common Mistakes

Using undefined instead of null in the union.

Putting both blanks as normal types.

The union string | null includes null. Using NonNullable removes null, leaving just string.

5fill in blank

hard

Fill all three blanks to define a variable type that excludes null and undefined from a union.

Typescript

let data: NonNullable<[1] | [2] | [3]>;

Drag options to blanks, or click blank then click option'

Astring

Bnull

Cundefined

Dboolean

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving out either null or undefined in the union.

Trying to assign null or undefined to the variable.

The union string | null | undefined includes both null and undefined. Using NonNullable removes these, so data can only be a string.