How do you specify a function type in an interface or type?

TypeScriptMiddle~1 min read

1. Function type as `type` (type alias)

The simplest and most common way is to describe the function signature using arrow syntax:

javascript

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

const sayHello: Greet = (name) => `Hello, ${name}!`;

console.log(sayHello("Tim")); // Hello, Tim!

Here:

Greet is a function type
the function accepts a name: string parameter
it returns string

2. Function type in an `interface`

In an interface, a function can be described in two ways:

Option 1. Using an arrow (call) signature

javascript

interface Greet {
  (name: string): string;
}

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

Option 2. As an object property that is a function

javascript

interface User {
  name: string;
  greet: (message: string) => void;
}

const user: User = {
  name: "Tim",
  greet: (msg) => console.log(`${msg}, I'm ${user.name}`),
};

This option is more common when the function is an object method.

3. A method in an interface (with short syntax)

TypeScript supports a "method" notation (as in classes):

javascript

interface Logger {
  log(message: string): void;
  error(message: string): void;
}

const consoleLogger: Logger = {
  log(msg) {
    console.log("LOG:", msg);
  },
  error(msg) {
    console.error("ERROR:", msg);
  },
};

Both variants (log: (msg) => void and log(msg): void) are fully equivalent.

4. A generic function in an interface or type

If a function needs to work with different data types, you can use <T>:

javascript

type Identity = <T>(value: T) => T;

const identity: Identity = (x) => x;

identity(42);       // number
identity("hello");  // string

Or in an interface:

javascript

interface Transformer {
  <T>(data: T): T;
}

const transform: Transformer = (data) => data;

5. Multiple functions (overloads) in an interface

TypeScript allows you to declare overloads inside interfaces:

javascript

interface Converter {
  (value: string): number;
  (value: number): string;
}

const convert: Converter = (value: any): any =>
  typeof value === "string" ? Number(value) : String(value);

convert("10"); // number
convert(20);   // string

6. Example in a React / events context

A function as a prop:

javascript

interface ButtonProps {
  label: string;
  onClick: (event: MouseEvent) => void;
}

const button: ButtonProps = {
  label: "Click me",
  onClick: (e) => console.log(e.type),
};

Comparing the approaches

Scenario	Syntax	Where it's used
Type alias	`type Fn = (x: number) => string`	General-purpose functions
Interface (arrow form)	`interface Fn { (x: number): string }`	Call signatures
Interface (function property)	`greet: (msg: string) => void`	Object methods
Interface (method form)	`greet(msg: string): void`	Classes, objects
Generic function	`<T>(value: T) => T`	Generic types
Overloads	`(x: string): number; (x: number): string;`	Multiple signatures

Final example - all together

javascript

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

interface Calculator {
  add: MathOp;
  subtract(a: number, b: number): number;
  multiply: (a: number, b: number) => number;
  divide(a: number, b: number): number;
}

const calc: Calculator = {
  add: (a, b) => a + b,
  subtract(a, b) {
    return a - b;
  },
  multiply: (a, b) => a * b,
  divide: (a, b) => a / b,
};

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.