为什么我会在 Vue.js 源代码中看到 TypeScript？答案

【问题标题】：Why do I see TypeScript in Vue.js source code?为什么我会在 Vue.js 源代码中看到 TypeScript？
【发布时间】：2019-04-22 17:45:13
【问题描述】：

我只是为了看一下vue.js的源代码，看到了一些奇怪的代码，经过一番研究，我了解到这是TypeScript语法。我的问题是，这个语法在一个“.js”文件中，我不明白，因为我知道 TypeScript 文件（.ts）应该编译成纯 JS。那为什么我在.js文件的函数参数中还是看到了类型注解呢？

function hasAncestorData (node: VNode) {
  const parentNode = node.parent
  return isDef(parentNode) && (isDef(parentNode.data) || hasAncestorData(parentNode))
}

【问题讨论】：

如果您向我们展示您在在哪里找到了这个（什么文件、该文件在哪里、哪一行），这将有助于我们回答您的问题。
正如 Mateus 所指出的，它是 Flow，而不是 TypeScript（但 JavaScript 引擎仍然会抱怨这些类型注释）。文件扩展名很大程度上是一个约定问题。除了约定之外，没有什么可以阻止您将 TypeScript 或 JavaScript w/Flow 放在扩展名为 .js 的文件中（再次提供，您不要尝试在期望内容为纯 JavaScript 的环境中直接执行它)。

标签： javascript typescript vue.js

【解决方案1】：

这实际上是一个Flow 代码。您可以在some files 的开头看到/* @flow */ 注释，它启用了工具的类型检查。它有点类似于 TypeScript，但它们不是一回事。

快速浏览the Vue.js github repo 的src 文件夹可以发现，他们确实使用.js 作为他们的JavaScript w/Flow 代码，例如src/core/vdom/create-component.js：

const componentVNodeHooks = {
  init (vnode: VNodeWithData, hydrating: boolean): ?boolean {

但是如果我们查看dist 文件夹，我们可以看到那些流类型注释已被删除以进行分发。例如，这是dist/vue.js 中的上述内容（该行号会随着时间的推移而失效）：

var componentVNodeHooks = {
  init: function init (vnode, hydrating) {

【讨论】：

我：“Doh！”