jrwebdev

const withLoading = Component =>
  class WithLoading extends React.Component {
    render() {
      const { loading, ...props } = this.props;
      return loading ? <LoadingSpinner /> : <Component {...props} />;
    }
  };

jrwebdev

interface WithLoadingProps {
  loading: boolean;
}

const withLoading = <P extends object>(Component: React.ComponentType<P>) =>
  class WithLoading extends React.Component<P & WithLoadingProps> {
    render() {
      const { loading, ...props } = this.props;
      return loading ? <LoadingSpinner /> : <Component {...props as P} />;
    }

jrwebdev

import { Subtract } from 'utility-types';

const withBlueBackground = <P extends InjectedBlueBackgroundProps>(
  UnwrappedComponent: React.ComponentType<P>
) =>
  class WithBlueBackground extends React.Component<
    Subtract<P, InjectedBlueBackgroundProps> & WithBlueBackgroundProps
  > {
    render() {
      const { shade, ...props } = this.props;

jrwebdev

type Diff<T extends string, U extends string> = ({ [P in T]: P } &
  { [P in U]: never } & { [x: string]: never })[T];
type Omit<T, K extends keyof T> = Pick<T, Diff<keyof T, K>>;

const withBlueBackground = <P extends InjectedBlueBackgroundProps>(
  UnwrappedComponent: React.ComponentType<P>
) =>
  class WithBlueBackground extends React.Component<
    Omit<P, keyof InjectedBlueBackgroundProps> & WithBlueBackgroundProps
  > {

jrwebdev

import * as React from 'react';

import withBlueBackground, { InjectedBlueBackgroundProps } from './withBlueBackgroud';

interface HelloProps {
  style?: React.CSSProperties;
  name: string;
}

const Hello = ({ style, name }: HelloProps & InjectedBlueBackgroundProps) => (

jrwebdev

import * as React from 'react';

type ColorShade = 'light' | 'dark';

export interface InjectedBlueBackgroundProps {
  backgroundColor: string;
}

interface WithBlueBackgroundProps {
  shade?: ColorShade;

jrwebdev

import * as React from 'react';

type ColorShade = 'light' | 'dark';

export interface InjectedBlueBackgroundProps {
  style?: React.CSSProperties;
}

interface WithBlueBackgroundProps {
  shade?: ColorShade;

jrwebdev

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import withBlueBackground from './withBlueBackground';
import Hello from './Hello';

const BlueHello = withBlueBackground(Hello);
ReactDOM.render(
  <BlueHello name="Bob" style={{ fontWeight: 'bold' }} />,
  document.getElementById('app')

jrwebdev

import * as React from 'react';

interface WithBlueBackgroundProps {
  style?: React.CSSProperties;
}

const withBlueBackground = <P extends WithBlueBackgroundProps>(
  UnwrappedComponent: React.ComponentType<P>
) =>
  class WithBlueBackground extends React.Component<P> {

jrwebdev

import * as React from 'react';

interface HelloProps {
  style?: React.CSSProperties;
  name: string;
}

const Hello = ({ style, name }: HelloProps) => (
  <div style={style}>Hello, {name}!</div>
);