Type annotation on variables in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a variable age with type number.

Typescript

let age: [1] = 25;

Drag options to blanks, or click blank then click option'

Anumber

Bstring

Cboolean

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using string type for a number variable.

Omitting the type annotation.

The variable age should be annotated with the number type to hold numeric values.

2fill in blank

medium

Complete the code to declare a constant isActive with type boolean.

Typescript

const isActive: [1] = true;

Drag options to blanks, or click blank then click option'

Astring

Bboolean

Cnumber

Dobject

Attempts:

3 left

💡 Hint

Common Mistakes

Using string or number instead of boolean.

Forgetting to add the type annotation.

The variable isActive should be annotated with the boolean type to hold true or false values.

3fill in blank

hard

Fix the error in the code by adding the correct type annotation to names as an array of strings.

Typescript

let names: [1] = ["Alice", "Bob", "Charlie"];

Drag options to blanks, or click blank then click option'

Astring[]

Bstring

CArray<number>

Dnumber[]

Attempts:

3 left

💡 Hint

Common Mistakes

Using string instead of string[].

Using number array types by mistake.

The variable names is an array of strings, so it should be annotated as string[].

4fill in blank

hard

Fill both blanks to declare a variable user as an object with name as string and age as number.

Typescript

let user: [1] = { name: "John", age: 30 }; // user has name: string and age: number

// Type annotation for user is [2]

Drag options to blanks, or click blank then click option'

A{ name: string; age: number }

B{ name: number; age: string }

C{ name: string; age: string }

D{ name: number; age: number }

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the types of name and age.

Using string type for age.

The variable user is an object with name as string and age as number, so the type annotation is { name: string; age: number }.

5fill in blank

hard

Fill all three blanks to declare a variable coordinates as a tuple with two numbers: x and y.

Typescript

let coordinates: [1] = [[2], [3]];

Drag options to blanks, or click blank then click option'

A[number, number]

B10

C20

D[string, string]

Attempts:

3 left

💡 Hint

Common Mistakes

Using array type instead of tuple.

Using strings instead of numbers.

The variable coordinates is a tuple of two numbers, so the type is [number, number] and the values are numbers like 10 and 20.

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