Typing Function Parameters & Returns

Sometimes you need to describe the shape of a function itself — not a specific function, but the type that any compatible function must follow. TypeScript lets you store a function's type signature in a variable declaration, which is essential for callbacks, event handlers, and higher-order functions.

Basic function type syntax:

let myFunc: (a: number, b: number) => number;

This reads: "myFunc must be a function that takes two number parameters and returns a number." It's a contract — any function assigned to myFunc must match this signature exactly.

function add(a: number, b: number) {
  return a + b;
}

function greet(name: string) {
  return "Hello, " + name;
}

myFunc = add;    // ✅ add takes two numbers, returns number
myFunc = greet;  // ❌ Error! greet takes a string, doesn't match

TypeScript checks that the assigned function's parameter types, parameter count, and return type all match the declared signature. If anything is off, you get an error at the assignment — not at runtime.

Parameter names in function type declarations are for readability only:

// These are the SAME type — parameter names don't matter
let fn1: (x: number, y: number) => number;
let fn2: (a: number, b: number) => number;

fn1 = fn2; // ✅ Perfectly fine — same signature

The parameter names x and y vs a and b make no difference. Only the types and their order matter. Use names that make the type readable — like (price: number, quantity: number) => number instead of (a: number, b: number) => number.

Callback types: This is where function type signatures shine. When a function accepts another function as a parameter, you need to type that callback:

function fetchData(callback: (data: string) => void) {
  // Simulate fetching data
  callback("Hello from server");
}

fetchData((result) => {
  console.log(result); // TypeScript knows result is string
});

The callback type (data: string) => void tells TypeScript: "This parameter must be a function that receives a string and returns nothing." When you call fetchData and pass a callback, TypeScript contextually types the callback's parameter — so result is automatically inferred as string without you having to annotate it.

Typing event handlers — a real-world use case:

type ClickHandler = (event: MouseEvent) => void;

function addButtonListener(handler: ClickHandler) {
  // ...attach handler to button
}

addButtonListener((e) => {
  console.log(e.clientX, e.clientY); // TypeScript knows e is MouseEvent
});

Higher-order functions — Array methods:

const names: string[] = ["Hyderabad", "Mumbai"];

// map's callback: (value: string, index: number, array: string[]) => U
const lengths = names.map((name) => name.length); // number[]

// filter's callback: (value: string, index: number, array: string[]) => boolean
const long = names.filter((name) => name.length > 5); // string[]

These are all powered by function type signatures under the hood. TypeScript knows the exact type of each callback parameter because Array.prototype.map and Array.prototype.filter are typed with function type signatures. This is why you get autocomplete and type checking inside callbacks without writing any annotations yourself.