πŸ’‘ This page contain affiliate links. By making a purchase through them, we earn a commission at no extra cost to you.
How to Type Functions in TypeScript

How to Type Functions in TypeScript

Declaring function types in two ways
Ferenc Almasi β€’ 2022 November 10 β€’ πŸ“– 3 min read

We can break down typing functions in TypeScript into two parts: typing the parameters and typing the return value. For best coverage, you want to type both. Most commonly, functions are typed inline. This means types are added as part of the function. Let's take a look at an example.

const stringify = (value: any): string => JSON.stringify(value)
Typing a function
Copied to clipboard!

This simple function turns a value into a string. It accepts any value and returns a string. When it comes to typing parameters, we can define the parameter types next to the name of the parameter after a colon. The return type of the function always comes after the parentheses. The same annotation applies to multiple parameters too.

const add = (a: number, b: number): number => a + b

// ❌ This will throw:
// Argument of type 'string' is not assignable to parameter of type 'number'. ts(2345)
add('1', '2')

// ❌ This will throw:
// Property 'replace' does not exist on type 'number'. ts(2339)
add(1, 2).replace('0', '*')
Typing multiple parameters in a function
Copied to clipboard!

As expected, this will prevent unexpected types to be passed into the function, as well as using the return type in unexpected places, or calling non-existing functions on it.

Looking to improve your skills? Master TypeScript from start to finish.
Master TypeScript

Typing Object Parameters

You may also come across one of the following syntaxes when defining types for destructured objects:

// Inline types
const slider = ({
  selector,
  animation,
  images
}: {
  selector: string
  animation: 'slide' | 'fade'
  images: string[]
}) => {}

// Separated types
type Props = {
  selector: string
  animation: 'slide' | 'fade'
  images: string[]
}

const slider = ({ selector, animation, images }: Props) => {}
Typing an object parameter
Copied to clipboard!

In the first example, we inlined the types, while in the second example for brevityΒ β€” especially common in ReactΒ β€” we outsourced it into a type called Props, and assigned it to the parameters. We can use the void type when a function doesn't return anything. This is also true for the above case where we rather create something as opposed to returning a value.

// Use void if a function doesn't return anything
const slider = (...): void => {}
const animate = (): void => {}
Typing function with no return values
Copied to clipboard!

Defining Types Separately

As shown in the above example, types on the other hand can also be defined separately. Let's take the very first code as an example.

// Inlining types
const stringify = (value: any): string => JSON.stringify(value)

// Defining types separately
type Stringify = (value: any) => string

const stringify: Stringify = (value) => JSON.stringify(value)
Defining types separately
Copied to clipboard!

In the second case, we defined a type called Stringify and assign it to the stringify function. In this case, we can leave out the types for the parameters as well as the return type, as the Stringify type already defines it.

Notice the difference in syntax. When using separate types, we need to call the type after the name of the function. Calling it after the parameters would act as a return type.

Looking to improve your skills? Master TypeScript from start to finish.
Master TypeScript

Summary

In summary, when working with function types in TypeScript we should keep the following points in mind:

  • Both parameters and return types can be typed separately
  • Types can be inlined or defined separately
  • Use the type after the function name if you are outsourcing types
  • Avoid inlining types for destructured object
  • Use void for no return types
Did you find this page helpful?
πŸ“š More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Unlimited access to hundred of tutorials
  • check Access to exclusive interactive lessons
  • check Remove ads to learn without distractions
Become a Pro

Recommended