Parameters type in Typescript - Step-by-Step Execution

Concept Flow - Parameters type

Function declared with typed parameters

↓

Function called with arguments

↓

TypeScript checks argument types

↓

Function runs

↓

Return value

This flow shows how TypeScript checks the types of function parameters when the function is called, allowing the function to run only if types match.

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, printing a greeting.

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	Function greet called	string	"Alice"	Match	N/A
3	Function body executes	string	"Alice"	Match	"Hello, Alice!"
4	console.log outputs	string	"Alice"	Match	Hello, Alice!

💡 Execution stops after console.log outputs the greeting.

Variable Tracker

Variable	Start	After Call	Final
name	undefined	"Alice"	"Alice"

Key Moments - 2 Insights

Why does TypeScript give an error if I pass a number instead of a string?

Because the function parameter 'name' is typed as string, passing a number fails the type check at step 2 in the execution table.

Can I call the function without any argument?

No, because the parameter 'name' is required and typed as string, skipping it causes a type error before execution.

Visual Quiz - 3 Questions

Look at the execution table, what is the type check result when calling greet with "Alice"?

A No check

B Mismatch

C Match

D Error

💡 Hint

See row 2 in the execution_table where argument "Alice" is passed and type check result is shown.

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

A Step 2

B Step 3

C Step 1

D Step 4

💡 Hint

Check the 'Output' column in execution_table row 3 where the function body runs and returns the greeting.

If you pass a number instead of a string, what would happen according to the flow?

A TypeScript shows an error before running

B Function runs normally

C Output is converted to string automatically

D Function returns undefined

💡 Hint

Refer to the concept_flow where type mismatch leads to an error before function runs.

Concept Snapshot

Parameters type in TypeScript:
- Define function parameters with types: function f(x: type) {}
- When calling, arguments must match parameter types
- Type mismatch causes compile-time error
- Helps catch bugs early
- Example: function greet(name: string) { ... }

Full Transcript

This visual execution shows how TypeScript checks parameter types when calling a function. The function greet expects a string parameter named 'name'. When called with "Alice", TypeScript confirms the argument matches the string type. The function then runs and returns a greeting string. If a wrong type is passed, TypeScript will show an error before running the function. Variables track the parameter value during execution. This helps beginners understand how parameter types enforce correct usage and prevent errors.

Practice

1. What does specifying a parameter type in a TypeScript function do?
function greet(name: string) {}

easy

A. It tells the function what type of value to expect for that parameter.

B. It changes the return type of the function automatically.

C. It makes the parameter optional.

D. It converts the parameter to a string.

Solution

1. Step 1: Understand parameter type declaration

   In TypeScript, writing name: string means the function expects a string value for name.

2. Step 2: Effect of parameter type

   This helps catch errors if a different type is passed and makes the code clearer.

3. Final Answer:

   It tells the function what type of value to expect for that parameter. -> Option A

4. Quick Check:

   Parameter type = expected value type [OK]

Hint: Parameter types define expected input data [OK]

Common Mistakes:

• Thinking parameter type changes return type
• Assuming parameter becomes optional automatically
• Believing parameter type converts data

2. Which of the following is the correct way to declare a function parameter of type number in TypeScript?

easy

A. function add(x number) {}

B. function add(x: number) {}

C. function add(number x) {}

D. function add(x = number) {}

Solution

1. Step 1: Check TypeScript parameter syntax

   The correct syntax uses a colon between the parameter name and its type: x: number.

2. Step 2: Identify correct option

   function add(x: number) {} matches this syntax exactly, others have syntax errors.

3. Final Answer:

   function add(x: number) {} -> Option B

4. Quick Check:

   Parameter syntax = name: type [OK]

Hint: Use colon between parameter and type [OK]

Common Mistakes:

• Omitting colon between name and type
• Placing type before parameter name
• Using equals sign instead of colon

3. What will be the output of this TypeScript code?

function multiply(a: number, b: number) {
  return a * b;
}
console.log(multiply(3, 4));

medium

A. 12

B. 34

C. undefined

D. Error: Type mismatch

Solution

1. Step 1: Understand function parameters and operation

   The function takes two numbers and returns their product.

2. Step 2: Calculate the output

   Calling multiply(3, 4) returns 3 * 4 = 12.

3. Final Answer:

   12 -> Option A

4. Quick Check:

   3 * 4 = 12 [OK]

Hint: Multiply parameters as numbers to get output [OK]

Common Mistakes:

• Concatenating numbers as strings
• Expecting error due to types
• Confusing return value with parameter list

4. Identify the error in this TypeScript function declaration:

function greet(name string) {
  console.log('Hello, ' + name);
}

medium

A. Parameter name cannot be 'name'.

B. Parameter type should be after the function name.

C. Function must return a value.

D. Missing colon between parameter name and type.

Solution

1. Step 1: Check parameter syntax

   The parameter declaration name string is missing a colon between name and string.

2. Step 2: Correct syntax

   It should be name: string to be valid TypeScript.

3. Final Answer:

   Missing colon between parameter name and type. -> Option D

4. Quick Check:

   Parameter syntax requires colon [OK]

Hint: Always put colon between parameter and type [OK]

Common Mistakes:

• Omitting colon in parameter type
• Thinking parameter type goes after function name
• Assuming function must return value

5. Given this function, which call will cause a TypeScript error due to parameter types?

function setFlag(flag: boolean) {
  return flag ? 'ON' : 'OFF';
}

hard

A. setFlag(true)

B. setFlag(false)

C. setFlag('true')

D. setFlag(Boolean(0))

Solution

1. Step 1: Check parameter type expected

   The function expects a boolean parameter.

2. Step 2: Analyze each call

   Calls with true, false, and Boolean(0) are booleans. Passing 'true' (a string) causes a type error.

3. Final Answer:

   setFlag('true') -> Option C

4. Quick Check:

   String passed instead of boolean causes error [OK]

Hint: Pass correct type, not string for boolean parameters [OK]

Common Mistakes:

• Passing string instead of boolean
• Confusing Boolean() constructor with string
• Assuming any truthy value is allowed