πŸŽ„ Get 50% off from our JavaScript course for the holidays! πŸŽ„
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? Check out our interactive course to master JavaScript from start to finish.
JavaScript Course

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.


Summary

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

Share on
  • twitter
  • facebook
JavaScript Course Dashboard

Tired of looking for tutorials?

You are not alone. Webtips has more than 400 tutorials which would take roughly 75 hours to read.

Check out our interactive course to master JavaScript in less time.

Learn More

Recommended

πŸŽ‰ Thank you for subscribing to our newsletter. x