概述
近几年前端对 TypeScript 的热度直增不减，Typescript 也成了前端必备的技能。TypeScript 是 JS 类型的超集，并支持了泛型、类型、命名空间、枚举等特性，弥补了 JS 在大型应用开发中的不足。
在单独学习 TypeScript 时，你会感觉很多概念还是比较好理解的，但是和一些框架结合使用的话坑还是比较多的，例如使用 React、Vue 这些框架的时候与 TypeScript 的结合会成为一大障碍，需要去查看框架提供的.d.ts 的声明文件中一些复杂类型的定义、组件的书写方式等都要做出不小的调整。在阅读本文前，建议对 TypeScript和Vue有一定了解。
构建
- 通过官网安装
Vue CLI脚手架
npm install --global @vue/cli 复制代码
- 用最新的
Vue CLI工具允许开发者 使用 TypeScript 集成环境 创建新项目。
vue create my-app
- 使用箭头键选择
Manually select features，只需确保选择了TypeScript和Babel选项，其它根据自己喜好来选择安装。 - 设置完成 vue cli 就会开始安装依赖并设置项目。
目录解析
|-- my-app |-- .browserslistrc # browserslistrc 配置文件 (用于支持 Autoprefixer) |-- .eslintrc.js # eslint 配置 |-- .gitignore |-- babel.config.js # babel-loader 配置 |-- package-lock.json |-- package.json # package.json 依赖 |-- postcss.config.js # postcss 配置 |-- README.md |-- tsconfig.json # typescript 配置 |-- vue.config.js # vue-cli 配置 |-- public # 静态资源 (会被直接复制) | |-- favicon.ico # favicon图标 | |-- index.html # html模板 |-- src | |-- App.vue # 入口页面 | |-- main.ts # 入口文件 加载组件 初始化等 | |-- shims-tsx.d.ts | |-- shims-vue.d.ts | |-- assets # 主题 字体等静态资源 (由 webpack 处理加载) | |-- components # 全局组件 | |-- router # 路由 | |-- store # 全局 vuex store | |-- styles # 全局样式 | |-- views # 所有页面 |-- tests # 测试
其实项目目录结构没太多变化，主要区别主要是之前 js 后缀的现在改为了 ts 后缀，还多了
tsconfig.json、shims-tsx.d.ts、shims-vue.d.ts这几个文件。
tsconfig.json: typescript 配置文件,主要用于指定待编译的文件和定义编译选项shims-tsx.d.ts: 允许.tsx 结尾的文件，在 Vue 项目中编写 jsx 代码shims-vue.d.ts: 主要用于 TypeScript 识别.vue 文件，TS 默认并不支持导入 vue 文件
使用
开始前我们先来了解一下在 vue 中使用 typescript 常用的几个库
vue-class-component:vue-class-component是一个 Class Decorator,也就是类的装饰器vue-property-decorator:vue-property-decorator是基于 vue 组织里 vue-class-component 所做的拓展
import { Vue, Component, Inject, Provide, Prop, Model, Watch, Emit, Mixins } from 'vue-property-decorator'
vuex-module-decorators: 用 typescript 写 vuex 很好用的一个库
import { Module, VuexModule, Mutation, Action, MutationAction, getModule } from 'vuex-module-decorators'
组件声明
- 组件申明
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'; @Component export default class Home extends Vue { // data对象 private name: string; private msg: string; // prop申明 @Prop({ default: false }) private isCollapse!: boolean; @Prop({ default: true }) private isFirstLevel!: boolean; @Prop({ default: "" }) private basePath!: string; // methods申明 public clickFunc(): void { console.log(this.name) console.log(this.msg) } // Watch 监听属性 @Watch("$route", { immediate: true }) private onRouteChange(route: Route) { const query = route.query as Dictionary; if (query) { this.redirect = query.redirect; this.otherQuery = this.getOtherQuery(query); } } }
两种在语法上叫赋值断言
- !: 表示一定存在，
- ?: 表示可能不存在。
- @Prop(options: (PropOptions | Constructor[] | Constructor) = {})
- PropOptions，可以使用以下选项：type，default，required，validator
- Constructor[]，指定 prop 的可选类型
- Constructor，例如 String，Number，Boolean 等，指定 prop 的类型
