Strict null checks and safety in Typescript - Step-by-Step Execution

Concept Flow - Strict null checks and safety

Start

↓

Declare variable with type

↓

Assign value?

↓

Check for null/undefined

↓

Use variable safely

↓

End

This flow shows how TypeScript checks variables for null or undefined when strict null checks are enabled, preventing unsafe use.

Execution Sample

Typescript

let name: string | null = null;
if (name !== null) {
  console.log(name.length);
}

This code declares a variable that can be a string or null, then safely uses it only if it is not null.

Execution Table

Step	Variable 'name'	Condition 'name !== null'	Action	Output
1	null	null !== null → false	Skip console.log
2	name assigned 'Alice'	'Alice' !== null → true	Execute console.log(name.length)	5
3	name assigned null	null !== null → false	Skip console.log

💡 Execution stops after checking condition and either running or skipping the console.log.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3
name	null	null	'Alice'	null

Key Moments - 3 Insights

Why does TypeScript give an error if I try to use 'name.length' without checking for null?

Because with strict null checks on, TypeScript knows 'name' can be null, so accessing 'length' directly might cause a runtime error. See execution_table step 1 where condition is false and console.log is skipped.

What happens if I assign 'null' to a variable typed as 'string' without '| null'?

TypeScript will give a compile-time error because 'null' is not allowed unless the type explicitly includes it. This safety prevents unexpected null values.

How does the condition 'name !== null' help in safe usage?

It narrows the type from 'string | null' to just 'string' inside the if block, so TypeScript allows accessing string properties safely, as shown in execution_table step 2.

Visual Quiz - 3 Questions

Look at the execution table, what is the output at step 2?

A undefined

B null

C 5

D Error

💡 Hint

Check the 'Output' column in execution_table row for step 2.

At which step does the condition 'name !== null' evaluate to false?

A Step 1

B Step 2

C Step 3

D Never

💡 Hint

Look at the 'Condition' column in execution_table for steps where 'name' is null.

If 'strictNullChecks' was off, what would happen when accessing 'name.length' without a check?

A TypeScript would allow it without error

B TypeScript would give an error

C The program would crash at runtime

D The variable 'name' would become undefined

💡 Hint

Strict null checks control whether TypeScript enforces null safety at compile time.

Concept Snapshot

Strict null checks in TypeScript prevent using variables that might be null or undefined without checking.
Use union types like 'string | null' to allow null.
Always check variables before use (e.g., 'if (name !== null)').
This avoids runtime errors and makes code safer.
Without strict null checks, TypeScript allows unsafe access.

Full Transcript

This visual execution shows how TypeScript's strict null checks work. We start by declaring a variable 'name' that can be a string or null. When we check if 'name !== null', TypeScript knows it's safe to use 'name.length'. If 'name' is null, the code inside the if block is skipped, preventing errors. This safety feature helps catch mistakes early. The execution table traces each step, showing variable values, condition results, and outputs. Key moments explain why checks are needed and how TypeScript enforces them. The quiz tests understanding of these steps and the effect of strict null checks.