Parameter type annotations in Typescript - Step-by-Step Execution

Concept Flow - Parameter type annotations

Function Declaration

↓

Parameters with Types

↓

Function Call with Arguments

↓

Type Checking

↓

Function Runs

This flow shows how TypeScript checks parameter types during function calls before running the function.

Execution Sample

Typescript

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

console.log(greet("Alice"));

Defines a function with a string parameter and calls it with a string argument.

Execution Table

Step	Action	Parameter 'name' Type	Argument Passed	Type Check Result	Output
1	Function greet declared	string	N/A	N/A	N/A
2	Call greet with argument "Alice"	string	"Alice"	Matches string	N/A
3	Function body executes	string	"Alice"	N/A	"Hello, Alice!"
4	console.log outputs result	N/A	N/A	N/A	Hello, Alice!

💡 Execution stops after outputting the greeting string.

Variable Tracker

Variable	Start	After Call	Final
name	undefined	"Alice"	"Alice"
return value	undefined	undefined	"Hello, Alice!"

Key Moments - 2 Insights

Why do we write ': string' after the parameter name?

The ': string' tells TypeScript that the parameter 'name' must be a string. This is shown in the execution_table step 2 where the argument type is checked against this annotation.

What happens if we call greet with a number instead of a string?

TypeScript will show a compile-time error before running the code, as the argument type does not match the parameter annotation. This is the 'Error' branch in the concept_flow.

Visual Quiz - 3 Questions

Look at the execution_table at step 2, what type is expected for parameter 'name'?

A number

B string

C boolean

D any

💡 Hint

Check the 'Parameter 'name' Type' column at step 2 in the execution_table.

At which step does the function actually produce the greeting string?

A Step 3

B Step 1

C Step 2

D Step 4

💡 Hint

Look at the 'Output' column in the execution_table to see when the greeting is created.

If we pass a number instead of a string to greet, what changes in the flow?

A The function runs normally

B The output is a number

C TypeScript shows a compile error before running

D The parameter type changes to number

💡 Hint

Refer to the 'Type Checking' step in the concept_flow where errors are caught before execution.

Concept Snapshot

Parameter type annotations in TypeScript:
function funcName(param: type) { ... }
- Specify expected type after parameter name
- TypeScript checks argument types at call
- Errors occur if types don't match
- Helps catch bugs before running code

Full Transcript

This visual trace shows how TypeScript uses parameter type annotations to check function arguments. The function greet expects a string parameter named 'name'. When called with "Alice", TypeScript confirms the argument matches the string type. Then the function runs and returns the greeting. If a wrong type is passed, TypeScript stops with an error before running. This helps catch mistakes early and keeps code safe.

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