使用TS 开发vue项目

这篇具有很好参考价值的文章主要介绍了使用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

<script lang='ts'>
import Vue from 'vue'   // 1.加载vue

export default Vue.extend({   // 2.定义并导出一个组件 vue.extend({})
    // 中间内容与之前写法一样，之前放什么，extend对象中放什么
})
</script>

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

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

// 不要忘记在导出类前 写上@Component 装饰器，@Component 修饰符注明了此类为一个 Vue 组件
@Component({
  // 所有的组件选项都可以放在这里
  template: '<button @click="onClick">Click!</button>'
})
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 { … }文章来源地址https://www.toymoban.com/news/detail-636555.html

到了这里，关于使用TS 开发vue项目的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！