Не удается получить строгую типизацию для подключенных компонентов более высокого порядка - PullRequest
Новая
       9

Не удается получить строгую типизацию для подключенных компонентов более высокого порядка

1 голос
/ 09 июня 2019

Итак, мое основное требование - я хочу, чтобы у меня был доступ к хранилищу резервов в моем HOC, и я мог отправлять действия из моего HOC.

Я пришел с образцом шаблона того, как я ожидаюработать, к сожалению, я не уверен, как сделать эту работу. 

type InjectedProps = { injectedProp: string };
type ClassProps = { someClassProp: string };
type reduxProps = { reduxProp: string }
type mapStateToProps = (args: reduxProps) => reduxProps;
type BaseClassProps = ClassProps & InjectedProps;

class BaseClass extends React.Component<BaseClassProps> {
    render() {
        return <></>
    }
};

const SomeHoc = <P extends InjectedProps>(BaseComponent: React.ComponentType<P>) => {
    class InjectorHoc extends React.Component<Omit<P, keyof InjectedProps>> {

        render() {
            return (
                <BaseComponent {...this.props as P} injectedProp='' />
            );
        }
    };
    return InjectorHoc;
};

Наверх До этого момента все работает как шарм.Теперь, когда я пытаюсь подключить мой Hoc к магазину, проблема начинается.

Это первая ошибка, которую я пытаюсь преодолеть.Для моего сценария использования будет хорошо, если мой класс получит все реквизиты, переданные в HOC. 

const SomeHoc = <P extends InjectedProps>(BaseComponent: React.ComponentType<P>) => {
    class InjectorHoc extends React.Component<Omit<P, keyof InjectedProps> & reduxProps> {

        render() {
            // Conversion of type 'Readonly<Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps> & Readonly<{ children?: ReactNode; }>' 
            // to type 'P' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, 
            // convert the expression to 'unknown' first.
            return (
                <BaseComponent {...this.props as P & InjectedProps} injectedProp='' />
            );
        }
    };
    return InjectorHoc;
};

Вторая ошибка отображается, когда я пытаюсь подключить свой класс к хранилищу избыточности. 

const SomeHoc = <P extends InjectedProps>(BaseComponent: React.ComponentType<P>) => {
    class InjectorHoc extends React.Component<Omit<P, keyof InjectedProps> & reduxProps> {

        render() {
            return (
                <BaseComponent {...this.props as P} injectedProp='' />
            );
        }
    };
    //  Argument of type 'typeof InjectorHoc' is not assignable to parameter of type 'ComponentType<Matching<reduxProps & {}, Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps>>'.
    //  Type 'typeof InjectorHoc' is not assignable to type 'ComponentClass<Matching<reduxProps & {}, Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps>, any>'.
    //  Types of parameters 'props' and 'props' are incompatible.
    //  Type 'Matching<reduxProps & {}, Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps>' is not assignable to type 'Readonly<Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps>'.
    //  Type 'P extends "reduxProp" ? (reduxProps & {})[P] extends (Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps)[P] ? (Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps)[P] : (reduxProps & {})[P] : (Pick<...> & reduxProps)[P]' is not assignable to type '(Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps)[P]'.
    //  Type '(Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps)[P] | ((reduxProps & {})[P] extends (Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps)[P] ? (Pick<P, Exclude<...>> & reduxProps)[P] : (reduxProps & {})[P])' is not assignable to type '(Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps)[P]'.
    //  Type '(reduxProps & {})[P] extends (Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps)[P] ? (Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps)[P] : (reduxProps & {})[P]' is not assignable to type '(Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps)[P]'.
    //  Type '(reduxProps & {})[P] | (Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps)[P]' is not assignable to type '(Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps)[P]'.
    //  Type '(reduxProps & {})[P]' is not assignable to type '(Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps)[P]'.
    //  Type 'string' is not assignable to type '(Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps)[P]'.
    //  Type 'reduxProps & {}' is not assignable to type 'Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps'.
    //  Type 'reduxProps & {}' is not assignable to type 'Pick<P, Exclude<keyof P, "injectedProp">>'.
    //  Type '(string extends (Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps)["reduxProp"] ? (Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps)["reduxProp"] : string) | (Exclude<...> extends "reduxProp" ? (reduxProps & {})["reduxProp" & Exclude<...>] extends (Pick<...> & reduxProps)["reduxProp" & Exclude<...>] ? (P...' is not assignable to type '(Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps)[P]'.
    //  Type 'string extends (Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps)["reduxProp"] ? (Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps)["reduxProp"] : string' is not assignable to type '(Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps)[P]'.
    //  Type 'string | (Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps)["reduxProp"]' is not assignable to type '(Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps)[P]'.
    //  Type 'string' is not assignable to type '(Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps)[P]'.
    return connect((args) => args as mapStateToProps, {})(InjectorHoc);
};

Любая помощь по этому вопросу будет принята с благодарностью.Я не хочу реализовывать его с помощью рендеринга Prop Pattern, я открыт для любых других альтернативных подходов для выполнения поставленной задачи.Спасибо.

...