Type alias for functions in Typescript - Step-by-Step Execution

Concept Flow - Type alias for functions

Define type alias

↓

Use alias to type a function

↓

Call function with correct args

↓

Function runs and returns value

↓

Use returned value

First, we create a type alias for a function signature. Then we use it to type a function. When we call the function, it runs and returns a value typed by the alias.

Execution Sample

Typescript

type Greet = (name: string) => string;

const sayHello: Greet = (name) => {
  return `Hello, ${name}!`;
};

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

This code defines a type alias for a function that takes a string and returns a string, then uses it to type a function that greets by name.

Execution Table

Step	Action	Evaluation	Result
1	Define type alias Greet	Greet = (string) => string	Type alias created
2	Assign sayHello with type Greet	sayHello: Greet	sayHello typed as function(string) => string
3	Call sayHello("Alice")	Input: "Alice"	Function executes
4	Return from sayHello	Returns `Hello, Alice!`	Output: "Hello, Alice!"
5	console.log output	Prints to console	Hello, Alice!
6	End	No more code	Execution stops

💡 All steps completed, function called and output printed

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
Greet	undefined	type alias set	type alias set	type alias set	type alias set
sayHello	undefined	undefined	function assigned	function assigned	function assigned
name	undefined	undefined	undefined	"Alice"	undefined
return value	undefined	undefined	undefined	"Hello, Alice!"	"Hello, Alice!"

Key Moments - 3 Insights

Why do we use a type alias for a function instead of typing the function directly?

Using a type alias (see step 1 in execution_table) lets us reuse the function signature easily for multiple functions, keeping code clear and consistent.

What happens if the function does not return a string as the alias requires?

TypeScript will show an error at assignment (step 2) because the function's return type must match the alias's return type, ensuring type safety.

Why is the variable 'name' undefined before the function call?

'name' is a parameter local to the function and only gets a value when the function is called (step 3). Before that, it does not exist in the outer scope.

Visual Quiz - 3 Questions

Look at the execution table, what is the output printed at step 5?

A "Hello, Alice!"

B "Hello, Bob!"

C undefined

D Error

💡 Hint

Check the 'Result' column at step 5 in the execution_table.

At which step does the function parameter 'name' get its value?

A Step 1

B Step 4

C Step 3

D Step 5

💡 Hint

Look at the 'Evaluation' column for when 'name' is assigned a value in the execution_table.

If we change the type alias to return number instead of string, what will happen at step 2?

A No error, function works as before

B TypeScript error because function returns string not number

C Function returns number automatically

D Function call fails at runtime

💡 Hint

Refer to key_moments about return type mismatch and step 2 in execution_table.

Concept Snapshot

Type alias for functions:
- Syntax: type Name = (params) => returnType;
- Use alias to type functions for clarity and reuse
- Ensures function matches signature
- Helps catch errors early
- Example: type Greet = (name: string) => string;

Full Transcript

This visual trace shows how to create a type alias for a function in TypeScript. First, we define the alias 'Greet' as a function taking a string and returning a string. Then we assign a function 'sayHello' using this alias. When we call sayHello with 'Alice', the function runs and returns 'Hello, Alice!'. The console.log prints this output. Variables like 'name' only get values during the function call. Using type aliases helps keep code clear and safe by enforcing function signatures.

Practice

1.

What is the main purpose of using a type alias for functions in TypeScript?

easy

A. To make the function run faster

B. To execute the function automatically

C. To convert a function into a class

D. To give a simple name to a function's input and output types

Solution

1. Step 1: Understand what a type alias does

   A type alias gives a new name to a type, including function types, making code easier to read.

2. Step 2: Identify the purpose for functions

   For functions, it means naming the input and output types so you don't repeat them everywhere.

3. Final Answer:

   To give a simple name to a function's input and output types -> Option D

4. Quick Check:

   Type alias simplifies function types = A [OK]

Hint: Type alias names function types to avoid repetition [OK]

Common Mistakes:

• Thinking type alias runs the function
• Confusing type alias with classes
• Believing it improves runtime speed

2.

Which of the following is the correct syntax to create a type alias MyFunc for a function that takes a string and returns a number?

type MyFunc = ?

easy

A. string => number

B. function(string): number

C. (input: string) => number

D. (string) => number

Solution

1. Step 1: Recall TypeScript function type syntax

   Function types use (parameters) => returnType format, with parameter names and types.

2. Step 2: Match the correct syntax

   (input: string) => number uses (input: string) => number, which is correct syntax for a function type alias.

3. Final Answer:

   (input: string) => number -> Option C

4. Quick Check:

   Function type alias syntax = D [OK]

Hint: Use (param: type) => returnType for function type alias [OK]

Common Mistakes:

• Omitting parameter name in type alias
• Using 'function' keyword inside type alias
• Writing parameter type without parentheses

3.

Given the type alias and function below, what is the output of console.log(add('5', '10'))?

type AddFunc = (a: number, b: number) => number;

const add: AddFunc = (a, b) => a + b;

console.log(add('5', '10'));

medium

A. Type error at compile time

B. 510

C. 15

D. NaN

Solution

1. Step 1: Check the type alias and function parameters

   The type alias expects two numbers as input and returns a number.

2. Step 2: Analyze the function call with string arguments

   Calling add('5', '10') passes strings, which conflicts with the expected number types, causing a compile-time error.

3. Final Answer:

   Type error at compile time -> Option A

4. Quick Check:

   Type mismatch causes compile error = C [OK]

Hint: Check argument types match alias parameters to avoid errors [OK]

Common Mistakes:

• Assuming strings convert automatically to numbers
• Expecting runtime error instead of compile error
• Thinking output is string concatenation

4.

Identify the error in this code using a type alias for a function:

type Greet = (name: string) => void;

const greet: Greet = (name) => {
  return "Hello, " + name;
};

medium

A. The function should not return a string because return type is void

B. The parameter name is missing

C. The type alias syntax is incorrect

D. The function should return a number

Solution

1. Step 1: Check the type alias return type

   The alias Greet specifies the function returns void, meaning no value returned.

2. Step 2: Check the function implementation

   The function returns a string "Hello, " + name, which conflicts with void return type.

3. Final Answer:

   The function should not return a string because return type is void -> Option A

4. Quick Check:

   Return type void means no return value = B [OK]

Hint: Void return means no value should be returned [OK]

Common Mistakes:

• Returning a value when return type is void
• Ignoring return type mismatch
• Confusing void with undefined

5.

You want to create a type alias FilterFunc for a function that takes an array of numbers and a callback function. The callback takes a number and returns a boolean. The FilterFunc returns a new array of numbers filtered by the callback. Which is the correct type alias?

hard

A. (arr: number[], callback: (num: number) => number) => boolean[]

B. (arr: number[], callback: (num: number) => boolean) => number[]

C. (arr: number[], callback: (num: number) => boolean) => boolean[]

D. (arr: number[], callback: (num: number) => boolean) => void

Solution

1. Step 1: Understand the function inputs

   The function takes an array of numbers and a callback that returns boolean for each number.

2. Step 2: Understand the function output

   The function returns a new array of numbers filtered by the callback, so return type is number[].

3. Step 3: Match the correct type alias

   (arr: number[], callback: (num: number) => boolean) => number[] matches the input and output types correctly.

4. Final Answer:

   (arr: number[], callback: (num: number) => boolean) => number[] -> Option B

5. Quick Check:

   Filter function type = A [OK]

Hint: Filter returns array of same type, callback returns boolean [OK]

Common Mistakes:

• Returning boolean[] instead of number[]
• Callback returning number instead of boolean
• Using void return type incorrectly