Добавление определений типов в HOC, который вводит реквизит в компонент

У меня есть "компонент более высокого порядка", который реализуется следующим образом (без типов).

const Themeable = (mapThemeToProps) => {
  return (WrappedComponent) => {
    const themedComponent = (props, { theme: appTheme }) => {
      return <WrappedComponent
        {...props}
        theme={merge(
          {},
          defaultTheme,
          appTheme,
          mapThemeToProps(merge(defaultTheme, appTheme))
        )}
      >
    }
    themedComponent.contextTypes = { theme: PropTypes.object };
    return themedComponent;
  }
}

Чтобы обобщить то, что он делает, требуется функция mapThemeToProps. Это получит параметр темы, созданный слиянием defaultTheme (предоставленный моей библиотекой) и appTheme (предоставляемый компонентом ThemeProvider через контекст). Затем он создаст расширенный Theme и передаст его компоненту в качестве опоры под названием Theme. На практике он будет использоваться следующим образом (называемый Themeable в этой области):

const mapThemeToProps = (theme) => ({
  background: theme.palette.dark,
  color: theme.text.light,
});

function Greeting({ theme: { background, color } }) {
  return (
    <div style={{ background, color }}>
      Hello World!
    <div>
  )
}

export default Themeable(mapThemeToProps)(Greeting);

Мне очень сложно разработать правильную типизацию для этой функции. Я обнаружил, что этот шаблон очень похож на что-то в строках connect из react-redux, поэтому работал с их типом в качестве отправной точки, Во всяком случае, я немного потерян, это в основном, где я нахожусь:

import { Theme } from 'types/Theme';

interface ThemeableComponentEnhancer {
  <P>(component: React.ComponentType<P>): React.ComponentClass<Pick<P, "theme"> & { theme: Theme }> & { WrappedComponent: React.Component<P>}
}

export interface Themeable {
  // calling it with no parameters returns a basic theme.
  (): Theme;
  // calling it with a function
  <TTheme = {}>(mapThemeToProps: MapThemeToPropsParam<TTheme>): ComponentEnhancer<{ theme: TTheme }>;
}

interface MapThemeToProps<TTheme> {
    (theme: TTheme): TTheme;
}

interface MapThemeToPropsFactory<TTheme> {
    (theme: Theme): MapThemeToProps<TTheme>;
}

type MapThemeToPropsParam<TTheme> = MapStateToPropsFactory<TTheme>

У меня проблемы с этим. Как это сделать в TypeScript?

Ответы

Ответ 1

Theme.ts

export interface Theme {
  palette: {
    primary: string;
    secondary: string;
  };
}

export const theme: Theme = {
  palette: {
    primary: 'red',
    secondary: 'yellow'
  }
};

Пример Rect компонента с Theme

import * as React from 'react';
import { Theme } from '../theme/Theme';
import withTheme, { MapThemeToProps } from '../theme/withTheme';

export interface RectThemeProps {
  titleColor?: string;
  bodyColor?: string;
}

export interface RectProps extends RectThemeProps {
  content?: string;
}

export class Rect extends React.Component<RectProps> {
  render() {
    const {titleColor, bodyColor, content} = this.props;
    return <div>{content && content}</div>;
  }
}

const mapThemeToProps: MapThemeToProps<
  RectThemeProps,
  Theme
  > = (theme) => {
  return {
    titleColor: theme.palette.primary,
    bodyColor: theme.palette.secondary
  };
};

export default withTheme(mapThemeToProps)(Rect);

withTheme.ts

import * as React from 'react';

const ID = '__context_id__';

export interface MapThemeToProps<M, T> {
  (theme: T): M;
}

export interface withTheme {
  <M, T>(mapThemeToProps: MapThemeToProps<M, T>):
    (c: React.ComponentType<M>) => React.ComponentType<M>;
}

export default <M, T>(
  mapThemeToProps: MapThemeToProps<M, T>
) => (Component: React.ComponentType<M>) => {
  return class extends React.Component<M> {
    render() {
      const theme = this.context[ID];
      return (
        <Component
          {...this.props}
          {...mapThemeToProps(theme.getTheme())}
        />
      );
    }
  };
}