How to create a function type using type?

TypeScriptJunior~1 min read

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 types:

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`

Short Answer

Interview ready

Premium

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