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.