Parameter type annotations in Typescript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a parameter type annotation in TypeScript?

A parameter type annotation specifies the expected type of a function's parameter, helping catch errors and improve 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. Example: <code>function greet(name: string) {}</code>

beginner

What happens if you pass a wrong type to a function parameter with a type annotation?

TypeScript will show a compile-time error, preventing the code from running until the type mismatch is fixed.

beginner

Can you annotate multiple parameters with different types in a function?

Yes, each parameter can have its own type annotation. Example: <code>function add(a: number, b: number): number { return a + b; }</code>

beginner

Why are parameter type annotations helpful for beginners?

They guide you to use the right types, catch mistakes early, and make your code easier to understand and maintain.

How do you write a parameter type annotation for a string parameter named 'text'?

A text: string

B string text

C text = string

D text -> string

In TypeScript, the correct syntax is parameterName: type, so text: string is correct.

What error will TypeScript show if you call greet(123) when function greet(name: string) is defined?

A No error, 123 is accepted

B Runtime error

C Syntax error

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

TypeScript checks types at compile time and will report that a number cannot be used where a string is expected.

Can you omit parameter type annotations in TypeScript?

A Yes, but then the parameter type is 'any' by default

B No, they are mandatory

C Yes, but only for numbers

D No, it causes a syntax error

If you omit the type, TypeScript treats the parameter as 'any', which disables type checking for that parameter.

Which of these is a valid function with two parameters annotated with types?

A function sum(number a, number b) {}

B function sum(a, b) {}

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

D function sum(a - number, b - number) {}

Option C uses correct TypeScript syntax for parameter type annotations.

What is the main benefit of parameter type annotations?

A They make code run faster

B They help catch type errors before running the code

C They reduce file size

D They allow dynamic typing

Parameter type annotations help catch mistakes early by checking types during development.

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 what happens if you pass a wrong type to a function parameter that has a type annotation.

Consider how TypeScript helps avoid bugs before running the program.

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