πŸ’‘ This page contain affiliate links. By making a purchase through them, we may 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 β€’ Read time 3 min read
Learn how you can define function types in JavaScript using two different ways.
  • twitter
  • facebook
TypeScript

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.

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

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.

Copied to clipboard!
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

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.


Typing Object Parameters

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

Copied to clipboard!
// 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

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.

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

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.

Copied to clipboard!
// 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

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 TypeScriptinfo Remove ads

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
  • twitter
  • facebook
TypeScript
Did you find this page helpful?
πŸ“š More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Access 100+ interactive lessons
  • check Unlimited access to hundreds of tutorials
  • check Prepare for technical interviews
Become a Pro

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.