Type annotation on variables in Typescript - Mini Project: Build & Apply

Type annotation on variables

📖 Scenario: You are creating a simple program to store information about a book. You want to make sure the types of the variables are clear and correct.

🎯 Goal: Learn how to add type annotations to variables in TypeScript to make your code safer and easier to understand.

📋 What You'll Learn

Create variables with explicit type annotations

Use string and number types

Assign correct values matching the types

Print the variables to see their values

💡 Why This Matters

🌍 Real World

Type annotations help developers avoid mistakes by clearly stating what kind of data each variable should hold. This is very useful in real projects to prevent bugs.

💼 Career

Many programming jobs require writing clear and safe code. Knowing how to use type annotations in TypeScript is important for frontend and backend development.

1

Create variables with type annotations

Create a variable called title with type string and value "The Great Gatsby". Create a variable called pages with type number and value 180.

Typescript

// Create variables 'title' and 'pages' with type annotations
// Your code here

Hint

Use let variableName: type = value; to add type annotations.

2

Add a boolean variable with type annotation

Add a variable called isAvailable with type boolean and value true.

Typescript

let title: string = "The Great Gatsby";
let pages: number = 180;
// Add variable 'isAvailable' with type 'boolean'
// Your code here

Hint

Boolean variables use the type boolean and values true or false.

3

Change the value of a variable with the correct type

Change the value of pages to 200. Make sure the type annotation stays the same.

Typescript

let title: string = "The Great Gatsby";
let pages: number = 180;
let isAvailable: boolean = true;
// Change the value of 'pages' to 200
// Your code here

Hint

Keep the type annotation : number and update the value after the equals sign.

4

Print all variables to the console

Write three console.log statements to print the values of title, pages, and isAvailable.

Typescript

let title: string = "The Great Gatsby";
let pages: number = 200;
let isAvailable: boolean = true;
// Print the variables below
// Your code here

Hint

Use console.log(variableName); to print each variable.

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