Реагировать TypeScript Определение компонента высшего порядка - PullRequest
Новая
       40

Реагировать TypeScript Определение компонента высшего порядка

0 голосов
/ 13 июня 2019

У меня есть HOC, который добавит isLoading и setLoading к обернутому компоненту, он реализован аналогично react-navigation withNavigation HOC.Но TypeScript жалуется на некоторую ошибку совместимости типов.

код ниже: 

interface State {
    isLoading: boolean;
}

export interface PageLoadingInjectedProps {
    isLoading: boolean;
    setLoading: (isLoading: boolean) => void;
}

interface Args {
    defaultLoading: boolean;
}
export default function withPageLoading<T extends PageLoadingInjectedProps>(PageView: ComponentType<T>, { defaultLoading }: Args = { defaultLoading: true }) {
    type OriginProps = Omit<T, keyof PageLoadingInjectedProps>;
    const WithPageLoading: ComponentClass<OriginProps> = class extends Component<OriginProps> {
        state: State = {
            isLoading: defaultLoading,
        };

        setLoading = (isLoading: boolean) => {
            this.setState({
                isLoading,
            });
        };

        render() {
            return (
                <>
                    <PageView {...this.props} isLoading={this.state.isLoading} setLoading={this.setLoading} />
                    { this.state.isLoading && <LoadingLayer visible={this.state.isLoading} /> }
                </>
            );
        }
    };

    hoistNonReactStatics(WithPageLoading, PageView);

    WithPageLoading.displayName = `withPageLoading(${utils.util.getComponentDisplayName(PageView)})`;

    return WithPageLoading;
}

TypeScript ошибка: 

Error:(46, 22) TS2322: Type 'Readonly<Pick<T, Exclude<keyof T, "isLoading" | "setLoading">>> & { isLoading: boolean; setLoading: (isLoading: boolean) => void; children?: ReactNode; }' is not assignable to type 'IntrinsicAttributes & T & { children?: ReactNode; }'.
  Type 'Readonly<Pick<T, Exclude<keyof T, "isLoading" | "setLoading">>> & { isLoading: boolean; setLoading: (isLoading: boolean) => void; children?: ReactNode; }' is not assignable to type 'T'.

но withNavigationопределение то же самое в react-navigation: 

export function withNavigation<P extends NavigationInjectedProps>(
  Component: React.ComponentType<P>,
): React.ComponentType<Omit<P, keyof NavigationInjectedProps>>;

так, что не так с моим определением?

...