Suggest an edit

Improve this article

Refine the answer for “How to create a function type using 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. Basic syntax

```javascript
type TypeName = (param1: Type1, param2: Type2, ...) => ReturnType;
```

> That is, you describe the **function signature**:
> what parameters it accepts and what it returns.

---

### Example 1. A simple function

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

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

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

Here:

- `Greet` is a **function type**
- it accepts one argument, `name: string`
- it returns `string`

---

### Example 2. A function with no return value (`void`)

```javascript
type Logger = (message: string) => void;

const log: Logger = (msg) => console.log(msg);
```

> The `void` type means the function **returns nothing**, it only performs an action (a side effect).

---

### Example 3. A function with several parameters

```javascript
type Sum = (a: number, b: number) => number;

const add: Sum = (x, y) => x + y;
```

---

### Example 4. A function with optional parameters

```javascript
type Greet = (name: string, age?: number) => string;

const greet: Greet = (name, age) =>
  age ? `Hello, ${name}! You are ${age} years old.` : `Hello, ${name}!`;

greet("Tim");       // Hello, Tim!
greet("Alex", 25);  // Hello, Alex! You are 25 years old.
```

> `age?: number` is an optional parameter.

---

### Example 5. A generic function

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

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

identity(42);       // number
identity("hello");  // string
identity({ id: 1 }); // { id: number }
```

> Here `<T>` is a **generic parameter** that lets the function work with any type.

---

### Example 6. A function that returns a `Promise`

```javascript
type FetchUser = (id: number) => Promise<{ id: number; name: string }>;

const fetchUser: FetchUser = async (id) => {
  return { id, name: "Tim" };
};
```

> `Promise<T>` indicates that the function is **asynchronous**
> and returns a result of type `T` once it completes.

---

### Example 7. A function with rest parameters

```javascript
type Join = (...parts: string[]) => string;

const join: Join = (...parts) => parts.join("-");

console.log(join("a", "b", "c")); // "a-b-c"
```

> `...parts: string[]` - the function accepts any number of arguments.

---

### Example 8. A function with a tuple of arguments

If you want to specify **strictly defined arguments of different types**:

```javascript
type Format = (...args: [prefix: string, count: number, active: boolean]) => string;

const format: Format = (prefix, count, active) =>
  `${prefix}: ${count} (${active ? "on" : "off"})`;

format("Users", 5, true); // "Users: 5 (on)"
```

---

## Using function types inside other structures

You can embed such types inside objects, interfaces, and other `type`s:

```javascript
type User = {
  name: string;
  greet: (msg: string) => void;
};

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

---

## Comparing `type` and `interface` for functions

| Feature | `type` | `interface` |
|---|---|---|
| Describes a function signature | Yes | Yes |
| Supports union/intersection | Yes | No |
| Can describe generics | Yes | Yes |
| Can be extended | Via `&` | Via `extends` |
| Recommended for | Functions, unions, and generics | Structures (objects, classes) |

---

## Summary

| What we describe | Syntax | Example |
|---|---|---|
| Simple function | `(x: number) => number` | `type Add = (a: number, b: number) => number` |
| No `return` | `(msg: string) => void` | `type Logger = (msg: string) => void` |
| Generic | `<T>(v: T) => T` | `type Identity = <T>(v: T) => T` |
| Async | `() => Promise<T>` | `type Fetch = () => Promise<User>` |
| Rest | `(...args: string[]) => string` | `type Join = (...args: string[]) => string` |

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.