Typing Arrow Functions

Part of the Introduction To TypeScript section of Coddy's JavaScript journey — lesson 23 of 73.

For arrow functions, you add type annotations to parameters within the parentheses, just like regular functions. The return type annotation comes after the parameter list but before the arrow (=>):

const multiply = (a: number, b: number): number => {
  return a * b;
};

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

The key difference from regular function declarations is that the return type annotation appears before the arrow rather than after the function name. This maintains TypeScript's type safety while preserving the clean, modern syntax that makes arrow functions popular.

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Challenge

Easy

Convert the following regular function declaration to an arrow function while maintaining all type annotations:

function subtract(a: number, b: number): number {
  return a - b;
}

Create an arrow function named subtract that performs the same operation with the same parameter types and return type.

Then create two additional arrow functions:

An arrow function named createMessage that takes a parameter text of type string and returns a string with the format "Message: [text]". Include explicit type annotations for both the parameter and return type.
An arrow function named isPositive that takes a parameter num of type number and returns true if the number is greater than 0, otherwise false. Include explicit type annotations for both the parameter and return type.

Test your arrow functions by calling them with the following values and printing the results:

Call subtract with 10 and 3
Call createMessage with "Hello World"
Call isPositive with -5
Call isPositive with 8

Print each result on a separate line in the order specified above.

Cheat sheet

Arrow functions use type annotations for parameters within parentheses, with the return type annotation before the arrow (=>):

const multiply = (a: number, b: number): number => {
  return a * b;
};

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

The return type annotation appears before the arrow rather than after the function name, maintaining TypeScript's type safety with arrow function syntax.

Try it yourself

// TODO: Convert the regular function to arrow function and create the additional arrow functions

// TODO: Create the subtract arrow function with type annotations

// TODO: Create the createMessage arrow function with type annotations

// TODO: Create the isPositive arrow function with type annotations

// TODO: Test your arrow functions and print the results

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.