vue中使用TypeScript的方法
引言
近幾年前端對(duì) TypeScript的呼聲越來(lái)越高，Typescript也成為了前端必備的技能。TypeScript 是 JS類型的超集，并支持了泛型、類型、命名空間、枚舉等特性，彌補(bǔ)了 JS 在大型應(yīng)用開發(fā)中的不足。
在單獨(dú)學(xué)習(xí) TypeScript時(shí)，你會(huì)感覺很多概念還是比較好理解的，但是和一些框架結(jié)合使用的話坑還是比較多的，例如使用 React、Vue 這些框架的時(shí)候與 TypeScript 的結(jié)合會(huì)成為一大障礙，需要去查看框架提供的.d.ts的聲明文件中一些復(fù)雜類型的定義、組件的書寫方式等都要做出不小的調(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，官方文檔就是最好的入門手冊(cè)）
構(gòu)建
通過(guò)官方腳手架構(gòu)建安裝
# 1. 如果沒(méi)有安裝 Vue CLI 就先安裝 npm install --global @vue/cli
最新的Vue CLI工具允許開發(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ì)開始安裝依賴并設(shè)置項(xiàng)目。
目錄解析
安裝完成打開項(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 依賴
|-- 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)目中編寫 jsx 代碼shims-vue.d.ts: 主要用于 TypeScript 識(shí)別.vue 文件，Ts 默認(rèn)并不支持導(dǎo)入 vue 文件
使用
開始前我們先來(lái)了解一下在 vue 中使用 typescript 非常好用的幾個(gè)庫(kù)
vue-class-component: vue-class-component是一個(gè) 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 很好用的一個(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 的可選類型
- Constructor，例如 String，Number，Boolean 等，指定 prop 的類型
method
js 下是需要在 method 對(duì)象中聲明方法，現(xiàn)變成如下
public clickFunc(): void {
console.log(this.name)
console.log(this.msg)
}
Watch 監(jiān)聽屬性
@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 偵聽開始之后是否立即調(diào)用該回調(diào)函數(shù) / deep?:boolean 被偵聽的對(duì)象的屬性被改變時(shí)，是否調(diào)用該回調(diào)函數(shù)
@Watch(‘a(chǎn)rr', { immediate: true, deep: true })
onArrChanged(newValue: number[], oldValue: number[]) {}
computed 計(jì)算屬性
public get allname() {
return 'computed ' + this.name;
}
allname 是計(jì)算后的值，name 是被監(jiān)聽的值
生命周期函數(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 寫法
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)
}
}
}
然后開始使用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 中。開啟 dynamic 之后必須提供下面的屬性
- name:string 指定模塊名稱
- store:Vuex.Store 實(shí)體 提供初始的 store
@Mutation 標(biāo)注為 mutation
@Mutation
private SET_NAME(name: string) {
// 設(shè)置用戶名
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è)類型安全的 store，module 必須提供 name 屬性
export const UserModule = getModule(User);
到此這篇關(guān)于vue中使用TypeScript的方法的文章就介紹到這了,更多相關(guān)vue使用TypeScript內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- TypeScript枚舉的基礎(chǔ)知識(shí)及實(shí)例
- TypeScript中條件類型精讀與實(shí)踐記錄
- typescript+react實(shí)現(xiàn)移動(dòng)端和PC端簡(jiǎn)單拖拽效果
- webpack搭建腳手架打包TypeScript代碼
- React項(xiàng)目中應(yīng)用TypeScript的實(shí)現(xiàn)
- Vue3結(jié)合TypeScript項(xiàng)目開發(fā)實(shí)戰(zhàn)記錄
- Vue3 + TypeScript 開發(fā)總結(jié)
- Vue3+TypeScript實(shí)現(xiàn)遞歸菜單組件的完整實(shí)例
- 淺談TypeScript 索引簽名的理解
相關(guān)文章
el-form-item中表單項(xiàng)label和表單項(xiàng)內(nèi)容換行實(shí)現(xiàn)方法
這篇文章主要給大家介紹了el-form-item中表單項(xiàng)label和表單項(xiàng)內(nèi)容換行實(shí)現(xiàn)的相關(guān)資料,每個(gè)表單el-form由多個(gè)表單域el-form-item組成,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了elementui中使用el-tree控件懶加載和局部刷新，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue中對(duì)iframe實(shí)現(xiàn)keep alive無(wú)刷新的方法
這篇文章主要介紹了Vue中對(duì)iframe實(shí)現(xiàn)keep alive無(wú)刷新的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
Vue3中使用echarts的簡(jiǎn)單七個(gè)步驟(易懂,附緊急避坑)
近期在做一個(gè)vue3的項(xiàng)目,里面有個(gè)圖表需求,因公司之前使用第三方封裝的圖表缺少文檔,就去看了echars的官網(wǎng)文檔,引入原生echars來(lái)實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于Vue3中使用echarts的簡(jiǎn)單七個(gè)步驟,需要的朋友可以參考下2023-01-01
vue.js模仿京東省市區(qū)三級(jí)聯(lián)動(dòng)的選擇組件實(shí)例代碼
選擇省市區(qū)是我們大家在填寫地址的時(shí)候經(jīng)常會(huì)遇到的一個(gè)功能，下面這篇文章主要給大家介紹了關(guān)于利用vue.js模仿實(shí)現(xiàn)京東省市區(qū)三級(jí)聯(lián)動(dòng)選擇組件的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-11-11
這篇文章主要為大家介紹了vite插件打包更順暢的使用技巧示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
Vue中@click.native的使用方法及場(chǎng)景
在組件中時(shí)?？吹紷click.native,在項(xiàng)目中遇到后,簡(jiǎn)單介紹下,這篇文章主要給大家介紹了關(guān)于Vue中@click.native的使用方法及場(chǎng)景的相關(guān)資料,需要的朋友可以參考下2023-11-11
Vue使用Prism實(shí)現(xiàn)頁(yè)面代碼高亮展示示例
這篇文章主要為大家介紹了Vue使用Prism實(shí)現(xiàn)頁(yè)面代碼高亮展示示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
前端使用print.js實(shí)現(xiàn)打印功能(基于vue)
最近新接了一個(gè)需求,想要在前端實(shí)現(xiàn)打印功能,下面這篇文章主要給大家介紹了關(guān)于前端使用print.js實(shí)現(xiàn)打印功能(基于vue)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
這篇文章主要介紹了如何獲取this.$store.dispatch的返回值問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01