How to tell typescript to accept an empty array or a function

Question

Consider the following code:

const subscriptions: { [key: string]: [() => void]  } = {}

interface ISubscription {
  eventName: string
  callback: () => void
}

export function unsubscribe({ eventName, callback }: ISubscription) {
  if (!subscriptions[eventName]) { return }
  const index = subscriptions[eventName].findIndex((l) => l === callback)
  if (index < 0) { return }
  subscriptions[eventName].splice(index, 1)
}

export function subscribe({ eventName, callback }: ISubscription) {
  if (!subscriptions[eventName]) {
    subscriptions[eventName] = []
  }
  subscriptions[eventName].push(callback)
  return () => unsubscribe({ eventName, callback })
}

The issue typescript reports is:

TS2741: Property '0' is missing in type '[]' but required in type '[() => void]'.

Which comes from trying to assign an empty array to the subscriptions:

if (!subscriptions[eventName]) {
  subscriptions[eventName] = []
}

This can be fixed by defining the interface to accept an empty array but then there's an issue when assigning a callback:

const subscriptions: { [key: string]: [() => void] | [] } = {}

TS2345: Argument of type '() => void' is not assignable to parameter of type 'never'.

A workaround would be:

const subscriptions: { [key: string]: [() => void] } = {}

if (!subscriptions[eventName]) {
  subscriptions[eventName] = [callback]
}
else {
  subscriptions[eventName].push(callback)
}

What is the correct way to be able to set it to an empty array and then assign the callback? I tried using the question mark too but I can't seem to get it right. Thank you for your help.

Does this help?

Dane Brouwer
– Dane Brouwer

2020-08-12 14:09:40 +00:00
Commented Aug 12, 2020 at 14:09 — Dane Brouwer
– Dane Brouwer, Commented Aug 12, 2020 at 14:09

Serabe · Accepted Answer · 2020-08-12 14:08:52Z

2

This is a common misconception. [() => void] is a tuple of one element, and that element needs to satisfy the type () => void. If you want an array, let it be empty or not, with one or multiple elements, the correct type is (() => void)[].

The following expressions are accepted by (() => void)[]:

[]
[() => { doSomething(); }]
[() => { doSomething(); }, () => { doSomethingElse(); }]

While only the expression number 2 is accepted by [() => void].

If you want either an empty array or a tuple of one element, you can just do [] | [() => void]

answered Aug 12, 2020 at 14:08

Serabe

3,92421 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

messerbill · Accepted Answer · 2020-08-12 14:08:33Z

1

You can simply define it as an "array of type":

type Subscriptions = {
  [key: string]: Array<()=>void>
}

then:

const subscriptions: Subscriptions = {}
if (!subscriptions[eventName]) {
  subscriptions[eventName] = []
}

answered Aug 12, 2020 at 14:08

messerbill

5,6391 gold badge31 silver badges39 bronze badges

Comments

Dane Brouwer · Accepted Answer · 2020-08-12 14:12:53Z

1

Pretty straight-forward solution

type TCallBackArray = (() => void)[];
interface ISubscriptions { 
    [key: string]: TCallBackArray
};

const subscriptions: ISubscriptions = {}

Where TCallBackArray is defined as an array of functions, and ISubscriptions is defined as an indexer.

answered Aug 12, 2020 at 14:12

Dane Brouwer

2,9821 gold badge26 silver badges32 bronze badges

Collectives™ on Stack Overflow

How to tell typescript to accept an empty array or a function

3 Answers 3

Comments

Comments

Pretty straight-forward solution

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Pretty straight-forward solution

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related