Type alias for functions in Typescript - Mini Project: Build & Apply

Type Alias for Functions in TypeScript

📖 Scenario: You are building a simple calculator app. You want to organize your code by giving a name to the type of functions that take two numbers and return a number.

🎯 Goal: Create a type alias called Operation for functions that take two number arguments and return a number. Then use this alias to define functions for addition and multiplication.

📋 What You'll Learn

Create a type alias named Operation for functions with two number parameters returning a number.

Create a function add using the Operation type that returns the sum of two numbers.

Create a function multiply using the Operation type that returns the product of two numbers.

Print the results of add(5, 3) and multiply(5, 3).

💡 Why This Matters

🌍 Real World

Type aliases for functions help keep code organized and clear, especially in apps with many similar functions like calculators or data processors.

💼 Career

Understanding type aliases for functions is important for writing clean, maintainable TypeScript code in professional software development.

1

Create the type alias for functions

Create a type alias called Operation for functions that take two number arguments and return a number.

Typescript

// Your code here

Hint

Use the type keyword followed by the alias name and the function signature.

2

Create the addition function using the type alias

Create a function called add with the type Operation that returns the sum of its two parameters a and b.

Typescript

type Operation = (a: number, b: number) => number;
// Your code here

Hint

Use const add: Operation = (a, b) => a + b; to define the function.

3

Create the multiplication function using the type alias

Create a function called multiply with the type Operation that returns the product of its two parameters a and b.

Typescript

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

const add: Operation = (a, b) => a + b;
// Your code here

Hint

Define multiply similarly to add, but multiply the two numbers.

4

Print the results of the functions

Print the results of add(5, 3) and multiply(5, 3) using console.log.

Typescript

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

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

const multiply: Operation = (a, b) => a * b;
// Your code here

Hint

Use console.log(add(5, 3)); and console.log(multiply(5, 3)); to show the results.

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