Cannot invoke an object which is possibly 'undefined'

Question

I have the following code

  dispatchEvent(name: TableEventName, params: any): any {
    const event =
      typeof this.options?.event?.[name] === 'function' ? this.options.event[name] : () => {}
    return event(params)
  }

which at compilation return

Cannot invoke an object which is possibly 'undefined'. return event(params)

I am doing the correct checking tho, why so ?

full code :


type TableEventName = 'onStateChange' | 'onSort' | 'onPageChange' | 'onSelection'

interface TableOptions {
  event?: {
    onStateChange?: (event: any) => void
    onSort?: (event: any) => void
    onPageChange?: (event: any) => void
    onSelection?: (event: any) => void
  }
}

let options: TableOptions = {
    event: {
        onSort: () => { } 
    }
}

let dispatcher = function (name: TableEventName, params: any): any {
    const event =
      typeof options?.event?.[name] === 'function' ? options.event[name] : () => {}
    return event(params)
}

here

Could you include all the code required to reproduce it? Preferably a TypeScript Playground. — Karol Majewski
I cannot reproduce it. Can you supply a minimal reproducible example? — VLAZ
OK, I see the problem, then. options?.event?.[name] === 'function' is used once but TS doesn't know that options.event[name] will fetch the same element. — VLAZ

Karol Majewski Karol Majewski · Accepted Answer · 2020-06-12T10:39:36

You can leverage optional chaining:

let dispatcher = function (name: TableEventName, params: any): any {
  const handler = options.event?.[name];

  return handler?.(params);
}

Cannot invoke an object which is possibly 'undefined'

1 Answers