Параметр функции, который является либо строкой, либо числом, либо функцией, которая возвращает либо строку, либо число.

Question

Я создаю приложение React с использованием TypeScript.

Я пытаюсь определить функцию (для HOC), которая принимает параметр с именем value, который может быть либо строкой, либочисло или функция, которая возвращает строку или число.

Итак, я попробовал:

const myHOC = (
  value: string | number | () => string | () => number
) => WrappedComponent => // ...

Но TSLint жалуется на все, что происходит после второго | (такв основном об обеих функциях).

В нем говорится:

[ts] Type expected. [1110]

для (),

[ts] ',' expected. [1005]

для => и

[ts] 'string' only refers to a type, but is being used as a value here. [2693]
[tslint] Forbidden bitwise operation [no-bitwise]

для string / number соответственно.

Как мне сказать TypeScript, что такое value?

Answer 1

TSLint (так же как и TypeScript) не может разобрать его должным образом, вы можете заключить ваши типы функций в фигурные скобки, чтобы они могли понять, к чему вы стремитесь.

const myHOC = (
  value: string | number | (() => string) | (() => number)
) => WrappedComponent;

Редактировать : Если вы хотите, чтобы эти два типа функций принимали необязательный параметр, то есть реквизиты WrappedComponent, вам придется импортировать интерфейс, который поддерживает реквизиты этого компонента (если только они не входят в область действия), и использоватьэто внутри них с вопросительным знаком ?, чтобы TS знал, что это необязательно.

import { WrappedComponentProps } from './WrappedComponent';

const myHOC = (
  value: string | 
         number | 
         ((props?: WrappedComponentProps ) => string) |
         ((props?: WrappedComponentProps ) => number)
) => WrappedComponent;