Type annotation on variables in Typescript

Introduction

Type annotation helps you tell the computer what kind of value a variable will hold. This makes your code safer and easier to understand.

When you want to make sure a variable only holds numbers.

When you want to explain to others what type of data a variable should have.

When you want to catch mistakes early if you try to put the wrong type of value in a variable.

When you want your code editor to give you helpful hints and warnings.

When you are working on bigger projects with many people and want clear rules for data.

Syntax

Typescript

let variableName: type = value;

The colon : is used to add the type after the variable name.

You can use many types like number, string, boolean, or even custom types.

Examples

This means age can only hold numbers.

Typescript

let age: number = 25;

This means name can only hold text (strings).

Typescript

let name: string = "Alice";

This means isStudent can only be true or false.

Typescript

let isStudent: boolean = true;

You can declare a variable with a type but assign a value later.

Typescript

let score: number;

Sample Program

This program shows how to use type annotations for different variables and prints their values.

Typescript

let height: number = 180;
let firstName: string = "John";
let isActive: boolean = false;

console.log(`Name: ${firstName}`);
console.log(`Height: ${height} cm`);
console.log(`Active user: ${isActive}`);

Important Notes

If you try to assign a value of the wrong type, TypeScript will show an error before running your code.

Type annotations are optional if TypeScript can guess the type from the value, but adding them helps clarity.

Summary

Type annotations tell what kind of value a variable can hold.

They help catch mistakes early and make code easier to read.

Use a colon : after the variable name to add a type.

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