ES6 模块、VueJS 和 TypeScript

Posted 2023-02-22

【中文标题】ES6 模块、VueJS 和 TypeScript

【英文标题】：ES6 Modules, VueJS And TypeScript

【发布时间】：2018-06-05 00:04:01

【问题描述】：

我正在尝试创建一个简约的设置并希望使用上述功能。所以在我的 javascript 代码中我有一个：

<script type="module" src="./myapp.js"></script>

加载 myapp.js 模块。在 myapp.js 中，我想创建一个 Vue 组件。当然，我想用 TypeScript (myapp.ts) 编写这个组件并将其转换为 js。但是，要在 .ts 代码中获取 typeinfo，我必须像这样导入 Vue 类型：

import Vue from 'vue'

var app = new Vue(
    el: '#app',
    data: 
        message: 'Hello Vue!'
    
);

当我转译此代码时，此代码以 es2015 模块语法维护（因为我的 tsconfig.settings），结果是此 javascript：

import Vue from 'vue';

var app = new Vue(
    el: '#app',
    data: 
      message: 'Hello Vue!'
    
);

并且浏览器不接受这个命名导入。

问题是：（如何）我可以导入导出的类型而不使用上述语句导入它。我尝试了 /// 语法，但类型仍然不可用。这是因为类型是显式导出的，因此需要使用导入语法导入？

有没有办法在不导入的情况下获取类型？有没有办法使用命名导入来获取类型但排除该行进行编译？是否有其他方法可以实现这一点（无需 webpack 或其他设置）？

谢谢 约翰。

【参考方案1】：

您可以通过加载带有脚本标签的vue.min.js 来创建一个最小的 Vue 应用程序。那你就不用import Vue了。

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

然后你可以使用加载你的模块

<script type="module" src="mymodule.js"></script>
<script type="module" src="app.js"></script>

顺便说一句，这不是关于打字，而是关于导入允许您创建 Vue 组件的实际 Vue 代码。您根本不需要导入类型。

【讨论】：

正确。但我想使用打字稿来获得更强的类型检查和智能感知等。所以我想编写打字稿代码，转译成可以在 chrome 中加载的 es6 模块。

如果您的项目目录中有类型定义文件（无需导入），则应该自动进行类型检查。当您 npm install Vue 时包含该文件，或者您可以从 npm install @types/vue 获取 vue.d.ts 文件

实际上：npm install @types/vue 说 Vue 有自己的类型，但这些都是基于模块的，因此迫使我使用 import Vue from 'vue' 来获取它的类型信息。我想在全局范围内拥有这种类型信息，因此没有 import 语句，因此它不会被转换为生成的 .js 文件。

我明白你的意思，.d.ts 文件本身使用导出。我没有意识到 :) 我做了一个测试，我刚刚从vue.d.ts 中删除了导出语句。所以export interface Vue 变成了interface Vue。这使您可以在 IDE 中进行类型检查....

是的，谢谢，所以从包中删除导出和导入使其成为全局类型定义......但是我必须解决导入并一直删除导出到依赖项的末尾树... :-( 感谢您的确认 :-)