Strict null checks and safety in Typescript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does enabling strictNullChecks in TypeScript do?

It makes TypeScript treat null and undefined as distinct types that must be explicitly handled, preventing accidental errors from uninitialized or missing values.

beginner

How do you safely access a property of an object that might be null or undefined in TypeScript with strict null checks?

You can use the optional chaining operator ?. to safely access properties without causing runtime errors if the object is null or undefined.

beginner

What is a common way to provide a fallback value when a variable might be null or undefined?

Use the nullish coalescing operator ?? to provide a default value only when the variable is null or undefined.

intermediate

Why is it safer to enable strictNullChecks compared to having it disabled?

Because it forces you to handle null and undefined explicitly, reducing bugs caused by unexpected missing values and improving code reliability.

beginner

What TypeScript type can represent a variable that might be a string or might be null?

You can use a union type like string | null to explicitly say the variable can hold either a string or null.

What happens if you try to assign null to a variable of type string with strictNullChecks enabled?

A TypeScript shows an error.

B It works without any error.

C The variable becomes <code>undefined</code>.

D The code compiles but throws a runtime error.

With strictNullChecks enabled, null is not assignable to string unless explicitly allowed.

Which operator safely accesses a property of an object that might be null or undefined?

A ??

B !!

C ?.

D ||

The optional chaining operator ?. safely accesses properties without errors if the object is null or undefined.

What does the nullish coalescing operator ?? do?

A Throws an error if the value is <code>null</code>.

B Returns the right value if the left is falsy.

C Checks if a value is <code>null</code>.

D Returns the right value if the left is <code>null</code> or <code>undefined</code>.

The ?? operator returns the right side only if the left side is null or undefined.

Which TypeScript setting enables strict null checks?

A strictNullChecks

B noImplicitAny

C noUnusedLocals

D allowJs

The strictNullChecks compiler option enables strict checking of null and undefined.

If a variable is declared as string | null, what must you do before using it as a string?

A Use it directly without checks.

B Check if it is not <code>null</code>.

C Assign it to <code>undefined</code>.

D Convert it to a number.

You must check the variable is not null before using it as a string to avoid errors.

Explain how strictNullChecks improves safety in TypeScript code.

Think about how TypeScript treats missing values with this setting.

Describe how to safely access a property of an object that might be null or undefined.

Consider the operator that stops property access if the object is missing.

Practice

1.

What does enabling strictNullChecks in TypeScript do?

easy

A. It allows assigning null to any type without errors.

B. It automatically converts all null values to empty strings.

C. It disables type checking for null and undefined.

D. It forces you to explicitly handle null and undefined values.

Solution

1. Step 1: Understand strictNullChecks purpose

   Enabling strictNullChecks makes TypeScript require explicit handling of null and undefined values to avoid runtime errors.

2. Step 2: Analyze options

   Only It forces you to explicitly handle null and undefined values. correctly describes this behavior. Options B, C, and D are incorrect because they describe behaviors that strictNullChecks does not do.

3. Final Answer:

   It forces you to explicitly handle null and undefined values. -> Option D

4. Quick Check:

   strictNullChecks = explicit null handling [OK]

Hint: Remember: strictNullChecks means no silent nulls [OK]

Common Mistakes:

• Thinking nulls are automatically converted
• Assuming null checks are disabled
• Believing null can be assigned anywhere

2.

Which of the following is the correct way to check for null or undefined before accessing a variable value in TypeScript with strictNullChecks enabled?

let value: string | null | undefined;

easy

A. if (value !== null && value !== undefined) { console.log(value.length); }

B. if (value) { console.log(value.length); }

C. console.log(value.length);

D. if (value == null) { console.log(value.length); }

Solution

1. Step 1: Understand null and undefined checks

   With strictNullChecks, you must check both null and undefined explicitly before accessing properties.

2. Step 2: Evaluate each option

   if (value !== null && value !== undefined) { console.log(value.length); } correctly checks both null and undefined. if (value) { console.log(value.length); } may fail if value is an empty string. console.log(value.length); causes an error. if (value == null) { console.log(value.length); } checks for null but then accesses length inside the if, which is incorrect logic.

