Suggest an edit

Improve this article

Refine the answer for “How do you specify a function type in an interface or type?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 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,
};
```

Markdown · drag & drop images · ⌘B / ⌘I shortcuts556 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.