Null and undefined types in Typescript - Mini Project: Build & Apply

Understanding Null and Undefined Types in TypeScript

📖 Scenario: Imagine you are building a simple user profile system. Sometimes, users may not provide their middle name or phone number. You need to handle these cases safely in your code.

🎯 Goal: You will create variables that can hold null or undefined values and learn how to check and use them properly in TypeScript.

📋 What You'll Learn

Create variables with explicit types that allow null and undefined

Assign null and undefined to these variables

Use conditional checks to handle null and undefined safely

Print the results to show how the program handles missing values

💡 Why This Matters

🌍 Real World

Handling missing or optional user information is common in real applications like forms and profiles.

💼 Career

Understanding null and undefined types helps prevent errors and bugs in TypeScript code, a valuable skill for frontend and backend developers.

1

Create variables with null and undefined types

Create a variable called middleName with type string | null and assign it the value null. Also, create a variable called phoneNumber with type string | undefined and assign it the value undefined.

Typescript

# Create variables middleName and phoneNumber with null and undefined types
# Your code here

Hint

Use the union type with | to allow null or undefined values.

2

Add a user name variable

Create a variable called userName with type string and assign it the value "Alice".

Typescript

let middleName: string | null = null;
let phoneNumber: string | undefined = undefined;
# Create a variable userName with value "Alice"
# Your code here

Hint

Just create a normal string variable for the user name.

3

Check for null and undefined values

Write an if statement that checks if middleName is not null and prints "Middle name: " plus the value. Otherwise, print "No middle name provided". Then write another if statement that checks if phoneNumber is not undefined and prints "Phone number: " plus the value. Otherwise, print "No phone number provided".

Typescript

let middleName: string | null = null;
let phoneNumber: string | undefined = undefined;
let userName: string = "Alice";
# Check middleName and phoneNumber for null or undefined and print messages
# Your code here

Hint

Use strict inequality !== to check for null and undefined.

4

Print the user name

Write a console.log statement to print "User name: " plus the value of userName.

Typescript

let middleName: string | null = null;
let phoneNumber: string | undefined = undefined;
let userName: string = "Alice";

if (middleName !== null) {
    console.log("Middle name: " + middleName);
} else {
    console.log("No middle name provided");
}

if (phoneNumber !== undefined) {
    console.log("Phone number: " + phoneNumber);
} else {
    console.log("No phone number provided");
}

# Print the userName below
# Your code here

Hint

Use console.log("User name: " + userName) to print the user name.

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?