Как использовать HOC с приставкой compose и Typescript - PullRequest
Новая
       33

Как использовать HOC с приставкой compose и Typescript

0 голосов
/ 24 января 2019

У меня есть два HOC, которые нужно использовать с избыточным составлением, но компилятор не делает правильный тип. Compose объявляет, что функция из избыточного исходного кода . Если мы вставим код в детская площадка . Мы увидим разные типы первой и второй переменных. 

type Func1<T1, R> = (a1: T1) => R

type Component<Props> = (props: Props) => string;

declare function compose<T1, A, R>(
  f1: (b: A) => R,
  f2: Func1<T1, A>
): Func1<T1, R>

declare const HOC1: <Props>(component: Component<Props>)
    => Component<Props & { prop: string }>

declare const HOC2: <Props>(component: Component<Props>)
    => Component<Props & { prop: number }>

declare const component: Component<{props: boolean}>

const first = HOC1(HOC2(component));

const second = compose(HOC1, HOC2)(component);

1 Ответ

0 голосов
/ 25 января 2019

Мы не можем смоделировать хорошую версию compose в текущей системе типов машинописи.Нет возможности записать параметры универсального типа в HOC.

Мы можем создать версию, которая могла бы работать при некоторых обстоятельствах, основываясь на том, как стираются параметры типа (в основном они просто заменяются на самый узкий тип в этом случае {}).Это означает, что мы можем получить реквизит, добавленный HOC.Я не знаю, насколько хорошо это будет работать, но это работает для вашего образца: 

type Func1<T1, R> = (a1: T1) => R

type Component<Props> = (props: Props) => string;

declare function compose<A, R, R2>(f1: (b: A) => Component<R>,f2: (b: A) => Component<R2>,): (<P>(c: Component<P>) => Component<P & R & R2>)

declare const HOC1: <Props>(component: Component<Props>)
    => Component<Props & { prop1: string }>

declare const HOC2: <Props>(component: Component<Props>)
    => Component<Props & { prop2: number }>

declare const component: Component<{props3: boolean}>

const a = HOC1(HOC2(component));

const b = compose(HOC1, HOC2)(component); //Component<{ props3: boolean; } & { prop1: string; } & { prop2: number; }>

ссылка на игровую площадку

...