Type annotation on variables in Typescript - Step-by-Step Execution

Concept Flow - Type annotation on variables

Declare variable

↓

Add type annotation

↓

Assign value matching type

↓

Use variable safely

↓

Compile-time check

↓

Error if type mismatch

↓

End

This flow shows how a variable is declared with a type, assigned a value, and checked by the compiler for type correctness.

Execution Sample

Typescript

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

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

Execution Table

Step	Action	Variable	Type Annotation	Value	Compiler Check	Output
1	Declare variable	age	number	undefined	OK (no value yet)
2	Assign value 25	age	number	25	OK (25 is number)
3	Print value	age	number	25	OK	25
4	Assign string 'hello'	age	number	error	Error: Type 'string' is not assignable to type 'number'

💡 Execution stops at step 4 due to type mismatch error.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4
age	undefined	25	25	error

Key Moments - 2 Insights

Why does assigning a string to 'age' cause an error?

Because 'age' is declared with type 'number', assigning a string violates the type annotation, as shown in execution_table step 4.

Can we declare a variable without assigning a value immediately?

Yes, as in step 1, 'age' is declared with type 'number' but has no value yet (undefined). The compiler allows this.

Visual Quiz - 3 Questions

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

A 25

B undefined

C 'hello'

D error

💡 Hint

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

At which step does the compiler detect a type error?

A Step 3

B Step 2

C Step 4

D Step 1

💡 Hint

Look at the 'Compiler Check' column in execution_table for the error message.

If we remove the type annotation ': number' from 'age', what happens at step 4?

A Error still occurs

B No error, string assigned successfully

C Variable becomes readonly

D Compiler warns but allows assignment

💡 Hint

Without type annotation, TypeScript infers type or allows any type, so no error at step 4.

Concept Snapshot

Type annotation syntax: let variableName: type;
Assign values matching the type only.
Compiler checks types at compile time.
Errors occur if assigned value type mismatches.
Allows safer code by catching mistakes early.

Full Transcript

This example shows how to add a type annotation to a variable in TypeScript. We declare 'age' as a number, assign 25, and print it. The compiler checks that the assigned value matches the declared type. If we try to assign a string to 'age', the compiler gives an error and stops execution. This helps catch mistakes early and makes code safer.

Practice

1. What does the type annotation let age: number; tell us about the variable age?

easy

A. It means age can hold any type of value.

B. It means age can only hold numbers.

C. It means age is a string variable.

D. It means age is a function.

Solution

1. Step 1: Understand type annotation syntax

   The colon : after age followed by number means age must hold a number value.

2. Step 2: Interpret the meaning of number

   The type number restricts the variable to only numeric values, no strings or other types allowed.

3. Final Answer:

   It means age can only hold numbers. -> Option B

4. Quick Check:

   Type annotation : number means only numbers [OK]

Hint: Colon after variable name means type follows [OK]

Common Mistakes:

• Thinking type annotation changes the value
• Confusing type annotation with assignment
• Assuming variable can hold any type without error

2. Which of the following is the correct way to add a type annotation for a string variable named name in TypeScript?

easy

A. let name string;

B. let name = string;

C. let name: string;

D. let name: "string";

Solution

1. Step 1: Recall correct syntax for type annotation

   Type annotation uses a colon : followed by the type name without quotes.

2. Step 2: Check each option

   let name: string; uses let name: string; which is correct syntax. Options B and C miss the colon or use wrong syntax. let name: "string"; uses quotes around string, which is incorrect.

3. Final Answer:

   let name: string; -> Option C

4. Quick Check:

   Use colon and type name without quotes [OK]

Hint: Use colon then type name without quotes [OK]

Common Mistakes:

• Omitting the colon between variable and type
• Putting type in quotes like a string value
• Using equals sign instead of colon for type

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

let count: number = 5;
count = 10;
console.log(count);

medium

A. 10

B. Error: Type mismatch

C. undefined

D. 5

Solution

1. Step 1: Analyze variable declaration and assignment

   count is declared as a number and initialized to 5, then reassigned to 10, which is valid.

2. Step 2: Understand console.log output

   The last assigned value is 10, so console.log(count) prints 10.

3. Final Answer:

   10 -> Option A

4. Quick Check:

   Variable holds last assigned number value [OK]

Hint: Variable prints last assigned value [OK]

Common Mistakes:

• Thinking initial value 5 is printed
• Expecting error on reassignment with same type
• Confusing output with undefined

4. Identify the error in this TypeScript code:

let isActive: boolean = "true";

medium

A. No error, code is correct.

B. Missing semicolon at the end.

C. Variable name cannot be isActive.

D. Type mismatch: string assigned to boolean.

Solution

1. Step 1: Check type annotation and assigned value

   The variable isActive is typed as boolean but assigned a string value "true".

2. Step 2: Understand TypeScript type checking

   TypeScript does not allow assigning a string to a boolean variable, causing a type mismatch error.

3. Final Answer:

   Type mismatch: string assigned to boolean. -> Option D

4. Quick Check:

   Type annotation enforces matching value types [OK]

Hint: Check assigned value matches annotated type [OK]

Common Mistakes:

• Ignoring quotes around boolean values
• Assuming string "true" is same as boolean true
• Thinking semicolon or variable name causes error

5. You want to declare a variable data that can hold either a number or a string. Which is the correct TypeScript annotation?

hard

A. let data: number | string;

B. let data: number & string;

C. let data: number, string;

D. let data: (number string);

Solution

1. Step 1: Understand union types in TypeScript

   The pipe symbol | is used to allow a variable to hold one of multiple types.

2. Step 2: Evaluate each option

   let data: number | string; uses number | string which means data can be either number or string. let data: number & string; uses & which means intersection (both types at once), invalid here. Options C and D have incorrect syntax.

3. Final Answer:

   let data: number | string; -> Option A

4. Quick Check:

   Use | for multiple allowed types [OK]

Hint: Use pipe | to allow multiple types [OK]

Common Mistakes:

• Using & instead of | for multiple types
• Separating types with comma or space
• Putting types inside parentheses without operator