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.

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