How to Type Function Callbacks in TypeScript Interfaces

By the end of this page, you will understand how to type callback functions in TypeScript interfaces using function signatures, when to use Function, why it is usually too broad, and how to define safer callback types with parameters and return values.

In TypeScript, functions have their own types. You do not usually write function as a type name. Instead, you describe a function by its parameter list and return type.

For example:

(type for a function) => returnType

A callback is just a function passed to another part of your program so it can be called later. Because TypeScript checks types, it wants to know:

• What arguments the callback receives
• What the callback returns

That is why this is valid:

interface Param {
    title: string;
    callback: () => void;
}

This means:

• callback is a function
• it takes no arguments
• it returns nothing (void)

If you truly want “any function” without describing its exact shape, TypeScript has a built-in Function type:

interface Param {
    title: ;
    : ;
}

Think of a callback type like a job description.

• any means: “This worker can be anything.”
• Function means: “This worker is at least a person, but I do not know their skills.”
• () => void means: “This worker takes no input and performs a task.”
• (name: string) => number means: “This worker receives a string and gives back a number.”

The more precise the job description, the easier it is to use the worker correctly.

If you only say “function,” that is too vague for TypeScript. It wants the shape of the function, not just the general idea that it is callable.

Basic function type syntax

A function type is written like this:

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

Example: callback with no arguments

interface Param {
    title: string;
    callback: () => void;
}

const item: Param = {
    title: "Save",
    callback: () => {
        console.log("Saved");
    }
};

Here:

• callback takes no arguments
• callback returns void

Example: callback with arguments

interface Param {
    title: ;
    :  ;
}

 :  = {
    : ,
    :  {
        .(message);
    }
};

Consider this example:

interface Param {
    title: string;
    callback: (count: number) => string;
}

const param: Param = {
    title: "Counter",
    callback: (count) => {
        return `Count is ${count}`;
    }
};

const result = param.callback(3);
console.log(result);

Step by step:

1. TypeScript reads the interface.

   • title must be a string.
   • callback must be a function that takes a number and returns a string.

2. The param object is checked against the interface.

Callback types appear everywhere in TypeScript applications.

Event handlers

interface ButtonConfig {
    label: string;
    onClick: () => void;
}

Used in UI code when a button should run some logic.

Data processing

interface Processor {
    transform: (input: string) => string;
}

Used when formatting text, cleaning data, or converting values.

API response handling

interface RequestOptions {
    onSuccess: (data: string) => void;
    onError: (message: string) => void;
}

Used when different functions handle successful and failed requests.

Array utilities

In real projects, developers rarely leave callback types vague unless they truly have no constraints.

Common pattern: define exact signatures

interface Task {
    run: () => Promise<void>;
}

This makes usage predictable.

Common pattern: reusable type aliases

type ErrorHandler = (error: Error) => void;

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

interface Handlers {
    onSuccess: SuccessHandler;
    onError: ErrorHandler;
}

This avoids repeating long function signatures.

Common pattern: optional callbacks

interface Config {
    title: string;
    ?:  ;
}

1. Using function as a type

This is invalid TypeScript:

interface Param {
    callback: function;
}

Why it fails:

• function is not a valid type keyword in TypeScript type annotations.
• You must use a function signature like () => void or the broad Function type.

2. Using any for callbacks

interface Param {
    callback: any;
}

Why it is risky:

• TypeScript cannot protect you
• You can call the callback incorrectly
• Errors move from compile time to runtime

3. Using Function when a specific signature is better

interface Param {
    callback: Function;
}

This is allowed, but weak.

// Best practice: define the exact callback signature
interface Param {
    title: string;
    callback: () => void;
}

// Callback with parameters
interface Param {
    title: string;
    callback: (message: string) => void;
}

// Callback with return value
interface Param {
    title: string;
    callback: (value: number) => boolean;
}

// Broad function type (allowed, but not ideal)
interface Param {
    title: string;
    callback: Function;
}

Rules

Why is function not accepted as a type in TypeScript?

Because function is not a valid type annotation keyword. TypeScript expects either a function signature like () => void or a built-in type such as Function.

Should I use Function for callbacks in TypeScript?

Only if you truly want any callable function and do not care about parameters or return type. In most cases, a specific function signature is better.

What is the correct way to type a callback with no arguments?

Use:

() => void

This means the function takes no arguments and returns nothing.

How do I type a callback that returns a value?

Use a return type after the arrow:

(value: number) => string

Can I make a callback optional in an interface?

Yes:

interface Param {
    callback?: () => void;
}

Is the same as ?

• TypeScript interfaces — Interfaces define the shape of objects, including function properties.
• Function types — This is the core concept used to type callbacks.
• Type aliases — Useful for naming reusable callback signatures.
• Optional properties — Many callbacks are optional in configuration objects.
• Return types — Important when a callback must produce a value.
• Parameter types — They define what input a callback accepts.
• any vs unknown — Helpful for understanding when broad types reduce safety.
• Arrow functions — Common syntax used when implementing callbacks.