Parameter type annotations in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a type annotation for the parameter name.

Typescript

function greet(name: [1]) {
  return `Hello, ${name}!`;
}

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

Astring

Bany

Cboolean

Dnumber

Attempts:

3 left

💡 Hint

Common Mistakes

Using number or boolean instead of string.

Omitting the type annotation.

The parameter name should be a string because it represents a person's name.

2fill in blank

medium

Complete the code to add a type annotation for the parameter age.

Typescript

function setAge(age: [1]) {
  console.log(`Age set to ${age}`);
}

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

Aboolean

Bnumber

Cstring

Dobject

Attempts:

3 left

💡 Hint

Common Mistakes

Using string instead of number.

Using boolean or object incorrectly.

The parameter age should be a number because it represents a numeric value.

3fill in blank

hard

Fix the error by adding the correct type annotation for the parameter isActive.

Typescript

function setActive(isActive: [1]) {
  if (isActive) {
    console.log('Active');
  } else {
    console.log('Inactive');
  }
}

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

Aany

Bstring

Cnumber

Dboolean

Attempts:

3 left

💡 Hint

Common Mistakes

Using string or number instead of boolean.

Omitting the type annotation.

The parameter isActive should be a boolean because it represents a true/false value.

4fill in blank

hard

Fill both blanks to add type annotations for parameters title and pages.

Typescript

function createBook(title: [1], pages: [2]) {
  return `${title} has ${pages} pages.`;
}

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

Astring

Bboolean

Cnumber

Dobject

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the types between title and pages.

Using boolean or object incorrectly.

The title is a string because it is text, and pages is a number because it counts pages.

5fill in blank

hard

Fill all three blanks to add type annotations for parameters firstName, lastName, and age.

Typescript

function personInfo(firstName: [1], lastName: [2], age: [3]) {
  return `${firstName} ${lastName} is ${age} years old.`;
}

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

Anumber

Bstring

Dboolean

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up the types for names and age.

Using boolean for any parameter.

Both firstName and lastName are string types because they are text, and age is a number.

Practice

1.

What does a parameter type annotation in TypeScript do?

easy

A. It tells what kind of data a function expects for its parameters.

B. It runs the function automatically.

C. It changes the function's return type.

D. It removes the parameter from the function.

Solution

1. Step 1: Understand the purpose of parameter type annotations

   Parameter type annotations specify the expected data type for each function parameter.

2. Step 2: Identify what this means for the function

   This helps the programmer and the TypeScript compiler catch errors if wrong data types are used.

3. Final Answer:

   It tells what kind of data a function expects for its parameters. -> Option A

4. Quick Check:

   Parameter type annotation = tells expected data type [OK]

Hint: Parameter type annotations specify expected data types [OK]

Common Mistakes:

• Thinking it changes the function's return type
• Believing it runs the function automatically
• Confusing it with removing parameters

2.

Which of the following is the correct way to add a type annotation for a parameter named age that should be a number?

function checkAge(____) { return age > 18; }

easy

A. age-number

B. age: number

C. age = number

D. number age

Solution

1. Step 1: Recall TypeScript parameter syntax

   In TypeScript, the parameter name is followed by a colon and then the type.

2. Step 2: Match the syntax to the options

   Only age: number uses the correct syntax: age: number.

3. Final Answer:

   age: number -> Option B

4. Quick Check:

   Parameter name : type = correct syntax [OK]

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

Common Mistakes:

• Putting type before parameter name
• Using equals sign instead of colon
• Using hyphen instead of colon

3.

What will be the output of this TypeScript code?

function greet(name: string) { return `Hello, ${name}!`; }
console.log(greet(42));

medium

A. Type error at compile time

B. Hello, 42!

C. Hello, undefined!

D. Runtime error

Solution

1. Step 1: Check the parameter type annotation

   The function expects a string parameter named name.

2. Step 2: Analyze the argument passed

   The argument passed is a number 42, which does not match the expected string type.

3. Final Answer:

   Type error at compile time -> Option A

4. Quick Check:

   Passing wrong type causes compile-time error [OK]

Hint: Passing wrong type causes compile-time error [OK]

Common Mistakes:

• Thinking it prints 'Hello, 42!' anyway
• Expecting a runtime error instead of compile-time
• Assuming undefined is printed

4.

Identify the error in this TypeScript function and choose the fix:

function multiply(x: number, y) { return x * y; }

medium

A. Remove type annotation from x

B. Change y to y: string

C. Add type annotation to y: y: number

D. Add return type annotation

Solution

1. Step 1: Check parameter annotations

   Parameter x has a type number, but y has no type annotation.

2. Step 2: Understand TypeScript's requirement

   All parameters should have type annotations for clarity and type safety.

3. Final Answer:

   Add type annotation to y: y: number -> Option C

4. Quick Check:

   All parameters need type annotations [OK]

Hint: Annotate all parameters with types [OK]

Common Mistakes:

• Leaving some parameters untyped
• Changing unrelated parameter types
• Thinking return type annotation fixes parameter error

5.

You want to write a function formatPrice that takes a price parameter which can be either a number or a string. How should you annotate the parameter to accept both types?

hard

A. price: number, string

B. price: number & string

C. price: any

D. price: number | string

Solution

1. Step 1: Understand union types in TypeScript

   To accept multiple types, use the union operator | between types.

2. Step 2: Apply union type to parameter

   Use price: number | string to allow either type.

3. Final Answer:

   price: number | string -> Option D

4. Quick Check:

   Use | for multiple allowed types [OK]

Hint: Use pipe | to allow multiple types [OK]

Common Mistakes:

• Using & instead of | for union types
• Using comma-separated types
• Using any which loses type safety