Type annotation on function parameters in Typescript - Step-by-Step Execution

Concept Flow - Type annotation on function parameters

Start function declaration

↓

Add parameter name

↓

Add colon :

↓

Add type annotation

↓

Write function body

↓

Function ready to use

This flow shows how to add a type to a function parameter step-by-step in TypeScript.

Execution Sample

Typescript

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

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

This code defines a function with a typed parameter and calls it to print a greeting.

Execution Table

Step	Action	Parameter 'name' Type	Parameter Value	Function Output
1	Function declared with parameter 'name' typed as string	string	undefined	N/A
2	Function called with argument "Alice"	string	"Alice"	N/A
3	Function body executes, returns greeting string	string	"Alice"	"Hello, Alice!"
4	console.log prints the returned string	string	"Alice"	Hello, Alice!
5	Execution ends	string	undefined	N/A

💡 Function completes after returning the greeting string and printing it.

Variable Tracker

Variable	Start	After Call	After Return	Final
name	undefined	"Alice"	"Alice"	undefined
return value	N/A	N/A	"Hello, Alice!"	"Hello, Alice!"

Key Moments - 3 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 execution_table step 1 where the parameter type is set.

What happens if we pass a number instead of a string?

TypeScript will show an error before running the code because the parameter expects a string, as seen in the type annotation in execution_table step 1.

Does the type annotation affect the output at runtime?

No, type annotations are for checking during development. The output in execution_table step 4 is just the string returned by the function.

Visual Quiz - 3 Questions

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

A string

B number

C boolean

D undefined

💡 Hint

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

At which step does the function return the greeting string?

A Step 2

B Step 3

C Step 1

D Step 4

💡 Hint

Look at the 'Function Output' column to see when the greeting string is produced.

If we remove ': string' from the parameter, what changes in the execution_table?

A Parameter value will be undefined

B Function output will change

C Parameter type column will be empty or 'any'

D Execution will stop immediately

💡 Hint

Type annotations affect the 'Parameter 'name' Type' column in the execution_table.

Concept Snapshot

Type annotation on function parameters:
function funcName(param: type) { ... }
- ': type' tells what type the parameter must be.
- Helps catch errors before running code.
- Does not affect runtime output.
- Example: function greet(name: string) { ... }

Full Transcript

This visual execution shows how to add a type annotation to a function parameter in TypeScript. The function greet takes a parameter 'name' typed as string. When called with "Alice", the function returns a greeting string. The type annotation helps TypeScript check that the argument is a string before running. The execution table traces each step: declaration, call, return, and output. Variables 'name' and the return value change as the function runs. Key moments clarify why the type is added and its effect. The quiz tests understanding of parameter types and execution steps.