模块名称字符串的TypeScript类型

时间:2018-11-20 02:41:56

标签: javascript typescript webpack hot-module-replacement

背景: TypeScript检查您尝试导入的模块,如果使用的字符串文字与实际模块的名称或支持的文件类型的路径不匹配,则在编译时失败。

例如,import {Component} from 'react'import item from './item'可以很好地编译,但是假设安装了import {Component} from 'reactt'模块和{项目中的{1}}文件,但未安装import item from './otem'模块,项目中也没有扩展名为.ts,.js,.json等的react文件。

问题:我不确定如何创建一个函数,其中参数之一是必须与实际模块或支持的文件相对应的字符串文字。< / p>

item.ts

reactt应该是哪种类型,以便在提供错误的输入(例如./otemfunction customImportEffect(moduleName: module_string_literal) { ... } 作为参数时,编译时检查失败?

问原因: 我正在尝试制作一个webpack文件转换器(也称为加载程序),以便在编译之前将代码添加到TypeScript文件的顶部,以便用户可以使用类型安全的热模块重新加载代码。例如,假设以下代码在转换为JS之前被插入每个打字稿文件上方:

module_string_literal

然后重新加载热模块可能是类型安全的,并且看上去更干净。假设从./item.ts文件的默认导出是一个名为'reactt'的对象,则可以编写

'./otem'

而不是

实施邮件的热重载
class HotModule {
    public static accept(moduleName: module_string_literal, onModuleReplace: Function(updatedModule: typeof import(moduleName)):void) {
        if(module.hot) {
            module.accept(moduleName.toString(), function() {
                onUpdate(require(moduleName.toString()))
            }
        }
    }
}

我希望这是可能的,因为自TypeScript v2.4起,就可以异步动态导入模块,并且可以检查提供的字符串文字是否正确,并且错误的字符串文字会导致编译时失败。

当前,我只是在message文件的HotModule.accept("./item", ({message: newMessage}) => { const oldMessage = message; messages[messages.indexOf(oldMessage)] = message = newMessage; } 对象中包含if(module.hot) { module.hot.accept("./item", function() { const oldMessage = message; messages[messages.indexOf(oldMessage)] = message = require("./item"); } } ,但是我想要一个热模块API,它可以更好地利用TypeScript的检查工具集。 / p>

0 个答案:

没有答案