在没有 require() 的情况下使用 typescript 模块

Posted 2023-03-22

【中文标题】在没有 require() 的情况下使用 typescript 模块

【英文标题】：Using typescript module without require()

【发布时间】：2017-11-05 01:44:31

【问题描述】：

我编写了一个 typescript 2.3 app.ts，它需要 Vuejs 库 v2。 Vuejs 脚本 src 是在 html 文件中手动添加的。 我只想使用 Vuejs 进行类型检查！ 我希望我只需要像这样引用：

///

但 Vue 类无法从 app.ts 访问。

我尝试直接导入模块：

从 "./vue" 导入 * as Vue;

这次我必须使用 new Vue.Vue() 来访问该类，但 VS 2017 构建。 生成的 app.js 以 var Vue = require("./vue"); 开头。 但是在浏览器中，我遇到了一些错误：

exports 参考（通过在 .ts 的第 1 行添加 export = 0; 解决 require 不是函数

对于 require()，我添加了 但新的错误：尚未加载上下文.

我尝试使用 systemjs 而不是 require.js，我添加了 System.import('scripts/app.js'); 我得到一个 404 访问“脚本” /vue”（来自 app.js 的要求），app.js 的其余部分不执行。

注意：我不使用 tsconfig.json

我很惊讶，因为在我的记忆中，jQuery 的引用与 typescript 0.9 一起使用

我完全迷路了。帮我 ！感谢社区！

【参考方案1】：

我通常通过创建 globals.d.ts 文件来解决您遇到的问题，该文件负责设置我的代码所期望的全局环境。在你的情况下是这样的：

import * as _Vue from "vue";

declare global 
    const Vue: typeof _Vue;

这使得编译器将在全局空间中看到一个Vue 符号，该符号与“vue”模块导出的类型相同。

使用上面的文件，编译：

const q = new Vue();

请注意，您要么必须使用tsconfig.json。即使是空的也可以。 （“空”是指仅包含空 JSON 结构的文件：。）或者您必须在命令行中列出所有要编译的文件，包括 globals.d.ts。

【讨论】：

我喜欢这个方法。const q=new Vue() 不会构建，但new Vue.Vue 可以，而且我有智能感知。这就产生了一个问题：生成的 JS 文件保留不正确的 Vue.Vue 表示法（file2.ts:10 Uncaught TypeError: Vue.Vue is not a constructor）。