Explicit type annotations in Typescript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is an explicit type annotation in TypeScript?

An explicit type annotation is when you directly specify the type of a variable, function parameter, or return value using a colon and the type name, like <code>let age: number;</code>. It helps the compiler know exactly what type to expect.

beginner

Why use explicit type annotations instead of relying on TypeScript's type inference?

Explicit type annotations make your code clearer and easier to understand. They also help catch mistakes early by ensuring variables have the exact type you want, especially when the inferred type might be too broad or unclear.

beginner

How do you add an explicit type annotation to a function parameter in TypeScript?

You add a colon and the type after the parameter name. For example: <code>function greet(name: string) { ... }</code> means the parameter <code>name</code> must be a string.

beginner

What happens if you assign a value of the wrong type to a variable with an explicit type annotation?

TypeScript will show an error during compilation because the value does not match the declared type. This helps prevent bugs by catching type mistakes early.

beginner

Show an example of explicit type annotation for a variable and a function return type.

Example:<br><code>let count: number = 5;</code><br>Here, <code>count</code> is explicitly a number.<br><br>Function with return type:<br><code>function getName(): string { return 'Alice'; }</code><br>This means the function must return a string.

What does this TypeScript code mean?
let price: number = 10;

A The variable price can only hold numbers.

B The variable price can hold any type.

C The variable price is a string.

D The variable price is undefined.

The explicit type annotation : number means price can only hold numbers.

How do you specify a function parameter must be a string?

A function greet(name string) {}

B function greet(name) {}

C function greet(string name) {}

D function greet(name: string) {}

You add a colon and the type after the parameter name: name: string.

What error will TypeScript show for this code?
let age: number = 'twenty';

A Error: Type 'string' is not assignable to type 'number'.

B No error, it's valid.

C Error: Missing type annotation.

D Error: Variable age is undefined.

Assigning a string to a variable declared as number causes a type error.

Why might you add explicit return type annotations to functions?

A To make the function run faster.

B To avoid writing function code.

C To help TypeScript check the function returns the correct type.

D To allow any return type.

Explicit return types help TypeScript verify the function returns what you expect.

Which is a correct explicit type annotation for a boolean variable?

A let isOpen = true: boolean;

B let isOpen: boolean = true;

C let isOpen: bool = true;

D let isOpen: Boolean = 'true';

The correct type is boolean (all lowercase), and the value must be true or false.

Explain what explicit type annotations are and why they are useful in TypeScript.

Think about how telling the computer exactly what type a variable should be helps.

Write a simple TypeScript function with explicit type annotations for parameters and return type.

Use a function that takes a string and returns a string.

Practice

1. What is the main purpose of using explicit type annotations in TypeScript?

easy

A. To tell TypeScript exactly what type a variable or function uses

B. To make the code run faster

C. To automatically convert types at runtime

D. To remove all type checking

Solution

1. Step 1: Understand what explicit type annotations do

   Explicit type annotations specify the exact type for variables or functions in TypeScript.

2. Step 2: Identify the purpose of explicit typing

   This helps TypeScript catch mistakes and makes the code easier to understand.

3. Final Answer:

   To tell TypeScript exactly what type a variable or function uses -> Option A

4. Quick Check:

   Explicit type annotations = specify exact types [OK]

Hint: Explicit types tell TS variable types clearly [OK]

Common Mistakes:

• Thinking explicit types speed up runtime
• Confusing type annotations with type conversion
• Believing explicit types disable type checking

2. Which of the following is the correct syntax for explicitly typing a variable as a string in TypeScript?

easy

A. let name = string;

B. let name: string;

C. let name = "string";

D. let name: "string";

Solution

1. Step 1: Recall TypeScript variable type annotation syntax

   Type annotations use a colon after the variable name followed by the type.

2. Step 2: Match the correct syntax

   let name: string; uses let name: string; which is the correct way to declare a string type.

3. Final Answer:

   let name: string; -> Option B

4. Quick Check:

   Variable: type syntax = correct [OK]

Hint: Use colon after variable name for type [OK]

Common Mistakes:

• Using equals sign instead of colon for type
• Putting type inside quotes incorrectly
• Assigning type as a value instead of annotation

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

let age: number = 30;
age = "thirty";
console.log(age);

medium

A. Type error at compile time

B. thirty

C. 30

D. undefined

Solution

1. Step 1: Check the variable type and assignment

   The variable age is explicitly typed as number, but assigned a string "thirty" later.

2. Step 2: Understand TypeScript's type checking

   TypeScript will raise a compile-time error because the string assignment violates the number type annotation.

3. Final Answer:

   Type error at compile time -> Option A

4. Quick Check:

   Assigning wrong type = compile error [OK]

Hint: Assign only matching types to annotated variables [OK]

Common Mistakes:

• Assuming code runs ignoring type mismatch
• Thinking TypeScript converts types automatically
• Expecting runtime error instead of compile error

4. Identify the error in this TypeScript code snippet:

function greet(name: string): void {
  console.log("Hello, " + name);
}
greet(42);

medium

A. Variable name is not declared

B. Missing return type annotation

C. Function body syntax error

D. Calling function with wrong argument type

Solution

1. Step 1: Check function parameter type

   The function greet expects a string parameter named name.

2. Step 2: Check the function call argument

   The call greet(42) passes a number instead of a string, causing a type mismatch error.

3. Final Answer:

   Calling function with wrong argument type -> Option D

4. Quick Check:

   Argument type must match parameter type [OK]

Hint: Match argument types to parameter annotations [OK]

Common Mistakes:

• Ignoring parameter type annotations
• Assuming implicit type conversion
• Missing function return type is not an error here

5. You want to create a function that takes an array of numbers and returns an object mapping each number to its square. Which explicit type annotation correctly describes the return type?

function squareMap(nums: number[]): ??? {
  const result = {};
  for (const num of nums) {
    result[num] = num * num;
  }
  return result;
}

hard

A. Map

B. { [key: string]: number }

C. Record

D. Array<number>

Solution

1. Step 1: Understand the function's return structure

   The function returns an object mapping numbers to their squares, so keys and values are numbers.

2. Step 2: Choose the best explicit return type

   TypeScript's Record<number, number> type explicitly defines an object with number keys and number values, matching the function's output.

3. Final Answer:

   Record<number, number> -> Option C

4. Quick Check:

   Use Record for typed object maps [OK]

Hint: Use Record for typed objects [OK]

Common Mistakes:

• Using string keys when keys are numbers
• Returning array instead of object
• Using index signature with wrong key type