Typescript error when value can be function or null

Question

I have a type set up as follows

type StateProps = { 
    isPending: boolean,
    asyncFn: (...args: any[]) => void | null
}

I then create an initialState variable which has null for asyncFn

let initialState = {
    isPending: false,
    asyncFn: null
}

Then later in I use it in a react reducer as follows.

const [state, dispatch] = useReducer(reducer, {...initialState})

but it produces the following error

Type 'null' is not assignable to type '(...args: any[]) => void | null'

I thought that my asyncFn could be a function (with any number of args) or null if no function is supplied, as indicated by the single pipe symbol. Have I misunderstood this?

CertainPerformance · Accepted Answer · 2020-11-12 23:48:14Z

4

The type:

(...args: any[]) => void | null

is not

((...args: any[]) => void) | null

but

(...args: any[]) => (void | null)

That is, it's the type for a function which either returns null or void.

I'd put null in the first position instead, to make it clear:

asyncFn: null | (...args: any[]) => void

(or make the property optional: asyncFn?: (...args: any[]) => void)

To be type-safe, also consider using unknown instead of any.

answered Nov 12, 2020 at 23:48

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

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

1 Comment

jonhobbs Over a year ago

Thanks, seems obvious now that the second set of parentheses are needed.

Collectives™ on Stack Overflow

Typescript error when value can be function or null

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related