3. Final Answer:

   if (value !== null && value !== undefined) { console.log(value.length); } -> Option A

4. Quick Check:

   Check both null and undefined explicitly [OK]

Hint: Use !== null && !== undefined to be safe [OK]

Common Mistakes:

• Using only if(value) which fails on empty strings
• Accessing properties without checks
• Using == null but then accessing inside that block

3.

What will be the output of the following TypeScript code with strictNullChecks enabled?

function greet(name: string | null) {
  if (name === null) {
    return "Hello, guest!";
  }
  return `Hello, ${name.toUpperCase()}!`;
}

console.log(greet(null));
console.log(greet("alice"));

medium

A. "Hello, null!" and "Hello, ALICE!"

B. "Hello, guest!" and "Hello, ALICE!"

C. Compilation error due to missing null check

D. Runtime error on null input

Solution

1. Step 1: Analyze null check in function

   The function checks if name === null and returns "Hello, guest!" in that case, so it safely handles null.

2. Step 2: Check outputs for calls

   Calling greet(null) returns "Hello, guest!". Calling greet("alice") returns "Hello, ALICE!" because toUpperCase() is called on a string.

3. Final Answer:

   "Hello, guest!" and "Hello, ALICE!" -> Option B

4. Quick Check:

   Null check prevents errors, outputs as expected [OK]

Hint: Check null before using string methods [OK]

Common Mistakes:

• Expecting runtime error on null
• Thinking compilation error occurs
• Ignoring null check and causing error

4.

Identify the error in this TypeScript code with strictNullChecks enabled and suggest a fix:

function printLength(text: string | null) {
  console.log(text.length);
}

medium

A. Error: Object is possibly 'null'. Fix: Add a null check before accessing length.

B. Error: Missing return type. Fix: Add : void to function.

C. Error: text should be string only. Fix: Remove null from type.

D. No error. Code is correct.

Solution

1. Step 1: Identify the error

   Accessing text.length without checking if text is null causes a compile error under strictNullChecks.

2. Step 2: Suggest fix

   Add a check like if (text !== null) before accessing length to ensure safety.

3. Final Answer:

   Error: Object is possibly 'null'. Fix: Add a null check before accessing length. -> Option A

4. Quick Check:

   Always check null before property access [OK]

Hint: Add null checks before property access [OK]

Common Mistakes:

• Ignoring null check and expecting no error
• Changing type instead of fixing code
• Thinking return type causes error

5.

Given this TypeScript function with strictNullChecks enabled, which modification safely handles undefined and null inputs without errors?

function formatName(name: string | null | undefined) {
  return name.toUpperCase();
}

hard

A. Use non-null assertion: return name!.toUpperCase();

B. Change parameter type to string only and remove null and undefined.

C. Add a check: if (name == null) return "Unknown"; before calling toUpperCase().

D. Remove strictNullChecks from tsconfig.

Solution

1. Step 1: Identify unsafe code

   Calling toUpperCase() on name without checking for null or undefined causes errors with strictNullChecks.

2. Step 2: Evaluate options for safety

   Add a check: if (name == null) return "Unknown"; before calling toUpperCase(). adds a check for both null and undefined (using == null) and returns a default string, safely avoiding errors. Change parameter type to string only and remove null and undefined. removes null safety but is less flexible. Use non-null assertion: return name!.toUpperCase(); forces non-null assertion which can cause runtime errors. Remove strictNullChecks from tsconfig. disables safety feature, not recommended.

3. Final Answer:

   Add a check: if (name == null) return "Unknown"; before calling toUpperCase(). -> Option C

4. Quick Check:

   Check null/undefined before method calls [OK]

Hint: Use if(name == null) to check null and undefined together [OK]

Common Mistakes:

• Using non-null assertion unsafely
• Removing null from type instead of checking
• Disabling strictNullChecks instead of fixing code