Explicit type annotations in Typescript - Step-by-Step Execution

Concept Flow - Explicit type annotations

Declare variable

↓

Add explicit type annotation

↓

Assign value matching type

↓

Use variable safely

↓

Compile-time check for type errors

↓

Run program if no errors

This flow shows how declaring a variable with an explicit type helps catch errors before running the program.

Execution Sample

Typescript

let age: number;
age = 25;
console.log(age);

Declare a variable with type number, assign a number, then print it.

Execution Table

Step	Action	Variable	Type Annotation	Value	Result
1	Declare variable	age	number	undefined	Variable 'age' created with type number, no value yet
2	Assign value	age	number	25	Value 25 assigned to 'age', matches type number
3	Print value	age	number	25	Output: 25
4	End	-	-	-	Program ends successfully

💡 No type errors, program runs and prints 25

Variable Tracker

Variable	Start	After Step 2	Final
age	undefined	25	25

Key Moments - 2 Insights

Why do we write ': number' after 'age'?

The ': number' tells TypeScript that 'age' must always hold a number. This helps catch mistakes early, as shown in step 2 where the value assigned must match this type.

What happens if we assign a string to 'age'?

TypeScript will show an error before running the program because the assigned value does not match the declared type 'number'. This prevents bugs.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'age' after step 1?

A null

B 25

C undefined

D number

💡 Hint

Check the 'Value' column in row for step 1 in the execution table.

At which step does 'age' get assigned the value 25?

A Step 2

B Step 1

C Step 3

D Step 4

💡 Hint

Look at the 'Action' and 'Value' columns in the execution table.

If we change the type annotation to ': string' but assign 25, what happens?

A Program runs and prints 25

B TypeScript shows a type error before running

C Value changes to '25' string automatically

D No effect, code runs normally

💡 Hint

Refer to the key moment about assigning wrong types and the compile-time check step.

Concept Snapshot

Explicit type annotations in TypeScript:
- Syntax: let variableName: type;
- Forces variable to hold only that type
- Helps catch errors before running
- Example: let age: number;
- Assigning wrong type causes compile error

Full Transcript

This example shows how to declare a variable with an explicit type annotation in TypeScript. First, we declare 'age' with type 'number'. Then we assign the value 25 to it. The program prints 25. The explicit type helps TypeScript check that only numbers are assigned to 'age'. If we try to assign a different type, TypeScript will show an error before running the program. This prevents bugs and makes code safer.