引言
近幾年前端對(duì) TypeScript的呼聲越來(lái)越高，Typescript也成為了前端必備的技能。TypeScript 是 JS類(lèi)型的超集，并支持了泛型、類(lèi)型、命名空間、枚舉等特性，彌補(bǔ)了 JS 在大型應(yīng)用開(kāi)發(fā)中的不足。
在單獨(dú)學(xué)習(xí) TypeScript時(shí)，你會(huì)感覺(jué)很多概念還是比較好理解的，但是和一些框架結(jié)合使用的話(huà)坑還是比較多的，例如使用 React、Vue 這些框架的時(shí)候與 TypeScript 的結(jié)合會(huì)成為一大障礙，需要去查看框架提供的.d.ts的聲明文件中一些復(fù)雜類(lèi)型的定義、組件的書(shū)寫(xiě)方式等都要做出不小的調(diào)整。
本篇文章主要是結(jié)合我的經(jīng)驗(yàn)和大家聊一下如何在Vue中平滑的從js過(guò)渡到ts，閱讀本文建議對(duì) TypeScript 有一定了解，因?yàn)槲闹袑?duì)于一些 TypeScript 的基礎(chǔ)的知識(shí)不會(huì)有太過(guò)于詳細(xì)的講解。（具體可以參考官方文檔https://www.w3cschool.cn/typescript/typescript-tutorial.html，官方文檔就是最好的入門(mén)手冊(cè)）
構(gòu)建
通過(guò)官方腳手架構(gòu)建安裝
# 1. 如果沒(méi)有安裝 Vue CLI 就先安裝
npm install --global @vue/cli
最新的Vue CLI工具允許開(kāi)發(fā)者 使用 TypeScript 集成環(huán)境 創(chuàng)建新項(xiàng)目。
只需運(yùn)行vue create my-app。
然后，命令行會(huì)要求選擇預(yù)設(shè)。使用箭頭鍵選擇 Manually select features。
接下來(lái)，只需確保選擇了 TypeScript 和 Babel 選項(xiàng)，如下圖：
然后配置其余設(shè)置，如下圖：
設(shè)置完成 vue cli 就會(huì)開(kāi)始安裝依賴(lài)并設(shè)置項(xiàng)目。
目錄解析
安裝完成打開(kāi)項(xiàng)目,你會(huì)發(fā)現(xiàn)集成 ts 后的項(xiàng)目目錄結(jié)構(gòu)是這樣子的：
|-- ts-vue
|-- .browserslistrc # browserslistrc 配置文件 (用于支持 Autoprefixer)
|-- .eslintrc.js # eslint 配置
|-- .gitignore
|-- babel.config.js # babel-loader 配置
|-- package-lock.json
|-- package.json # package.json 依賴(lài)
|-- postcss.config.js # postcss 配置
|-- README.md
|-- tsconfig.json # typescript 配置
|-- vue.config.js # vue-cli 配置
|-- public # 靜態(tài)資源 (會(huì)被直接復(fù)制)
| |-- favicon.ico # favicon圖標(biāo)
| |-- index.html # html模板
|-- src
| |-- App.vue # 入口頁(yè)面
| |-- main.ts # 入口文件 加載組件 初始化等
| |-- shims-tsx.d.ts
| |-- shims-vue.d.ts
| |-- assets # 主題 字體等靜態(tài)資源 (由 webpack 處理加載)
| |-- components # 全局組件
| |-- router # 路由
| |-- store # 全局 vuex store
| |-- styles # 全局樣式
| |-- views # 所有頁(yè)面
|-- tests # 測(cè)試
其實(shí)大致看下來(lái)，與之前用js構(gòu)建的項(xiàng)目目錄沒(méi)有什么太大的不同，區(qū)別主要是之前 js 后綴的現(xiàn)在改為了ts后綴，還多了tsconfig.json、shims-tsx.d.ts、shims-vue.d.ts這幾個(gè)文件，那這幾個(gè)文件是干嘛的呢：
-
tsconfig.json: typescript配置文件,主要用于指定待編譯的文件和定義編譯選項(xiàng) -
shims-tsx.d.ts: 允許.tsx 結(jié)尾的文件，在 Vue 項(xiàng)目中編寫(xiě) jsx 代碼 -
shims-vue.d.ts: 主要用于 TypeScript 識(shí)別.vue 文件，Ts 默認(rèn)并不支持導(dǎo)入 vue 文件
使用
開(kāi)始前我們先來(lái)了解一下在 vue 中使用 typescript 非常好用的幾個(gè)庫(kù)
-
vue-class-component:vue-class-component是一個(gè) Class Decorator,也就是類(lèi)的裝飾器 -
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 寫(xiě) vuex 很好用的一個(gè)庫(kù)import { Module, VuexModule, Mutation, Action, MutationAction, getModule } from 'vuex-module-decorators'
組件聲明
創(chuàng)建組件的方式變成如下
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
@Component
export default class Test extends Vue {
}
data 對(duì)象
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
@Component
export default class Test extends Vue {
private name: string;
}
Prop 聲明
@Prop({ default: false }) private isCollapse!: boolean;
@Prop({ default: true }) private isFirstLevel!: boolean;
@Prop({ default: "" }) private basePath!: string;
- !: 表示一定存在，?: 表示可能不存在。這兩種在語(yǔ)法上叫賦值斷言
- @Prop(options: (PropOptions | Constructor[] | Constructor) = {})
- PropOptions，可以使用以下選項(xiàng)：type，default，required，validator
- Constructor[]，指定 prop 的可選類(lèi)型
- Constructor，例如 String，Number，Boolean 等，指定 prop 的類(lèi)型
method
js 下是需要在 method 對(duì)象中聲明方法，現(xiàn)變成如下
public clickFunc(): void {
console.log(this.name)
console.log(this.msg)
}
Watch 監(jiān)聽(tīng)屬性
@Watch("$route", { immediate: true })
private onRouteChange(route: Route) {
const query = route.query as Dictionary<string>;
if (query) {
this.redirect = query.redirect;
this.otherQuery = this.getOtherQuery(query);
}
}
- @Watch(path: string, options: WatchOptions = {})
- options 包含兩個(gè)屬性 immediate?:boolean 偵聽(tīng)開(kāi)始之后是否立即調(diào)用該回調(diào)函數(shù) / deep?:boolean 被偵聽(tīng)的對(duì)象的屬性被改變時(shí)，是否調(diào)用該回調(diào)函數(shù)
- @Watch('arr', { immediate: true, deep: true })
onArrChanged(newValue: number[], oldValue: number[]) {}
computed 計(jì)算屬性
public get allname() {
return 'computed ' + this.name;
}
allname 是計(jì)算后的值，name 是被監(jiān)聽(tīng)的值
生命周期函數(shù)
public created(): void {
console.log('created');
}
public mounted():void{
console.log('mounted')
}
emit 事件
import { Vue, Component, Emit } from 'vue-property-decorator'
@Component
export default class MyComponent extends Vue {
count = 0
@Emit()
addToCount(n: number) {
this.count += n
}
@Emit('reset')
resetCount() {
this.count = 0
}
@Emit()
returnValue() {
return 10
}
@Emit()
onInputChange(e) {
return e.target.value
}
@Emit()
promise() {
return new Promise(resolve => {
setTimeout(() => {
resolve(20)
}, 0)
})
}
}
使用 js 寫(xiě)法
export default {
data() {
return {
count: 0
}
},
methods: {
addToCount(n) {
this.count += n
this.$emit('add-to-count', n)
},
resetCount() {
this.count = 0
this.$emit('reset')
},
returnValue() {
this.$emit('return-value', 10)
},
onInputChange(e) {
this.$emit('on-input-change', e.target.value, e)
},
promise() {
const promise = new Promise(resolve => {
setTimeout(() => {
resolve(20)
}, 0)
})
promise.then(value => {
this.$emit('promise', value)
})
}
}
}
- @Emit(event?: string)
- @Emit 裝飾器接收一個(gè)可選參數(shù)，該參數(shù)是$Emit 的第一個(gè)參數(shù)，充當(dāng)事件名。如果沒(méi)有提供這個(gè)參數(shù)，$Emit 會(huì)將回調(diào)函數(shù)名的 camelCase 轉(zhuǎn)為 kebab-case，并將其作為事件名
- @Emit 會(huì)將回調(diào)函數(shù)的返回值作為第二個(gè)參數(shù)，如果返回值是一個(gè) Promise 對(duì)象，$emit 會(huì)在 Promise 對(duì)象被標(biāo)記為 resolved 之后觸發(fā)
- @Emit 的回調(diào)函數(shù)的參數(shù)，會(huì)放在其返回值之后，一起被$emit 當(dāng)做參數(shù)使用
vuex
在使用 store 裝飾器之前，先過(guò)一下傳統(tǒng)的 store 用法吧
export default {
namespaced:true,
state:{
foo:""
},
getters:{
getFoo(state){ return state.foo}
},
mutations:{
setFooSync(state,payload){
state.foo = payload
}
},
actions:{
setFoo({commit},payload){
commot("getFoo",payload)
}
}
}
然后開(kāi)始使用vuex-module-decorators
import {
VuexModule,
Mutation,
Action,
getModule,
Module
} from "vuex-module-decorators";
-
VuexModule用于基本屬性export default class TestModule extends VuexModule { }VuexModule 提供了一些基本屬性，包括 namespaced,state,getters,modules,mutations,actions,context
-
@Module標(biāo)記當(dāng)前為 module@Module({ dynamic: true, store, name: "settings" }) class Settings extends VuexModule implements ISettingsState { }module 本身有幾種可以配置的屬性:
- namespaced:boolean 啟/停用 分模塊
- stateFactory:boolean 狀態(tài)工廠
- dynamic:boolean 在 store 創(chuàng)建之后，再添加到 store 中。開(kāi)啟 dynamic 之后必須提供下面的屬性
- name:string 指定模塊名稱(chēng)
- store:Vuex.Store 實(shí)體 提供初始的 store
-
@Mutation標(biāo)注為 mutation@Mutation private SET_NAME(name: string) { // 設(shè)置用戶(hù)名 this.name = name; } -
@Action標(biāo)注為 action@Action public async Login(userInfo: { username: string; password: string }) { // 登錄接口，拿到token let { username, password } = userInfo; username = username.trim(); const { data } = await login({ username, password }); setToken(data.accessToken); this.SET_TOKEN(data.accessToken); } -
getModule得到一個(gè)類(lèi)型安全的 store，module 必須提供 name 屬性export const UserModule = getModule(User);
示例
我之前基于 ts+vue+element 構(gòu)建了一個(gè)簡(jiǎn)單的中后臺(tái)通用模板。
涵蓋的功能如下：
- 登錄 / 注銷(xiāo)
- 權(quán)限驗(yàn)證
- 頁(yè)面權(quán)限
- 權(quán)限配置
- 多環(huán)境發(fā)布
- Dev / Stage / Prod
- 全局功能
- 動(dòng)態(tài)換膚
- 動(dòng)態(tài)側(cè)邊欄（支持多級(jí)路由嵌套）
- Svg 圖標(biāo)
- 全屏
- 設(shè)置
- Mock 數(shù)據(jù) / Mock 服務(wù)器
- 組件
- ECharts 圖表
- 表格
- 復(fù)雜表格
- 控制臺(tái)
- 引導(dǎo)頁(yè)
- 錯(cuò)誤頁(yè)面
- 404
里面對(duì)于在 vue 中使用 typescript 的各種場(chǎng)景都有很好的實(shí)踐，大家感興趣的可以參考一下，https://github.com/FSFED/ts-vue，當(dāng)然不要吝惜你的 star！！！
