React HoC в TypeScript. Типизация без боли

[biziwalker]

с использованием Flow описывать HOC'и можно легко с помощью такого сниппета:

type ComponentWithDefaultProps<DefaultProps, Props> = React.ComponentType<Props> & {
  defaultProps: DefaultProps,
};

export type HOC<ProvidedProps, RequiredProps> = (<Props, DefaultProps>(
  component: ComponentWithDefaultProps<DefaultProps, ProvidedProps & Props>,
) => React.ComponentType<RequiredProps &
    // Props, with diffed-out default props. Make sure to merge with ProvidedProps to work with
    // $Diff constraints in nested HoCs.
    $Diff<ProvidedProps & Props, DefaultProps & ProvidedProps> &
    // Force props to be in the shape of all potential props (effectively allows properly-typed
    // overrides of DefaultProps)
    $Shape<RequiredProps & DefaultProps & Props>,>) &
  (<Props>(
    component: React.StatelessFunctionalComponent<ProvidedProps & Props>,
  ) => React.ComponentType<RequiredProps & Props>) &
  (<Props>(
    component: React.ComponentType<ProvidedProps & Props>,
  ) => React.ComponentType<RequiredProps & Props>);

к сожалению авторство данного сниппета потерял

[dagen]

Зачем так много букв? Посмотрите HOC<> в flow-тайпингах recompose. Если не хочется тащить все тайпинги, то эти три declare прекрасно будут работать отдельно (как мы и сделали).

[biziwalker]

Ответ лежит в учете defaultProps в этих буквах

[gnaeus]

А что насчет hoist-non-react-statics, как советуют в официальной документации к React?

[Luanre]

Действительно, в рамках этой статьи не было рассмотрено копирование статических свойств в HoC, можем рассказать об этом в одной из следующих публикаций.

[kashey]

Особая боль возникает когда от использования «старых» вариантов TS, когда заместо простого `connect` пишут `connect<StateProps, ComponentMappedProps, PublicComponentProps>`, при том что часть PublicComponentProps могут быть перекрыты ComponentMappedProps.

«Такой» TypeScript сеет панику и ошибки в в рядах падаванов.

Так и тут —

withOnChangeString<InputProps>(SimpleInput)

— «без проблем» может узнать тип события из переданного компонента.
Да, всегда можно сказать — это чтобы перепроверить входящие значения, но имхо, лучше доверится типам.

[ezubarev]

Ошибочка вышла с параметров обёрнутого компонента.

Тип OnChangeHoFProps & T при T extends OnChangeNative позволяет передать onChange как с сигнатурой из OnChangeNative, так и из OnChangeHoFProps.

Можно исправить следующими вариантами:

Omit<T, 'onChange'> & OnChangeHoFProps
Subtract<T, OnChangeNative> & OnChangeHoFProps

Реализацию Omit и Subtract можно посмотреть здесь: github.com/piotrwitek/utility-types