Functions in TypeScript

After this lesson, you will be able to: Type functions: parameters, return types, optional + default, overloads.

Function types are where TS really pays off, function signatures become living contracts.

Function signatures

Inferred vs explicit.

tsx

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

// Explicit return
function greet(name: string): string { return `Hello, ${name}`; }

// Async
async function fetchUser(id: string): Promise<User> {
  const r = await fetch(`/users/${id}`);
  return r.json();
}

// Arrow + type annotation
const sub = (a: number, b: number): number => a - b;

// Function type alias
type Handler<T> = (event: T) => void;
const onClick: Handler<MouseEvent> = (e) => console.log(e.clientX);

Optional, default, rest

Match runtime behavior in types.

tsx

// Optional parameter
function greet(name: string, greeting?: string) {
  return `${greeting ?? "Hello"}, ${name}`;
}

// Default value (becomes optional)
function greet2(name: string, greeting = "Hello") {
  return `${greeting}, ${name}`;
}

// Rest
function sum(...nums: number[]): number {
  return nums.reduce((a, b) => a + b, 0);
}

// Keyword args via options object (preferred for >2 args)
function createUser(opts: { name: string; email: string; admin?: boolean }) {
  return { ...opts, id: crypto.randomUUID() };
}

Overloads (when one signature isn't enough)

Use sparingly, generics + union returns are usually cleaner.

tsx

function pick(arr: string[], n: number): string;
function pick(arr: number[], n: number): number;
function pick(arr: (string | number)[], n: number): string | number {
  return arr[n];
}

const a = pick(["a", "b"], 0);   // string
const b = pick([1, 2], 0);         // number

// Often better: generic
function pickG<T>(arr: T[], n: number): T { return arr[n]; }

Common mistakes only experienced TS devs avoid

Using `Function` type. Way too broad. Type the exact signature. Letting TS infer when an explicit annotation reads better (for exported APIs especially). Returning Promise<any>. Type the result; downstream loses guarantees. Long parameter lists. Use options objects with destructuring.

Quick Check

Why prefer an options object over many positional parameters?

Pick the cleanest answer.

←Type System Fundamentals

Back to TypeScript

Interfaces vs Type Aliases→