typescript - 如何使用 TypeScript 对使用 Vue 的 .js 文件进行类型检查？

Question

我有一个使用 Vue 的小 .js 文件，我想用 TypeScript 编译器对其进行类型检查:

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

如果我尝试使用 tsc 对其进行类型检查，编译器会提示它找不到 Vue 的声明，即使我有 vue npm安装包:

$ 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

试试这个:

1. 创建一个typings/vue.d.ts

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

export as namespace Vue

1. 在 jsconfig.json 中包含 typings 文件夹:

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

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

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