← All Articles

Function types are weird in TypeScript

Matt Pocock
Matt Pocock

Let's look at a question I got asked the other day:

type TakesOneArgument = (a: string) => void

// Why does this not error in TypeScript?
const func: TakesOneArgument = () => {}

In the type TakesOneArgument, we're saying that the function takes a string and returns void. But when we use TakesOneArgument to annotate a function that doesn't take any arguments, TypeScript doesn't complain.

Why is this?

Let's look at an example that might look less weird:

const array = ['a', 'b', 'c']

// No errors!
array.forEach(() => {})

Here, we're using a .forEach method on an array of strings. The function we pass to .forEach could receive several arguments:

array.forEach((item, index, array) => {
  // ...

But we're not using any of those arguments. So why doesn't TypeScript complain?

Functions with fewer parameters can still be passed

Let's imagine we've ditched TypeScript, and we're living in JavaScript-land again. We've got a function that takes a single argument:

function takesOneArg(a) {}

What's going to happen if we call it with two arguments?

takesOneArg('a', 'b') 

Well - nothing! The second argument passed to it will be silently ignored, and it's unlikely ever to cause a runtime error (unless you're doing something unsafe with arguments).

This is exactly what's happening in the .forEach case:

The function passed to .forEach is always passed item, index and array - but it doesn't always need to specify them.

// Both are fine!
array.forEach((item, index, array) => {})
array.forEach(() => {})

So - when you specify a function type, TypeScript doesn't force you to handle all the parameters. It's perfectly fine to use a function that takes fewer arguments than the specified type.

Function types might be an anti-pattern

Let's circle back to our first example:

type TakesOneArgument = (a: string) => void

// Why does this not error in TypeScript?
const func: TakesOneArgument = () => {}

The reason this doesn't error is because, technically, func is assignable to TakesOneArgument. You could use that function anywhere that TakesOneArgument is expected, and it would work.

But as you can see, it's a little unexpected. The cleanest way to annotate this would be:

const func = (a: string): void => {} 

I don't want to dissuade you from typing your functions using type. But this behaviour is definitely worth considering.

Plus, I go into depth elsewhere on why function types can give you worse errors.

Matt's signature

Share this article with your friends

"Sorry, I Need A TypeScript Playground In Order To Help"

Learn how to provide a TypeScript playground when asking for help with your TypeScript questions, making it easier for others to assist you.

Matt Pocock
Matt Pocock

Relative import paths need explicit file extensions in EcmaScript imports

When using '--moduleResolution' with the option 'nodenext', it is necessary to add explicit file extensions to relative import paths in EcmaScript imports.

Matt Pocock
Matt Pocock