vue.js javascript typescript 使用TS 开发vue项目

一、环境说明

在vue项目中启用ts，有两种方式：

全新项目：使用vue cli脚手架工具创建vue项目时，勾选 ts(详见上节)，会自动完成关于ts项目的配置。开箱即用。已有项目：添加vue官方配置的ts适配插件，使用@vue/cli 安装 ts插件：

vue add @vue/typescript

根据命令提示操作，即可自动完成 项目中关于ts的配置

二、ts 相关配置介绍

相关配置是在上一步中自动生成的。这里主要是理解，上一步都自动完成了那些配置。

安装了ts 相关的依赖项 【dependencies 依赖】 1. vue-class-component：提供使用Class 语法写Vue组件 2. vue-property-decorator：在Class语法基础上提供一些辅助装饰器。增强的class 描述组件的工具 【devDependencies 依赖】 1. @typescript-eslint/eslint-plugin： 使用ESlint 校验 Typescript 代码。其实ts有自己的校验工具，tslint，但是不好用，所以大多是使用 eslint+该工具来校验 2. @vue/cli-plugin-typescript：是vue-cli的一个插件，将ts相关的工具集成起来，将ts+ts-loader+fork-ts-checker-webpack-plugin 集成，进行更快的类型检查，是一个统一的集成调度者。 3. @vue/eslint-config-typescript：为eslint 提供关于ts的校验规则 4. typescript：typescript编译器，提供类型校验和转换js功能生成ts配置文件 tsconfig.json 默认已经配置了许多可以开箱即用的功能， 可以根据项目实际需求进行修改src下新增两个文件 【shines-vue.d.ts】 ts中 是没办法识别 以.vue 结尾的模块的（eg：import xx from xx.vue， 该语句ts识别不了），通过该文件做适配处理，使项目中加载.vue 模块的文件时 不报错。一般不修改 该文件意思是：声明所有以 .vue结尾的文件模块，其类型都是vue构造函数 【shims-tsx.d.ts 】 如果要在项目中使用tsx 或者jsx 描写组件模块的话，补充了一些类型声明。如果没有这些类型声明，在jsx中使用这些成员的时候，会找不到。如果项目中没有使用jsx，可以将该文件忽略掉都是用.ts 后缀 代替 原先的.js 后缀

三、使用ts的方式来定义vue组件（⭐）

原始方式定义组件的缺陷 1. 编辑器给的类型提示，不够严谨正确 2. ts 编译期间的类型验证没有 OptionsApi

class APIs 采用clss类的方式来描述组件。如果在声明组件时更喜欢基于类的 API，则可以使用官方维护的 vue-class-component 装饰器：

import Vue from 'vue'

import Component from 'vue-class-component'

// 不要忘记在导出类前 写上@Component 装饰器，@Component 修饰符注明了此类为一个 Vue 组件

@Component({

// 所有的组件选项都可以放在这里

template: 'Click!'

})

export default class MyComponent extends Vue {

// 初始数据可以直接声明为实例的 property

message: string = 'Hello!'

// 组件方法也可以直接声明为实例的方法

onClick (): void {

window.alert(this.message)

}

}

详细写法见文档：https://class-component.vuejs.org/ Vue-Property-Decorator 使用类的方式来描述组件时，有些写法不是很方便，比如 props，会比普通写法更麻烦。所以社区中 提供了vue-property-decorator，利用装饰器的特点，对classOpis 做了一些简化的写法。主要原理是对classAPIs 做了一些扩展，提供了一些快捷的装饰器，使书写起来更方便。

使用时需要先安装，不过vue项目已经内置安装好了。详细写法见 github地址

因为装饰器语法尚未定案，所以对该种写法了解即可，不用刻意采用

采用建议

No Class APIs，只用 Options APIs，class语法仅仅是一种写法而已，最终还是要转换为普通的组件数据结构，装饰器语法还没有正式定稿发布，建议了解即可。正式发布以后再选择使用也可以。

使用Options Apis最好是使用 export default Vue.extend({ … }) 而不是export default { … }

推荐文章

 您阅读本篇文章共花了：