vue中使用TypeScript的方法
引言
近幾年前端對 TypeScript的呼聲越來越高，Typescript也成為了前端必備的技能。TypeScript 是 JS類型的超集，并支持了泛型、類型、命名空間、枚舉等特性，彌補了 JS 在大型應用開發(fā)中的不足。
在單獨學習 TypeScript時，你會感覺很多概念還是比較好理解的，但是和一些框架結(jié)合使用的話坑還是比較多的，例如使用 React、Vue 這些框架的時候與 TypeScript 的結(jié)合會成為一大障礙，需要去查看框架提供的.d.ts的聲明文件中一些復雜類型的定義、組件的書寫方式等都要做出不小的調(diào)整。
本篇文章主要是結(jié)合我的經(jīng)驗和大家聊一下如何在Vue中平滑的從js過渡到ts，閱讀本文建議對 TypeScript 有一定了解，因為文中對于一些 TypeScript 的基礎(chǔ)的知識不會有太過于詳細的講解。（具體可以參考官方文檔https://www.w3cschool.cn/typescript/typescript-tutorial.html，官方文檔就是最好的入門手冊）
構(gòu)建
通過官方腳手架構(gòu)建安裝
# 1. 如果沒有安裝 Vue CLI 就先安裝 npm install --global @vue/cli
最新的Vue CLI工具允許開發(fā)者 使用 TypeScript 集成環(huán)境 創(chuàng)建新項目。
只需運行vue create my-app。
然后，命令行會要求選擇預設(shè)。使用箭頭鍵選擇 Manually select features。
接下來，只需確保選擇了 TypeScript 和 Babel 選項，如下圖：
然后配置其余設(shè)置，如下圖：
設(shè)置完成 vue cli 就會開始安裝依賴并設(shè)置項目。
目錄解析
安裝完成打開項目,你會發(fā)現(xiàn)集成 ts 后的項目目錄結(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)資源 (會被直接復制)
| |-- favicon.ico # favicon圖標
| |-- index.html # html模板
|-- src
| |-- App.vue # 入口頁面
| |-- main.ts # 入口文件 加載組件 初始化等
| |-- shims-tsx.d.ts
| |-- shims-vue.d.ts
| |-- assets # 主題 字體等靜態(tài)資源 (由 webpack 處理加載)
| |-- components # 全局組件
| |-- router # 路由
| |-- store # 全局 vuex store
| |-- styles # 全局樣式
| |-- views # 所有頁面
|-- tests # 測試
其實大致看下來，與之前用js構(gòu)建的項目目錄沒有什么太大的不同，區(qū)別主要是之前 js 后綴的現(xiàn)在改為了ts后綴，還多了tsconfig.json、shims-tsx.d.ts、shims-vue.d.ts這幾個文件，那這幾個文件是干嘛的呢：
tsconfig.json: typescript配置文件,主要用于指定待編譯的文件和定義編譯選項shims-tsx.d.ts: 允許.tsx 結(jié)尾的文件，在 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'
組件聲明
創(chuàng)建組件的方式變成如下
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
@Component
export default class Test extends Vue {
}
data 對象
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;
!: 表示一定存在，?: 表示可能不存在。這兩種在語法上叫賦值斷言
@Prop(options: (PropOptions | Constructor[] | Constructor) = {})
- PropOptions，可以使用以下選項：type，default，required，validator
- Constructor[]，指定 prop 的可選類型
- Constructor，例如 String，Number，Boolean 等，指定 prop 的類型
method
js 下是需要在 method 對象中聲明方法，現(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 包含兩個屬性 immediate?:boolean 偵聽開始之后是否立即調(diào)用該回調(diào)函數(shù) / deep?:boolean 被偵聽的對象的屬性被改變時，是否調(diào)用該回調(diào)函數(shù)
@Watch(‘a(chǎn)rr', { immediate: true, deep: true })
onArrChanged(newValue: number[], oldValue: number[]) {}
computed 計算屬性
public get allname() {
return 'computed ' + this.name;
}
allname 是計算后的值，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 裝飾器接收一個可選參數(shù)，該參數(shù)是$Emit 的第一個參數(shù)，充當事件名。如果沒有提供這個參數(shù)，$Emit 會將回調(diào)函數(shù)名的 camelCase 轉(zhuǎn)為 kebab-case，并將其作為事件名
- @Emit 會將回調(diào)函數(shù)的返回值作為第二個參數(shù)，如果返回值是一個 Promise 對象，$emit 會在 Promise 對象被標記為 resolved 之后觸發(fā)
- @Emit 的回調(diào)函數(shù)的參數(shù)，會放在其返回值之后，一起被$emit 當做參數(shù)使用
vuex
在使用 store 裝飾器之前，先過一下傳統(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 標記當前為 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 實體 提供初始的 store
@Mutation 標注為 mutation
@Mutation
private SET_NAME(name: string) {
// 設(shè)置用戶名
this.name = name;
}
@Action 標注為 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 得到一個類型安全的 store，module 必須提供 name 屬性
export const UserModule = getModule(User);
到此這篇關(guān)于vue中使用TypeScript的方法的文章就介紹到這了,更多相關(guān)vue使用TypeScript內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue axios請求頻繁時取消上一次請求的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
Vuex中mutations與actions的區(qū)別詳解
下面小編就為大家分享一篇Vuex中mutations與actions的區(qū)別詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vuex頁面刷新后數(shù)據(jù)丟失的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
vue 路由meta 設(shè)置導航隱藏與顯示功能的示例代碼
這篇文章主要介紹了vue 路由meta 設(shè)置導航隱藏與顯示功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-09-09
element-ui重置resetFields()不生效的解決
本文主要介紹了element-ui重置resetFields()不生效的解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-12-12
解決vue.js this.$router.push無效的問題
今天小編就為大家分享一篇解決vue.js this.$router.push無效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細介紹了vue+element表格導出為Excel文件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
下面小編就為大家分享一篇Vue 攔截器對token過期處理方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
我們在 vue 項目的目錄中經(jīng)常看到 env 開頭的文件,在文件內(nèi)聲明一些變量,這些變量就是一些配置變量,在不同環(huán)境下可使用的變量,本文我們將給大家介紹在vue開發(fā)中如何利用.env文件,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了vue中使用js-doc的相關(guān)知識，本文結(jié)合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2024-01-01