Реагируйте HOC API контекста Typescript с полной проверкой типов - PullRequest
Новая
       47

Реагируйте HOC API контекста Typescript с полной проверкой типов

0 голосов
/ 19 декабря 2018

, поэтому я сейчас пишу HOC для API реагирующего контекста, который будет оборачивать компоненты в потребителей контекстного API.

Мои требования:

  1. Полная проверка типа на потребности реквизита
  2. Мне нужно иметь возможность установить состояние, предоставляемое контекстным API, прежде чем добавлять его в качестве реквизита (для этого также требуется полная проверка типов)

Код, который я сейчас используюесть это (с использованием библиотеки типов утилит):

HOC: 

export const withMainContext = <
T extends object,
X extends object,
Y = Intersection<Required<IAppContext>, X>,
Z = Diff<T, Required<IAppContext>>
>(
    Component: React.ComponentType<T>,
    subsetStateCallback: (state: IAppContext) => Y = 
        (state) => state as unknown as Y
  ): React.SFC<Z> => (props: Z) => {
      return <AppContext.Consumer>
        {(state: IAppContext) => {
            const newState = subsetStateCallback(state)
            return <Component {...props} {...newState}/>
        }}
        </AppContext.Consumer>
  }

Компонент: 

interface ItestOtherProps {
     one: string;
     two: number;
     three: string;
}
type ItestAppProps = Required<Pick<IAppContext, 'workflows'>>

type ITestProps = ItestOtherProps & ItestAppProps

class Test extends React.Component<ITestProps, {}> {
     public render(): JSX.Element {
         return null
     }
}

const Testy = withMainContext<ITestProps, ItestAppProps>(
     Test,
     (state: Required<IAppContext>): ItestAppProps => {return {workflows: state.workflows}}
)


const useTesty = () => {
     return <Testy one={""} two={0} three={""}/>
}

Различия и пересечения импортируются из типов утилит издесь определено: https://github.com/piotrwitek/utility-types

Было бы замечательно, если бы я мог немного упростить это, или мне не пришлось бы приводить состояние в неизвестное состояние, прежде чем установить его в Y по умолчанию для обратного вызова.

Есть идеи?

Спасибо!

...