Null and undefined types in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a variable that can only be null.

Typescript

let value: [1] = null;

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

Anull

Bundefined

Cstring

Dnumber

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'undefined' instead of 'null' for a variable assigned null.

Using 'string' or 'number' which do not accept null values.

The type null allows the variable to hold only the null value.

2fill in blank

medium

Complete the code to declare a variable that can be either a string or undefined.

Typescript

let name: [1];

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

Astring | null

Bundefined

Cstring | undefined

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'string | null' when the variable should allow undefined.

Using only 'undefined' which excludes string values.

The union type string | undefined allows the variable to hold a string or be undefined.

3fill in blank

hard

Fix the error in the function parameter type to accept null or string.

Typescript

function greet(message: [1]) {
  console.log(message);
}

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

Astring

Bstring | null

Cnull

Dundefined

Attempts:

3 left

💡 Hint

Common Mistakes

Using only 'string' which rejects null values.

Using 'null' alone which rejects string values.

The parameter type string | null allows the function to accept either a string or null value.

4fill in blank

hard

Fill both blanks to create a variable that can be a number, null, or undefined.

Typescript

let count: [1] [2] null | undefined;

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

Anumber

B|

C&

Dstring

Attempts:

3 left

💡 Hint

Common Mistakes

Using '&' which means intersection, not union.

Using 'string' which is not part of the allowed types.

The union type number | null | undefined allows the variable to hold a number, null, or undefined.

5fill in blank

hard

Fill all three blanks to define a function that returns a string or undefined and accepts a nullable string parameter.

Typescript

function process(input: [1]): [2] [3] undefined {
  if (input === null) return undefined;
  return input.toUpperCase();
}

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

Astring | null

Bstring

C|

Dundefined

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'string' alone for parameter or return type, which excludes null or undefined.

Using '&' instead of '|' for union types.

The parameter type string | null allows null or string input. The return type string | undefined allows returning a string or undefined.

Practice

1. What does null represent in TypeScript?

easy

A. A variable that has not been declared

B. A variable that holds a number zero

C. A variable that is still loading

D. A variable that has no value assigned

Solution

1. Step 1: Understand the meaning of null

   null means a variable explicitly has no value.

2. Step 2: Compare with other options

   The incorrect options describe different states or values, not null.

3. Final Answer:

   A variable that has no value assigned -> Option D

4. Quick Check:

   null means no value [OK]

Hint: Remember: null means no value assigned [OK]

Common Mistakes:

• Confusing null with undefined
• Thinking null means variable is undeclared
• Assuming null means zero or empty string

2. Which of the following is the correct way to declare a variable that can hold a string or null in TypeScript?

easy

A. let name: string | null;

B. let name: string & null;

C. let name: string or null;

D. let name: string? null;

Solution

1. Step 1: Recall union type syntax

   In TypeScript, the pipe | is used to allow multiple types.

2. Step 2: Check each option

   let name: string | null; uses | correctly. The other options use invalid syntax.

3. Final Answer:

   let name: string | null; -> Option A

4. Quick Check:

   Union types use | symbol [OK]

Hint: Use | to combine types like string | null [OK]

Common Mistakes:

• Using & instead of | for union types
• Writing 'or' instead of |
• Using invalid syntax like ? null

3. What will be the output of this TypeScript code?

let value: number | undefined;
console.log(value);

medium

A. undefined

B. null

C. 0

D. Error: Variable not initialized

Solution

1. Step 1: Understand variable initialization

   The variable value is declared but not assigned, so it defaults to undefined.

2. Step 2: Check console.log output

   Logging value prints undefined because it has no assigned value.

3. Final Answer:

   undefined -> Option A

4. Quick Check:

   Unassigned variable = undefined [OK]

Hint: Uninitialized variables print undefined [OK]

Common Mistakes:

• Expecting null instead of undefined
• Assuming default is zero
• Thinking it causes an error

4. Identify the error in this TypeScript code:

let age: number;
age = null;

medium

A. No error, code is correct

B. Variable age is not declared

C. Cannot assign null to a variable of type number

D. Missing semicolon after declaration

Solution

1. Step 1: Check variable type and assignment

   age is declared as number only, so it cannot hold null.

2. Step 2: Understand TypeScript strict null checks

   By default, null is not assignable to number unless union type includes null.

3. Final Answer:

   Cannot assign null to a variable of type number -> Option C

4. Quick Check:

   Assigning null to number causes error [OK]

Hint: Add | null to allow null assignment [OK]

Common Mistakes:

• Ignoring TypeScript strict null checks
• Thinking null is allowed by default
• Confusing missing semicolon as error

5. How can you declare a function parameter in TypeScript that accepts either a string, null, or undefined?

hard

A. function greet(name?: string & null) { console.log(name); }

B. function greet(name: string | null | undefined) { console.log(name); }

C. function greet(name: string & null & undefined) { console.log(name); }

D. function greet(name: string | null?) { console.log(name); }

Solution

1. Step 1: Understand union types for parameters

   To accept multiple types, use | to combine them.

2. Step 2: Analyze each option

   function greet(name: string | null | undefined) { console.log(name); } correctly uses string | null | undefined. function greet(name: string & null & undefined) { console.log(name); } uses & which means intersection (not correct). function greet(name?: string & null) { console.log(name); } uses & which means intersection (not correct). function greet(name: string | null?) { console.log(name); } has invalid syntax.

3. Final Answer:

   function greet(name: string | null | undefined) { console.log(name); } -> Option B

4. Quick Check:

   Use | to allow multiple types in parameters [OK]

Hint: Use | to combine string, null, and undefined types [OK]

Common Mistakes:

• Using & instead of | for union types
• Confusing optional parameter with undefined union
• Writing invalid syntax like null?