工作记录：TypeScript从入门到项目实战（项目篇）
Vue项目中使用
前面两篇介绍过TypeScript基础和较深入的东西，本章介绍如何在Vue项目中使用。
项目创建
创建项目直接使用Vue-cli创建
下面是步骤：
1.运行vuecli，
2.选择合适的目录创建项目
3.输入项目名并，选择包管理器，输入git仓库初始化内容
4.设置预设，如果你之前有合适的预设，可以设置该预设，这里选择手动
5.选择功能，其中TypeScript和babel必选，其他功能视项目而定：
6.设置配置，开启类样式组件语法（第一项），选择eslint配置为ESLint+Standard（第五项），开启保存时检查和修复代码
7.创建项目
8.安装一些插件
编辑器文件支持设置
这里以我们以后统一使用的Webstrom为例：
找到Editor>File and COde Templates
新建一个代码模板，输入名称，扩展名为vue，选择根据样式重新设置格式、选择启用该模板
内容区域输入：
<template lang="pug">
#[[$END$]]#
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component
export default class ${COMPONENT_NAME} extends Vue {
}
</script>
<style lang="stylus" rel="stylesheet/stylus" module>
</style>
点击应用之后，新建文件时选择刚建立的模板：
因为选择的是类样式语法，所以需要填入类名：
修改eslint、编辑器配置
修改eslint配置文件以支持检查TypeScript文件
.eslintrc.js文件的parserOptions选项中新增如下代码：
parser: '@typescript-eslint/parser'
修改编辑器配置以支持保存时自动修复代码
webstrom强大之处是对各种技术的支持，比如eslint检查代码。正常情况下，我们需要通过命令行检查代码，这非常麻烦，不过webstrom能够配置eslint，编辑器内检查不合eslint配置的代码，并且支持保存时修复。配置如下：
修改声明文件
对于我们自定义的插件、全局方法、全局变量等，TypeScript并不知道他们，为了让TypeScript认识他们，我们可以通过声明文件告诉TypeScript，如果使用model样式时的$style,我们修改shims-tsx.d.ts文件，在行末添加下面代码：
declare module 'vue/types/vue' {
interface Vue {
$style: {
[key: string]: string;
};
}
interface VueConstructor {
$style: {
[key: string]: string;
};
}
}
对于其他内容和上面方法类似
组件中使用
基本用法
因为使用类样式写组件中的js，所以写法上会略有不同，但是本质上还是不变的。
组件引用
组件引用通过传递参数components给装饰符@Component
@Component({
components: {
MapLegend: () => import('@/components/legend/index.vue')
}
})
过滤器
过滤器和组件类似，通过传递filters参数，filters对象内定义局部过滤器：
@Component({
filters: {
dateFormat (date:Date) {
return dateFormat(date)
}
}
})
指令
局部指令和过滤器类似，通过@Component装饰器传递参数directives：
@Component({
directives:{
focus: {
inserted: function (el) {
el.focus()
}
}
}
})
props
props不再通过对象属性形式定义，而是通过@Prop装饰器定义，其配置内容通过参数形式传入装饰器：
@Component
export default class Test extends Vue {
@Prop({
type:String,
default:'no name',
required:false
}) name!:string
mounted(){
console.log(name)
}
}
props同步版
通过@PropSync可以创建一个props属性的同步版本（即：变量改变，所对应的props属性也会随之改变）：
@Component
export default class Test extends Vue {
@PropSync('name',{
type:String,
default:'no name',
required:false
}) name!:string
mounted(){
this.name='nichols'
}
}
侦听器（watch）
类似的，侦听器通过@Watch装饰器定义，装饰器接收两个参数，第一个监视哪个变量，第二个其他配置：
@Component
export default class Test extends Vue {
isShow=false
@Watch('isShow',{
deep:true,
immediate:true
})
onIsShowChange(val:boolean,newVal:boolean){
}
}
侦听器同样可以被当做方法调用,只是执行其内部逻辑：
mounted(){
this.onIsShowChange(true,false)
}
emit
在组件中触发事件让父组件侦听到是一个非常常用的操作，通过@Emit装饰符定义，所定义的函数可以被当做普通函数调用：
@Component
export default class Test extends Vue {
name = ''
@Emit('change')
onChange (name: string) {
this.name = name
}
mounted () {
this.onChange('nichols')
}
}
其中如果有返回值，则返回值会作为触发的参数放在前面，而传入参数会放到返回值后面
ref
定义ref使用@Ref装饰器定义：
@Component
export default class Test extends Vue {
name = ''
@Ref('form') form!:HTMLElement
mounted(){
console.log(this.form.offsetHeight)
}
}
data
对于组件内的数据，我们可以直接使用类属性定义组件的数据：
@Component
export default class Test extends Vue {
isShow = false
form: {
username: string;
password: string;
} = {
username: '',
password: ''
}
mounted () {
this.isShow = true
}
}
函数（methods）
函数与data定义类似，为类添加一个方法即可：
@Component
export default class Test extends Vue {
log(){
// ....
}
}
计算属性
而计算属性，则是类的存取器的写法（getter、setter,对应Vue的getter和setter）：
@Component
export default class Test extends Vue {
lastName = '尼古拉斯'
firstName = '赵四'
get name (): string {
return `${this.firstName}·${this.lastName}`
}
set name (name: string) {
const names = name.split('·')
this.firstName = names[0]
this.lastName = names[0]
}
}
生命周期
可以直接定义所对应的钩子名称，或者借助vue-class-component/hooks.d.ts完成：
@Component
export default class Test extends Vue {
mounted () {
}
created () {
}
updated () {
}
beforeDestroy () {
}
destroyed () {
}
}
更加详细的内容
类型声明
src目录下types目录下，创建index.d.ts（或者更详细的文件名），然后定义类型，这里以扩展Event为例
interface Event{
DataTransfer:{
setData():void
}
}
为了避免全局变量混乱，可以使用export导出我们想要被外部访问的声明：
export interface User{
id:string;
name:string;
realName:string;
}
需要使用时，再在需要使用的地方导入即可：
import { User } from '@/types/user'
@Component
export default class Test extends Vue {
user:User={
id: '',
name: '',
realName: ''
}
}
旧项目的迁移
安装插件
1.启动vue ui（一把梭，就是干！），在插件项中点击添加插件，
2.搜索TypeScript，选择@vue/cli-pluging-typescript，点击安装即可
修改组件
1.script标签添加属性lang="ts"
2.组件引入添加.vue后缀名
3.修改默认导出为类样式：
export default {
name:'Component1'
}
修改为：
@Component
export default class Component1 extends Vue{
}
4.按照基本用法，将对应的数据更改为类样式
5.按照编辑器报错提示添加或者修改类型注释
修改js文件
1.js文件后缀改为.ts
2.添加类型约束
vuex的使用
vuex和vue组件使用方式类似，使用类样式+装饰器的形式定义，使用的依赖是vuex-module-decorators和vuex-class
安装
yarn add vuex-module-decorators vuex-class npm i vuex-module-decorators vuex-class
创建Store
Store的创建和常规创建方式一致，只是Vuex.Store参数中无需传入任何参数：
import Vue from 'vue'
import Vuex from 'vuex'
import User from '@/store/modules/user'
import getters from '@/store/getters'
Vue.use(Vuex)
export default new Vuex.Store({
})
定义模块
@Module
使用@Module定义一个vuex模块，接收如下参数：
|
属性 |
数据类型 |
描述 |
|
name |
string |
模块的名称（如果有名称空间） |
|
namespaced |
boolean |
模块是否具有名称空间 |
|
stateFactory |
boolean |
是否开启状态工厂（方便模块复用） |
|
dynamic |
true |
如果这是一个动态模块（在创建存储后添加到存储）
|
|
store |
Store<any> |
将注入此模块的存储区(用于动态模块) |
|
preserveState |
boolean |
如果启用此选项，则加载模块时将保留状态 |
创建模块语法如下：
import { VuexModule } from 'vuex-module-decorators'
@Module({
dynamic: true,//启用动态模块
name: 'User',
store,//注入store
namespaced: true,
stateFactory: true//开启工厂模式
})
export default class User extends VuexModule {
}
state
state的定义和组件中的data定义类似：
@Module({
dynamic: true,//启用动态模块
name: 'User',
store,//注入store
namespaced: true,
stateFactory: true//开启工厂模式
})
export default class User extends VuexModule {
token = getToken()
}
上面代码和下面代码效果一样：
export default {
state:{
token: getToken()
},
namespaced:true
}
@Mutation
mutation的定义使用@Mutation装饰器定义：
@Module({
dynamic: true,//启用动态模块
name: 'User',
store,//注入store
namespaced: true,
stateFactory: true//开启工厂模式
})
export default class User extends VuexModule {
token = getToken()
@Mutation
setToken (token: string) {
this.token = token
token ? setToken(token) : deleteToken()
}
}
@Action
使用@Action装饰器定义action，该装饰器接收三个参数：
|
参数名 |
类型 |
描述 |
|
commit |
string |
所提交的荷载 |
|
rawError |
boolean |
是否打印原始错误类型（默认会对报错信息进行包装） |
|
root |
boolean |
是否允许提交根荷载 |
如果不传入参数，需要手动提交荷载：
@Module({
dynamic: true,//启用动态模块
name: 'User',
store,//注入store
namespaced: true,
stateFactory: true//开启工厂模式
})
export default class User extends VuexModule {
token = getToken()
@Mutation
setToken (token: string) {
this.token = token
token ? setToken(token) : deleteToken()
}
@Action
async login () {
this.context.commit('setToken', 'token')
router.replace('/')
}
}
如果指定提交的荷载名，可通过函数的返回值设定荷载值：
@Module({
dynamic: true,//启用动态模块
name: 'User',
store,//注入store
namespaced: true,
stateFactory: true//开启工厂模式
})
export default class User extends VuexModule {
token = getToken()
@Mutation
setToken (token: string) {
this.token = token
token ? setToken(token) : deleteToken()
}
@Action({commit:'setToken'})
async login ():string {
router.replace('/')
return 'token'
}
}
@MutationAction
有时候简单地数据操作，mutation会显得有点多余，这时候，我们可以使用@MutationAction装饰器将mutatioin和action合二为一，用此装饰器定义的action会同时定义并提交荷载：
@Module({
dynamic: true,//启用动态模块
name: 'User',
store,//注入store
namespaced: true,
stateFactory: true//开启工厂模式
})
export default class User extends VuexModule {
testStr = ''
@MutationAction({ mutate: ['testStr'] })
async setStr () {
return new Promise<{ testStr: string }>(resolve => {
resolve({
testStr: 'test'
})
})
}
}
需要注意的是：返回对象的数据结构必须和指定的参数名一致
getter
getter的定义和Vue组件中的计算属性定义类似，使用get前置于方法名：
@Module
class MyModule extends VuexModule {
wheels = 2
get axles() {
return this.wheels / 2
}
}
完整示例
import {
deleteRefreshToken,
deleteToken,
deleteUserInfo,
getRefreshToken,
getToken,
getUserInfo,
setRefreshToken,
setToken,
setUserInfo
} from '@/utils/auth'
import { UserInfo } from '@/types/user'
import router from '@/router'
import { Action, Module, Mutation, MutationAction, VuexModule } from 'vuex-module-decorators'
@Module({
dynamic: true,//启用动态模块,模块将在调用getModule时注册
name: 'User',
store,//注入store
namespaced: true,
stateFactory: true//开启工厂模式
})
export default class User extends VuexModule {
token = getToken()
refreshToken = getRefreshToken()
userInfo: UserInfo | null = getUserInfo()
testStr = ''
@Mutation
setToken (token: string) {
this.token = token
token ? setToken(token) : deleteToken()
}
@Mutation
setRefreshToken (token: string) {
this.refreshToken = token
token ? setRefreshToken(token) : deleteRefreshToken()
}
@Mutation
setUserInfo (user: UserInfo | null) {
this.userInfo = user
user ? setUserInfo(user) : deleteUserInfo()
}
@MutationAction({ mutate: ['testStr'] })
async setStr () {
return new Promise<{ testStr: string }>(resolve => {
resolve({
testStr: 'test'
})
})
}
@Action
async login () {
this.context.commit('setToken', 'token')
this.context.commit('setRefreshToken', 'refreshToken')
this.context.commit('setUserInfo', {})
router.replace('/')
}
@Action
async loginOut () {
this.context.commit('setToken', '')
this.context.commit('setRefreshToken', '')
this.context.commit('setUserInfo', null)
router.replace('/login')
}
}
组件中使用
组件中通过getModule()方法进行获取到模块，可以通过定义计算属性以使用state：
import { Component, Vue } from 'vue-property-decorator'
import User from '@/store/modules/user'
import { getModule } from 'vuex-module-decorators'
import { namespace } from 'vuex-class'
let user:User = getModule(User)
@Component
export default class test extends Vue {
//动态数据，使用user.userInfo获取的并不是响应式数据
@namespace('User').State('userInfo') userInfo: UserInfo
login ():void {
console.log(user.testStr)
user.login()
}
get token ():string {
return user.token
}
mounted ():void {
}
}
小程序中使用
小程序中使用TypeScript比较简单，在创建项目时选择语言为TypeScript，其他的和Vue类似项目类似
不同的是，Vue项目会自动编译TypeScript，而小程序需要手动编译ts文件，这显得有点麻烦，所以我们可以使用webstrom开发小程序：
安装小程序插件，让webstrom支持小程序语法：File>Setting>Plugins，搜索Wechat mini programs upport，完成之后重启webstrom,这时候我们可以看到在右键菜单New那一项里面多了两个小程序选项：
配置ts文件自动编译：File>Setting>Languages & Frameworks>TypeScript，选中改变时重新编译：
扩展
本系列文章全面结合项目编写，如果你还想深入学习TypeScript的话可以看下面的网站：
如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
