reactjs - React + Typescript + 动态导入 HOC 类型

Question

import React from 'react'
import { Preloader } from 'src/base-components/preloader'
import styles from './styles.scss'

const withLazyLoading = (importComponent: any) => {
    return class extends React.Component {
        public state = {
            component: null
        }

        public componentDidMount() {
            importComponent()
                .then((cmp) => {
                    this.setState({ component: cmp.default })
                })
        }

        public render() {
            const Component = this.state.component
            return Component
                ? <Component { ...this.props } />
                : <div className={ styles.box }><Preloader show /></div>
        }
    }
}

export { withLazyLoading }

我想添加类型：

importComponent: any <= not to be any

一切正常，但any会导致错误：

Answer 1

GivenimportComponent是一个返回组件承诺的函数，它是：

const withLazyLoading = (importComponent: () => Promise<React.ComponentClass>) => {
...

如果需要，它可以另外键入为泛型：

const withLazyLoading = <T extends {}>(importComponent: () => Promise<React.ComponentClass<T>>): React.ComponentClass<T> => {
    return class extends React.Component<T> {
    ...