Vue.js v2组件外部JS文件如何实现自动提示与类型检查？

以下几种方法可以让分离到外部JS文件的Vue组件代码获得自动提示和类型检查能力：

1. 使用Vue.extend()定义组件选项 #

在外部JS文件中导入Vue，通过Vue.extend()包裹组件选项，编辑器会基于Vue的类型定义提供完整的语法提示和类型校验：

import Vue from 'vue'

export default Vue.extend({
  data() {
    return {
      message: 'Hello Vue'
    }
  },
  methods: {
    showMessage() {
      console.log(this.message)
    }
  }
})

Vue.extend()会返回一个组件构造函数，编辑器能识别其中所有Vue组件的合法选项，并对数据类型、方法调用等进行校验。

2. 配置项目的类型检查环境 #

针对VS Code + Vetur插件（Vue 2官方推荐插件） #

在项目根目录创建jsconfig.json文件，配置Vue类型引入和项目文件范围：

{
  "compilerOptions": {
    "baseUrl": ".",
    "types": ["vue"]
  },
  "include": ["src/**/*"]
}

Vetur插件会读取该配置，自动关联Vue的类型声明，为外部JS文件提供组件选项提示。

结合TypeScript（可选） #

如果项目支持TypeScript，将外部JS文件改为.ts后缀，通过类型注解明确组件选项类型：

import Vue, { ComponentOptions } from 'vue'

const componentConfig: ComponentOptions<Vue> = {
  data() {
    return {
      count: 0
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    }
  }
}

export default componentConfig

TypeScript会提供更严格的类型检查和精准的自动提示。

3. 增强JSDoc注释 #

通过JSDoc明确指定组件选项的类型，补充// @vue/component的不足：

/**
 * @typedef {import('vue').ComponentOptions} VueComponentOptions
 * @type {VueComponentOptions}
 */
export default {
  props: {
    title: {
      type: String,
      required: true
    }
  },
  mounted() {
    console.log('Component mounted')
  }
}

这种方式无需修改代码结构，仅通过注释让编辑器识别组件选项的类型，从而提供自动提示。

内容的提问来源于stack exchange，提问作者Eisa Rezaei