typescript - ES6 模块、VueJS 和 TypeScript

Question

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

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

加载 myapp.js 模块。在 myapp.js 中，我想创建一个 Vue 组件。当然，我想用 TypeScript (myapp.ts) 编写这个组件并将其转换为 js。但是，要在 .ts 代码中获取类型信息，我必须像这样导入 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 或其他设置)？

谢谢约翰。

Answer 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 代码。您根本不需要导入类型。