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.