我尝试过的其他事情

Question

我有一个使用Vue的小.js文件，我希望使用TypeScript编译器进行类型检查：

function main() {
    new Vue({
        el: 'ts-message',
        template: '<div>Hello</div>',
    });
}

如果我尝试使用tsc进行类型检查，则编译器会抱怨即使我安装了Vue npm软件包，也找不到vue的声明：

$ tsc --allowJs --checkJs --noEmit src/main.js 
src/main.js:6:9 - error TS2304: Cannot find name 'Vue'.

6     new Vue({
          ~~~

如何告诉TypeScript编译器自动检测Vue全局对象或将其显式导入JS文件中？

如果将此main.js文件重命名为main.ts，并且将以下行添加到顶部，则TypeScript编译器将成功：

import Vue from "vue";

不幸的是，我需要专门检查 JavaScript 文件，并且由于浏览器无法识别这种导入语法，因此无法在JavaScript文件顶部添加这样的行。

Answer 1

我认为您可能需要通过主源文件夹（例如src文件夹）中的vue.shims.d.ts文件声明Vue.js。

类似这样的东西：

declare module "*.vue" {
    import Vue from "vue";
    export default Vue;
}

Answer 2

尝试一下：

// typings/vue.d.ts
import Vue from 'vue'

export as namespace Vue

// jsconfig.json
{
  "include": ["typings"]
}

我自己还没有使用Vue.js。我的假设是，其类型不会全局公开Vue。

上面的文件从vue获取类型，并将其公开为命名空间。

Answer 3

如何告诉TypeScript编译器自动检测Vue全局对象或将其显式导入JS文件中？

您可以使用调用TypeScript编译器或使用CDN的模块捆绑器来执行此操作。根据您的情况，无需手动键入（*.d.ts。

为了在浏览器中使用npm软件包，您需要一个模块捆绑器（例如Webpack，Rollup或Parcel）来创建包含那些软件包的脚本。 / p>

我强烈建议使用Vue CLI自动搭建包括Webpack的TypeScript项目。此生成的项目的一些优点：

CDN

如果您不想使用模块捆绑程序，则可以使用<script>标签将<{>}之前的第三方脚本从CDN导入全局范围，脚本运行。例如，要从unpkg导入Vue和Vue-Router，您的index.html可以包含以下内容：

<script src="https://unpkg.com/vue@2.6.10"></script>
<script src="https://unpkg.com/vue-router@3.0.6"></script>

<script src="./main.js"></script>

new Vue({
  el: '#app',
  data: () => ({
    message: 'Hello Vue.js!',
  }),
})

<script src="https://unpkg.com/vue@2.6.10"></script>

<div id="app">
  <p>{{ message }}</p>
</div>

Answer 4

创建一个包含以下内容的src/vue.shims.d.ts文件：

import VueConstructor from 'vue';
declare global {
    const Vue: typeof VueConstructor;
}

然后使用以下命令将其与原始src/main.js一起编译：

$ tsc --allowJs --checkJs --noEmit src/main.js src/vue.shims.d.ts

有效！ ?

打开node_modules/vue/types/index.d.ts并注释掉以下行：

export as namespace Vue;

替换为：

//export as namespace Vue;  // interferes with vue.shims.d.ts

现在您可以使用此答案前面提到的vue.shims.d.ts文件。

警告：适当地修改依赖项是一种非常脆弱的方法。如果可能的话，我建议升级Vue。

Vue的开发版本具有closed issue和merged PR，只要您明确包含Vue的类型定义，就可以从脚本中将Vue用作全局变量。 / p>

安装Vue的开发版本：

$ npm install 'git+ssh://git@github.com/vuejs/vue.git#ab50e8e1da2f4f944af683252481728485fedf16'

现在编译JS脚本以及vue/types/index.d.ts文件。

$ tsc --allowJs --checkJs --noEmit src/main.js node_modules/vue/types/index.d.ts