How can I have a property that can be an array of strings or a function that returns an array of strings?

Issue

I have an interface like:

interface ListColumn {
  filters: Array<string | string[]> | (arg0: any) => string[],
  ...

And then I have code which does:

class Helpers {
  static isFunction (arg: any) {
    return arg && typeof arg === 'function';
  }
}

...

if (Helpers.isFunction(obj.filters)) { obj.filters = obj.filters(config.screenWidth); }

and I get: Not all constituents of type '(string | string[])[] | ((arg0: any) => string[])' are callable. Type '(string | string[])[]' has no call signatures.

I seem to only be able to get around this by declaring filters as any or performing casting such as:

if (Helpers.isFunction(obj.filters)) { obj.filters = (column.filters as (arg0: any) => string[]) (config.screenWidth);

Is there a better way to get around this?

Solution

isFunction isn't an actual type guard. TypeScript does not know that if it returns true that means its argument is a function. You have to use is here:

class Helpers {
  static isFunction (arg: any): arg is (...args: unknown[]) => unknown {
    return arg && typeof arg === 'function';
  }
}

docs

Answered By - youdateme