Type alias for functions in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this TypeScript function using a type alias?

Consider the following TypeScript code that uses a type alias for a function. What will be printed when greet('Alice') is called?

Typescript

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

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

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

A "Hello, Alice!"

B Error: greet is not a function

C undefined

D Hello, Alice!

💡 Hint

Remember that console.log prints the string without quotes.

The function greet returns the string Hello, Alice!. When printed with console.log, the output is Hello, Alice! without quotes.

🧠 Conceptual

intermediate

Which type alias correctly describes a function that takes two numbers and returns a boolean?

Choose the correct TypeScript type alias for a function that takes two number arguments and returns a boolean.

A type Compare = (a: string, b: string) => boolean;

B type Compare = (a: number, b: number) => number;

C type Compare = (a: number, b: number) => boolean;

D type Compare = (a: number) => boolean;

💡 Hint

Check the parameter types and the return type carefully.

The function must take two numbers and return a boolean. Option C matches this exactly.

🔧 Debug

advanced

What error does this TypeScript code produce?

Examine the following TypeScript code using a type alias for a function. What error will the TypeScript compiler report?

Typescript

type Operation = (x: number, y: number) => number;

const add: Operation = (x, y) => {
  return x + y;
};

const result: string = add(5, 3);

A Cannot assign to 'result' because it is a constant.

B Type 'number' is not assignable to type 'string'.

C Parameter 'y' implicitly has an 'any' type.

D No error, code compiles successfully.

💡 Hint

Look at the type of result and the return type of add.

The function add returns a number, but result is declared as a string. This causes a type mismatch error.

📝 Syntax

advanced

Which option correctly defines a type alias for a function with optional parameters?

Which of the following TypeScript type aliases correctly defines a function type that takes one required string parameter and one optional number parameter, returning void?

A type Func = (name: string, age?: number) => void;

B type Func = (name?: string, age: number) => void;

C type Func = (name: string, age: number?) => void;

D type Func = (name: string, age: number | undefined) => void;

💡 Hint

Optional parameters are marked with a question mark after the parameter name.

Option A correctly marks age as optional. Option A makes name optional instead. Option A has invalid syntax. Option A uses a union type but does not make the parameter optional.

🚀 Application

expert

How many items are in the resulting array after applying this function type alias?

Given the following TypeScript code, how many items will the results array contain after execution?

Typescript

type Transformer = (input: string) => string;

const transformers: Transformer[] = [
  (s) => s.toUpperCase(),
  (s) => s + "!",
  (s) => s.repeat(2)
];

const input = "hi";
const results = transformers.map(fn => fn(input));

A 3

B 1

C 0

D Error at runtime

💡 Hint

Count how many functions are in the transformers array.

There are 3 functions in the transformers array. The map method applies each function to the input string, so results will have 3 items.

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