vue中使用TypeScript的方法

更新時間：2021年08月12日 11:00:44 作者：前端森林

這篇文章主要介紹了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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中使用TypeScript的方法

引言

構(gòu)建

目錄解析

使用

組件聲明

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具