Type annotation on function parameters in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

Typescript

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

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

Aname: string

Bstring name

Cname number

Dname = string

Attempts:

3 left

💡 Hint

Common Mistakes

Using space instead of colon between parameter and type.

Putting the type before the parameter name.

Assigning a value instead of annotating the type.

The correct syntax to annotate a parameter type in TypeScript is name: string.

2fill in blank

medium

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

Typescript

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

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

Anumber age

Bage string

Cage = number

Dage: number

Attempts:

3 left

💡 Hint

Common Mistakes

Using space instead of colon.

Putting the type before the parameter name.

Assigning a value instead of annotating the type.

The correct way to annotate a number parameter is age: number.

3fill in blank

hard

Fix the error in the function parameter type annotation for isActive which should be a boolean.

Typescript

function setActive([1]) {
  console.log(`Active status: ${isActive}`);
}

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

AisActive = boolean

BisActive: boolean

Cboolean isActive

DisActive string

Attempts:

3 left

💡 Hint

Common Mistakes

Using space instead of colon.

Putting the type before the parameter name.

Assigning a value instead of annotating the type.

The correct syntax for a boolean parameter is isActive: boolean.

4fill in blank

hard

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

Typescript

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

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

Atitle: string

Bpages: string

Cpages: number

Dtitle number

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up types for parameters.

Using space instead of colon.

Putting type before parameter name.

The correct annotations are title: string and pages: number.

5fill in blank

hard

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

Typescript

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

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

AfirstName: string

BlastName: string

Cage: number

Dage string

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong types for parameters.

Forgetting colon between parameter and type.

Putting type before parameter name.

The correct annotations are firstName: string, lastName: string, and age: number.

Practice

1. What does the type annotation in the function parameter function greet(name: string) tell us?

easy

A. The function expects name to be a string.

B. The function will return a string.

C. The function does not accept any parameters.

D. The function expects name to be a number.

Solution

1. Step 1: Understand the syntax of type annotation

   The colon : after name means we are telling TypeScript what type name should be.

2. Step 2: Identify the type specified

   The type specified is string, so name must be a string.

3. Final Answer:

   The function expects name to be a string. -> Option A

4. Quick Check:

   Parameter type annotation = string [OK]

Hint: Look for colon after parameter name to find its type [OK]

Common Mistakes:

• Confusing parameter type with return type
• Ignoring the colon and thinking it's optional
• Assuming no parameters are accepted

2. Which of the following is the correct way to add a type annotation for a number parameter age in a TypeScript function?

easy

A. function setAge(age = number) {}

B. function setAge(age: number) {}

C. function setAge(number age) {}

D. function setAge(age) : number {}

Solution

1. Step 1: Recall correct syntax for parameter type annotation

   TypeScript uses a colon : after the parameter name to specify its type.

2. Step 2: Check each option

   function setAge(age: number) {} uses age: number, which is correct. Others use invalid syntax.

3. Final Answer:

   function setAge(age: number) {} -> Option B

4. Quick Check:

   Parameter type syntax = colon after name [OK]

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

Common Mistakes:

• Using equals sign instead of colon for type
• Placing type before parameter name
• Adding colon after parentheses instead of parameter

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

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

console.log(multiply(3, 4));

medium

A. 34

B. Error: Missing return type

C. undefined

D. 12

Solution

1. Step 1: Understand function parameters and return

   The function takes two numbers and returns their product.

2. Step 2: Calculate multiply(3, 4)

   3 times 4 equals 12, so the function returns 12.

3. Final Answer:

   12 -> Option D

4. Quick Check:

   3 * 4 = 12 [OK]

Hint: Multiply parameters as numbers to get output [OK]

Common Mistakes:

• Confusing string concatenation with multiplication
• Ignoring return type annotation
• Expecting error due to missing type

4. Identify the error in this TypeScript function:

function greet(name string) {
  return `Hello, ${name}`;
}

medium

A. Incorrect use of backticks for string

B. Missing return type annotation

C. Missing colon between parameter name and type

D. Parameter name cannot be 'name'

Solution

1. Step 1: Check parameter syntax

   The parameter name string is missing a colon : between name and string.

2. Step 2: Confirm other parts are correct

   Backticks and parameter name are valid; return type annotation is optional.

3. Final Answer:

   Missing colon between parameter name and type -> Option C

4. Quick Check:

   Parameter type needs colon [OK]

Hint: Always put colon between parameter and type [OK]

Common Mistakes:

• Omitting colon between parameter and type
• Thinking return type is mandatory
• Confusing string quotes with backticks

5. You want to write a function formatPrice that takes a number price and returns a string with a dollar sign. Which is the correct way to add type annotations to the parameter and return type?

hard

A. function formatPrice(price: number): string { return `$${price}`; }

B. function formatPrice(price): string { return `$${price}`; }

C. function formatPrice(price: string): number { return `$${price}`; }

D. function formatPrice(price: number) { return price; }

Solution

1. Step 1: Determine parameter type

   The parameter price should be a number because it represents a price value.

2. Step 2: Determine return type

   The function returns a string with a dollar sign, so return type is string.

3. Step 3: Check options

   function formatPrice(price: number): string { return `$${price}`; } correctly annotates price: number and return type : string. Others have missing or wrong types.

4. Final Answer:

   function formatPrice(price: number): string { return `$${price}`; } -> Option A

5. Quick Check:

   Parameter number, return string [OK]

Hint: Parameter type matches input, return type matches output [OK]

Common Mistakes:

• Omitting parameter type
• Wrong return type annotation
• Returning wrong data type