Explicit type annotations in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of explicit type annotation with union type

What is the output of the following TypeScript code?

Typescript

function formatInput(input: string | number): string {
  if (typeof input === 'number') {
    return `Number: ${input.toFixed(2)}`;
  } else {
    return `String: ${input.toUpperCase()}`;
  }
}

console.log(formatInput(3.14159));
console.log(formatInput('hello'));

A Number: 3.14\nString: HELLO

B 3.14\nHELLO

C Number: 3.14159\nString: hello

D Number: 3.1416\nString: HELLO

💡 Hint

Look at how the number is formatted with toFixed(2) and the string is converted to uppercase.

The function checks if the input is a number or string. For numbers, it formats to 2 decimal places using toFixed(2). For strings, it converts to uppercase. So 3.14159 becomes '3.14' and 'hello' becomes 'HELLO'.

❓ Predict Output

intermediate

Value of variable with explicit tuple type

What is the value of the variable data after running this code?

Typescript

let data: [string, number];
data = ['age', 30];
console.log(data);

A ['age', 30]

B [30, 'age']

C ['age', '30']

D ['age']

💡 Hint

Remember tuples have fixed order and types.

The tuple data expects a string first, then a number. The assigned value matches this order and types exactly.

🔧 Debug

advanced

Identify the error caused by wrong explicit type annotation

What error will this TypeScript code produce?

Typescript

let count: string = 10;
console.log(count);

A No error, outputs 10

B SyntaxError: Unexpected number

C ReferenceError: count is not defined

D Type 'number' is not assignable to type 'string'.

💡 Hint

Check if the assigned value matches the declared type.

The variable count is declared as a string but assigned a number. TypeScript reports a type mismatch error.

🧠 Conceptual

advanced

Effect of explicit type annotation on function parameters

Which statement about explicit type annotations on function parameters is true?

A They automatically convert arguments to the specified type at runtime.

B They ensure the function only accepts arguments of the specified type, causing compile errors otherwise.

C They are optional and have no effect on type checking.

D They allow any type of argument but document the expected type.

💡 Hint

Think about how TypeScript enforces types during compilation.

Explicit type annotations on parameters restrict the types of arguments allowed. Passing a wrong type causes a compile-time error.

❓ Predict Output

expert

Output of explicit type annotation with intersection types

What is the output of this TypeScript code?

Typescript

type A = { x: number };
type B = { y: string };

const obj: A & B = { x: 5, y: 'hello' };

console.log(obj.x + obj.y.length);

A NaN

B TypeError at runtime

C 10

D SyntaxError

💡 Hint

Add the number x and the length of string y.

The object has both properties x (number 5) and y (string 'hello'). y.length is 5, so 5 + 5 = 10.

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