Welcome back! I am Mihir, and in this lesson we will learn function type expressions in TypeScript.

A function type expression describes the shape of a function: what parameters it accepts and what it returns.

Basic Function Type Expression

let greet: (name: string) => string;

This means greet must be a function that:

• accepts one string parameter
• returns a string

Example:

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

Invalid:

greet = (age: number) => age;

The parameter and return types do not match.

Function Type Syntax

The syntax looks like this:

(parameterName: parameterType) => returnType

Example:

(a: number, b: number) => number

This describes a function that accepts two numbers and returns a number.

Using Function Types with Variables

const add: (a: number, b: number) => number = (a, b) => {
  return a + b;
};

TypeScript knows a and b are numbers from the function type.

So you can write:

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

Reusable Function Type Aliases

Long function types can be hard to read.

Use a type alias:

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

const add: MathOperation = (a, b) => a + b;
const multiply: MathOperation = (a, b) => a * b;

Now both functions share the same contract.

Callback Function Types

Function type expressions are common for callbacks.

function processName(name: string, formatter: (value: string) => string): string {
  return formatter(name);
}

const result = processName("mihir", (value) => value.toUpperCase());

TypeScript knows value is a string because of the callback type.

Callback Type Alias

type Formatter = (value: string) => string;

function processName(name: string, formatter: Formatter): string {
  return formatter(name);
}

This is cleaner when the callback type is reused.

void Function Types

Use void when the callback does not return useful data.

type Logger = (message: string) => void;

const logInfo: Logger = (message) => {
  console.log(message);
};

This function is called for its side effect.

Function Types in Objects

Object types can contain function properties.

type ButtonProps = {
  label: string;
  onClick: () => void;
};

const button: ButtonProps = {
  label: "Save",
  onClick: () => {
    console.log("Saved");
  },
};

This pattern is common in UI code.

Optional Function Properties

type ModalProps = {
  title: string;
  onClose?: () => void;
};

function closeModal(props: ModalProps): void {
  props.onClose?.();
}

onClose may be missing, so optional chaining keeps the call safe.

Rest Parameters in Function Types

type Logger = (...messages: string[]) => void;

const logger: Logger = (...messages) => {
  messages.forEach((message) => console.log(message));
};

This function accepts any number of string arguments.

Common Mistake: Confusing Arrow Function Values and Function Types

This is a function value:

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

This is a function type:

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

The type describes the shape. The value is the actual function.

Quick Reference Summary

Practice

Create a reusable callback type:

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

function transformText(value: string, transformer: Transformer): string {
  return transformer(value);
}

const result = transformText("typescript", (value) => value.toUpperCase());

console.log(result);

Try returning a number from the transformer and see what TypeScript says.

What You've Learned

You now understand:

• What function type expressions are
• How to describe function parameters and returns
• How to type function variables
• How to create reusable function type aliases
• How to type callbacks
• How to use function types in objects
• How optional callback properties work
• How rest parameters work in function types

What's Next?

In the next lesson, we will learn Arrow Functions in TypeScript.

We will combine concise function syntax with strong parameter and return typing.

Need Help?

• Have questions, confusion, or want to know more? Contact me

Function type expressions are TypeScript's way of saying: this function must have this shape.