Type annotation on function parameters in Typescript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of type annotation on function parameters in TypeScript?

Type annotation on function parameters tells TypeScript what type of value the function expects for each parameter. This helps catch errors early and improves code clarity.

beginner

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

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

beginner

What happens if you pass a value of the wrong type to a function with typed parameters?

TypeScript will show an error during development, helping you fix the mistake before running the code. This prevents bugs caused by unexpected types.

intermediate

Can function parameters have multiple types in TypeScript? How?

Yes, by using union types. For example: <code>function printId(id: number | string) { ... }</code> means <code>id</code> can be a number or a string.

intermediate

What is the difference between optional and required parameters in TypeScript functions?

Required parameters must be provided when calling the function. Optional parameters are marked with a question mark (?), like <code>function greet(name?: string) { ... }</code>, and can be omitted.

How do you specify that a function parameter must be a string in TypeScript?

A function foo(param = string) {}

B function foo(param: string) {}

C function foo(string param) {}

D function foo(param) : string {}

Option B correctly uses a colon after the parameter name to specify its type.

What will TypeScript do if you pass a number to a function expecting a string parameter?

A Throw a runtime error

B Ignore the type mismatch

C Automatically convert the number to string

D Show a compile-time error

TypeScript shows an error during development (compile-time), preventing type mistakes.

How do you declare a function parameter that can accept either a number or a string?

A function foo(param: number | string) {}

B function foo(param: number or string) {}

C function foo(param: number & string) {}

D function foo(param: any) {}

The pipe symbol (|) creates a union type allowing multiple types.

How do you mark a function parameter as optional in TypeScript?

A function foo(param?: string) {}

B function foo(optional param: string) {}

C function foo(param: string = optional) {}

D function foo(param: string?) {}

Adding a question mark (?) after the parameter name makes it optional.

Which of these is a correct function parameter type annotation?

A function add(a: number b: number) {}

B function add(a number, b number) {}

C function add(a: number, b: number) {}

D function add(a, b): number {}

Option C correctly annotates both parameters with types using colons.

Explain how to add type annotations to function parameters in TypeScript and why it is useful.

Think about how you tell TypeScript what kind of data a function expects.

Describe how to make a function parameter optional and how to allow multiple types for a parameter.

Consider how to say a parameter can be missing or can be one of several types.

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