Function Type

A TypeScript function type defines the structural contract for a function’s signature, explicitly specifying the expected data types for its input parameters and its return value. It ensures compile-time type safety by validating assignments, though TypeScript safely permits assigning a function with fewer parameters to a target type expecting more parameters, provided the declared parameter types align.

Syntax

The standard syntax for a function type uses an arrow (=>) notation, which dictates the parameter types on the left and the return type on the right.

(param1: Type1, param2: Type2) => ReturnType

If a function does not return a value, its return type is void. TypeScript’s compiler automatically infers the void return type for functions lacking a return statement, meaning explicit annotation is not strictly mandatory but can be used for clarity. If a function never successfully returns (e.g., it always throws an error or contains an infinite loop), the return type is never.

let logMessage: (message: string) => void;
let throwError: (reason: string) => never;

Parameter Specifications

TypeScript provides specific modifiers for varying parameter requirements within a function type:

Optional Parameters Denoted by a question mark (?) immediately preceding the type annotation colon. Optional parameters must strictly follow all required parameters in the signature.

type FormatString = (input: string, toUpper?: boolean) => string;

Rest Parameters Denoted by the rest parameter syntax (...). The type must be defined as an array or a tuple. Array types represent an unbounded number of arguments of a specific type, whereas tuple types enforce a strictly bounded, fixed sequence of arguments.

// Unbounded array rest parameter
type SumOperation = (...numbers: number[]) => number;

// Bounded tuple rest parameter
type CoordinateOperation = (...coords: [number, number, string]) => void;

Parameter Assignability

When assigning a function implementation to a function type, TypeScript does not enforce strict arity matching. It safely allows a function with fewer parameters to be assigned to a type expecting more parameters. The reverse is not allowed; a function cannot require parameters that the target type does not provide.

type Logger = (message: string, timestamp: number) => void;

// Valid: The assigned function safely ignores the 'timestamp' parameter
const simpleLog: Logger = (message: string) => console.log(message);

Generic Functions

Function types can declare type parameters to create generic signatures. This allows the types of parameters and return values to be structurally related, maintaining type safety across varying input types.

// Generic arrow function type
type IdentityFunction = <T>(arg: T) => T;

// Generic call signature within an interface
interface MapFunction {
  <Input, Output>(array: Input[], fn: (item: Input) => Output): Output[];
}

Typing the this Context

TypeScript allows explicit typing of the this execution context within a function signature. The this parameter is a pseudo-parameter that must be declared first in the parameter list. It is used purely for compile-time type checking and is erased during JavaScript compilation.

interface ExecutionContext {
  userId: string;
}

type ContextualAction = (this: ExecutionContext, payload: string) => void;

Call Signatures

While the arrow syntax is standard for standalone function types, function types can also be declared using call signatures within object types or interfaces. This syntax is necessary when describing a callable object that also possesses its own properties.

In a call signature, the parameter list and return type are separated by a colon (:), rather than an arrow (=>).

interface DescribableFunction {
  description: string;             // Property signature
  (x: number, y: number): boolean; // Call signature
}

Construct Signatures

To describe a constructor function (a function designed to be invoked with the new keyword), a construct signature is used. It is structurally identical to a call signature but is prefixed with the new keyword.

class Widget {
  constructor(public id: number) {}
}

type WidgetConstructor = {
  new (id: number): Widget;
};

Function Overloads

TypeScript allows the declaration of multiple function type signatures for a single function implementation. This is achieved by stacking multiple signature declarations (the overloads) immediately preceding a single, generalized implementation signature.

// Overload signatures (Type definitions)
function parseData(input: string): string[];
function parseData(input: number): number[];

// Implementation signature (Must be compatible with all overloads)
function parseData(input: string | number): string[] | number[] {
  return [];
}

Contextual Typing

When a function expression is assigned to a variable or parameter that already has a declared function type, TypeScript applies contextual typing. The compiler infers the types of the parameters and the return value from the target signature, rendering explicit type annotations on the implementation redundant.

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

// Types for 'a' and 'b', and the return type, are inferred from MathOperation
const multiply: MathOperation = (a, b) => a * b;

Master TypeScript with Deep Grasping Methodology!

Learn More