typescript - 确定 TS 2.4 中动态模块的类型

Question

我非常享受 TS 2.4 中新的动态模块支持，尽管我遇到了这个小问题:

当使用 import().then(...) 时，会给出模块的类型。如果我需要存储 promise 供以后使用，我无法为传达模块类型信息的 Promise 生成类型参数。

我正在尝试在包装器 React 组件中执行动态加载(我应该在其中使用 react-router v4)，并且我想在构造函数中开始加载 - 并在首次安装组件时重新加载。这有一个“闪烁”的问题，但除此之外它还有效:

import * as React from 'react'

export class DashboardDynamic extends React.Component<any, any> {
    constructor(props) {
        super(props)

        // At this point typescript knows the type of the import, including the "Dashboard" export
        this.loaderPromise = import(/* webpackChunkName: "dashboard" */ './Dashboard')
    }

    componentDidMount() {
        // Promise<any> makes the {Dashboard} component an "any" type
        this.loaderPromise.then(({Dashboard}) => {
            this.myContent = <Dashboard {...this.props}/>
            this.forceUpdate()
        })
    }

    myContent: JSX.Element = <div />;
    loaderPromise: Promise<any> = null // PROBLEM: "any", not module type.

    render() {
        return this.myContent
    }
}

有人知道如何输入 promise 以使其包含正确类型的动态模块吗？

Answer 1

虽然我不认为像 typeof import('./Dashboard') 这样的东西目前是可能的，但你可以创建一个高阶组件来分解你已经拥有的东西componentDidMount 同时保留导入的类型。

会这样输入:

function dynamicComponent<Props>(loader: () => Promise<React.ComponentType<Props>>): React.ComponentType<Props>

像这样使用:

const DynamicDashboard = dynamicComponent(() => import('./Dashboard').then(({ Dashboard }) => Dashboard)))