在 vue 中使用 typescript

構(gòu)建項(xiàng)目

通過官方腳手架構(gòu)建安裝

#  如果沒有安裝 Vue CLI 就先安裝
npm install --global @vue/cli

安裝后運(yùn)行 vue create my-app，進(jìn)入項(xiàng)目選擇預(yù)設(shè)界面，確保選擇 typescript、babel 選項(xiàng)。eslint 使用的是 standard 標(biāo)準(zhǔn)。

使用插件

首先需要了解一下在 vue 中常用的 typescript 庫：

  • 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-class：操作 vuex 的裝飾器 import { State, Getter, Action, Mutation, namespace } from 'vuex-class'

componnet 組件聲明

創(chuàng)建組件的方式：

import { Component, Vue } from 'vue-property-decorator'

@Component
export default class Home extends Vue {

}

使用引用UI組件時(shí)：

import { Component, Vue  } from 'vue-property-decorator'
import MyList from '../components/MyList.vue'

@Component({
  components: { MyList }
})
export default class Home extends Vue {

}

data 數(shù)據(jù)

import { Component, Vue } from 'vue-property-decorator'

@Component
export default class Home extends Vue {
  private message = 'this is a string'
  private list = [1, 2, 3, 4, 5]
  private show = true
}

Prop 聲明

@Prop({ type: Boolean, default: false }) value!: boolean
@Prop({ type: Function }) event!: Function
這兩種在語法上叫賦值斷言，!： 表示一定存在，?：表示可能不存在。
語法：@Prop(options: (PropOptions | Constructor[] | Constructor) = {})
  • PropOptions，可以使用以下選項(xiàng)：type，default，required，validator
  • Constructor[]，指定 prop 的可選類型
  • Constructor，例如 String，Number，Boolean 等，指定 prop 的類型

method 使用

不需要使用注解，直接申明使用即可

public increment (): void {
  this.num = this.num + 1
}

// 鼠標(biāo)、鍵盤、輸入、聚焦等事件，獲取事件對(duì)象時(shí)要聲明事件類型。如：
private handleMouseEvent (e: MouseEvent): void {
  console.log(e)
}

private handleInputEvent (e: InputEvent) {
  console.log(e)
}

private handleFocusEvent (e: FocusEvent) {
  console.log(e)
}

Watch 監(jiān)聽屬性

<script lang="ts">
import { Component, Watch, Vue } from 'vue-property-decorator'

@Component
export default class Home extends Vue {
  message = 123
  list = [1, 2, 3, 4, 5]

  @Watch('message')
  onMessageChange (o: number, n: number) {
    console.log(o, n)
  }

  @Watch('list', { immediate: true })
  onListChange (o: number[], n: number[]) {
    console.log(o, n)
  }
}
</script>
語法：@Watch(path: string, options: WatchOptions = {})
  • options 可使用 immediate?:boolean 立即監(jiān)聽 和 deep?:boolean 深度監(jiān)聽

computed 計(jì)算屬性

計(jì)算屬性可使用 get、set 方法

<script lang="ts">

import { Component, Vue } from 'vue-property-decorator'
@Component
export default class Home extends Vue {
  num = 123

  get myNum (): number {
    return this.num
  }

  set myNum (value: number) {
    this.num = value
  }
  
}
</script>

生命周期函數(shù)

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component
export default class Home extends Vue {
  beforeCreate () {
    console.log('beforeCreate')
  }
  created () {
    console.log('created')
  }
  beforeMount () {
    console.log('beforeMount')
  }
  mounted () {
    console.log('mounted')
  }
  beforeUpdate () {
    console.log('beforeUpdate')
  }
  updated () {
    console.log('updated')
  }
  beforeDestroy () {
    console.log('beforeMount')
  }
  destroyed () {
    console.log('destroyed')
  }
}
</script>

Emit 事件

<script lang="ts">
import { Component, Vue, Emit } from 'vue-property-decorator'

@Component
export default class Home extends Vue {
  num = 0

  @Emit()
  imcrement (n: number) {
    this.num += n
  }

  @Emit('reset')
  resetNum () {
    this.num = 0
  }

  @Emit()
  returnValue () {
    return 123
  }

  @Emit()
  handleInputChange (e: InputEvent) {
    const target = e.target as HTMLInputElement
    return target.value
  }

  @Emit()
  promise () {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve(123)
      }, 1000)
    })
  }
}
</script>

以上 ts 寫法轉(zhuǎn)譯為 js 寫法，如下：

export default {
  data() {
    return {
      num: 0
    }
  },
  methods: {
    increment (n) {
      this.num += n
      this.$emit('increment', n)
    }

    resetNum () {
      this.num = 0
      this.$emit('reset')
    }

    returnValue () {
      this.$emit('return-value', 123)
    }

    promise () {
      const promise = new Promise((resolve, reject) => {
        setTimeout(() => {
           resolve(123)
        }, 1000)
      })

      promise .then(res => {
        this.$emit('promise', res)
      })
    }
  }
}
語法： @Emit(event?: string)
  • Emit 裝飾器接收一個(gè)可選參數(shù)，該參數(shù)是 Emit 第一個(gè)參數(shù)，充當(dāng)參數(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ù)使用。

Mixins 混入

// mixins/user.ts

import { Component, Vue } from 'vue-property-decorator'

@Component
export default class User extends Vue {
  created () {
    console.log('mixins')
  }

  mixinMethod () {
    console.log('mixinMethod')
  }
}

// Home.vue

<script lang="ts">
import { Component, Mixins } from 'vue-property-decorator'
import User from '@/mixins/user'

@Component
export default class Home extends Mixins(User) {
  
}
</script>

vuex

// store/index.ts

import Vue from 'vue'
import Vuex from 'vuex'
import user from './user'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    user
  }
})

// store/user.ts

import { MutationTree, ActionTree, Commit } from 'vuex'

interface State {
  count: number;
  str: string;
}

const state: State = {
  count: 0,
  str: 'string'
}

// eslint-disable-next-line
const mutations: MutationTree<any> = {
  increment (state: State, payload: number) {
    state.count += payload
  }
}

// eslint-disable-next-line
const actions: ActionTree<string, any> = {
  increment (context: { commit: Commit }, payload: number) {
    context.commit('increment', payload)
  }
}

export default {
  namespaced: true, 
  state,
  mutations,
  actions
}

在 vue 組件使用 vuex 數(shù)據(jù)
namespaced 為 false 的時(shí)候，state，mutations，actions 全局可以調(diào)用，為 true，生成作用域，引用時(shí)要聲明模塊名稱。如為 namespaced: false 時(shí)：

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { State, Action } from 'vuex-class'

@Component
export default class Home extends Vue {

  @State(state => state.user.count) count!: number
  @Action('increment') increment!: Function

}
</script>

若 namespaced 為 true：

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { namespace } from 'vuex-class'
const userModule = namespace('user')

@Component
export default class Home extends Vue {

  @userModule.State(state => state.count) count!: number
  @userModule.Action('increment') increment!: Function

  // 或者
  @userModule.State
  str!: string
  @userModule.Action
  increment!: (value: number) => void

}
</script>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容