在 TypeScript 中引用 Vue.js 的类型定义答案

【问题标题】：Referencing the type definitions for Vue.js in TypeScript在 TypeScript 中引用 Vue.js 的类型定义
【发布时间】：2017-08-31 20:45:32
【问题描述】：

我正在尝试在我的 Vue.js 代码 (v2.2.1) 中进行类型检查。首先，我只想用 TypeScript 编译这一行（即，我希望识别 Vue 类）：

var app = new Vue();

如果我使用以下方式导入 Vue，则会编译：

import * as Vue from 'vue';

但是，它会生成一个require() 调用：

var Vue = require("vue");

我不使用模块，我只是在我的脚本之前从 CDN 引用 Vue 库。

我尝试这样引用定义文件：

/// <reference path="../node_modules/vue/types/index.d.ts" />

但是 Vue 类无法识别（大概是因为它是在定义文件中导出的，因此应该导入？）。

我可以使用import 仅引用类型定义而不“需要”库吗？

【问题讨论】：

【解决方案1】：

您可以编写自己的定义文件（例如 vue-global.d.ts），其中 Vue 将在全局命名空间中定义：

import _vue = require('vue');

declare global{
    const Vue: typeof _vue;
}

不要忘记在 tsconfig 中包含这个定义

【讨论】：

看到对这个 sn-p 中发生的事情的逐行解释真是太棒了。 TypeScript 有时很难理解 :)
同样使用这个 sn-p，TypeScript 仍然会为 let test: Vue = new Vue({}); 之类的行提供 Cannot find name 'Vue' 错误
@RomanNurik，第一行从 node_modules/vue/types/index.d.ts 导入 Vues 定义，然后在全局命名空间中声明 Vue。看看这个global declaration template。关于错误 - 似乎 vue-global.d.ts 未包含在您的项目中。
谢谢！奇怪的是，如果我只是这样做 let test = new Vue({}); 就可以工作...由于某种原因在变量上添加类型会使编译器感到困惑。
对于遇到此问题的任何人，我刚刚发现typeof 关键字在这里用作“类型查询”：blog.mariusschulz.com/2016/05/31/…

【解决方案2】：

如果您使用来自官方documentation 的libs。下载所有文件。在您的打字稿文件中添加参考：

/// <reference path="../path_to../app/TypeScript/_definitely_typed/Vue/2.6.10/index.d.ts" />

只需更改文件 vue.d.ts。

评论行：

export const Vue: VueConstructor;

在后面添加：

declare global{
    const Vue: VueConstructor;
}

【讨论】：