TypeScript 的 Vue.js 项目差异

1）基本操作

1. 安装 @vue/cli 最新版本
2. 使用 @vue/cli 创建一个项目（不选 TypeScript)
3. 使用 @vue/cli 安装 TypeScript 插件

2）通过 Git Diff 对比介绍使用 TypeScript 的 Vue.js 项目差异

1. 安装了 @vue/cli-plugin-typescript 等插件
2. shims-vue.d.ts 文件的作用
3. shims-tsx.d.ts 文件的作用

定义 Vue 组件的几种不同方式

写法 1：使用 Options APIs

• 组件仍然可以使用以前的方式定义（导出组件选项对象，或者使用 Vue.extend()）
• 但是当我们导出的是一个普通的对象，此时 TypeScript 无法推断出对应的类型，
• 至于 VSCode 可以推断出类型成员的原因是因为我们使用了 Vue 插件，
• 这个插件明确知道我们这里导出的是一个 Vue 对象。
• 所以我们必须使用 Vue.extend() 方法确保 TypeScript 能够有正常的类型推断

import Vue from 'vue'

export default Vue.extend({
   
  name: 'Button',
  data () {
   
    return {
   
      count: 1
    }
  },
  methods: {
   
    increment () {
   
      this.count++
    }
  }
})

写法 2：使用 Class APIs

在 TypeScript 下，Vue 的组件可以使用一个继承自 Vue 类型的子类表示，这种类型需要使用 Component 装饰器去修饰

装饰器函数接收的参数就是以前的组件选项对象（data、props、methods 之类）

import Vue from 'vue'
import Component from 'vue-class-component'