React + Typescript + 动态导入 HOC 类型答案

【问题标题】：React + Typescript + Dynamic import HOC typingsReact + Typescript + 动态导入 HOC 类型
【发布时间】：2019-01-22 07:58:15
【问题描述】：

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

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

【问题讨论】：

请包含实际代码，而不是代码图片，以便人们可以尝试重现您的问题而无需重新输入。

标签： reactjs typescript typescript-typings dynamic-import

【解决方案1】：

鉴于importComponent是一个函数，它返回一个组件的promise，它是：

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

如果需要，可以额外输入泛型：

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

【讨论】：