這篇文章將為大家詳細(xì)講解有關(guān)Typescript怎么在Vue項目中使用，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

我們提供的服務(wù)有：成都網(wǎng)站制作、成都做網(wǎng)站、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、瓦房店ssl等。為千余家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的瓦房店網(wǎng)站制作公司

Webpack 配置

配置webpack對TS，TSX的支持，以便于我們在Vue項目中使用Typescript和tsx。

module.exports = {
 entry: './index.vue',
 output: { filename: 'bundle.js' },
 resolve: {
  extensions: ['.ts', '.tsx', '.vue', '.vuex']
 },
 module: {
  rules: [
   { test: /\.vue$/, loader: 'vue-loader',
    options: {
    loaders: {
     ts: 'ts-loader',
     tsx: 'babel-loader!ts-loader',
    }
    }
   },
   { 
    test: /\.ts$/, 
    loader: 'ts-loader', 
    options: { appendTsSuffixTo: [/TS\.vue$/] }    },
   { 
    test: /\.tsx$/, 
    loader: 'babel-loader!ts-loader', 
    options: { 
     appendTsxSuffixTo: [/TSX\.vue$/] 
    } 
   }
  ]
 }
}

在上面的配置中，vue文件中的TS內(nèi)容將會使用ts-loader處理，而TSX內(nèi)容將會按照ts-loader-->babel-loader的順序處理。

appendTsSuffixTo/appendTsxSuffixTo 配置項的意思是說，從vue文件里面分離的script的ts,tsx（取決于）內(nèi)容將會被加上ts或者tsx的后綴，然后交由ts-loader解析。

我在翻看了ts-loader上關(guān)于appendTsxSuffixTo的討論發(fā)現(xiàn)，ts-loader貌似對文件后綴名稱有很嚴(yán)格的限定，必須得是ts/tsx后綴，所以得在vue-loader extract 的部分)可參考

官網(wǎng) tsx

基本用法

在vue 2.x中使用class的方式書寫vue組件需要依靠vue-property-decorator來對vue class做轉(zhuǎn)換。

import { Component, Prop, Vue } from "vue-property-decorator";
export default class extends Vue {
 @Prop({ default: 'default msg'}) private msg!: string;
 name!: string;
 show() {
  console.log("this.name", this.name);
 }
}

導(dǎo)出的class是經(jīng)過Vue.extend之后的VueComponent函數(shù)（理論上class就是一個Function）。

其最后的結(jié)果就像我們使用Vue.extend來擴展一個Vue組件一樣。

// 創(chuàng)建構(gòu)造器
var Profile = Vue.extend({
 template: '
{{firstName}} {{lastName}} aka {{alias}}
',
 data: function () {
  return {
   firstName: 'Walter',
   lastName: 'White',
   alias: 'Heisenberg'
  }
 }
})

export default {
  components: {
    Profile 
  }
}

注意上面的Profile組件并不是和我們平時一樣寫的Vue組件是一個plain object配置對象，它其實是一個VueComponent函數(shù)。

父組件實例化子組件的時候，會對傳入的vue object 進(jìn)行擴展，使用Vux.extend轉(zhuǎn)換為組件函數(shù)。
如果components中的值本身是一個函數(shù)，就會省略這一步。這一點， 從Vue 源碼中可以看出。

if (isObject(Ctor)) {
  Ctor = baseCtor.extend(Ctor)
 }

上面的Ctor就是在components中傳入的組件，對應(yīng)于上面導(dǎo)出的Profile組件。

使用vuex

使用vuex-class中的裝飾器來對類的屬性做注解。

import Vue from 'vue'import Component from 'vue-class-component'import {
 State,
 Getter,
 Action,
 Mutation,
 namespace
} from 'vuex-class'

const someModule = namespace('path/to/module')

@Component
export class MyComp extends Vue {
 @State('foo') stateFoo
 @State(state => state.bar) stateBar
 @Getter('foo') getterFoo
 @Action('foo') actionFoo
 @Mutation('foo') mutationFoo
 @someModule.Getter('foo') moduleGetterFoo

 // If the argument is omitted, use the property name
 // for each state/getter/action/mutation type
 @State foo
 @Getter bar
 @Action baz
 @Mutation qux

 created () {
  this.stateFoo // -> store.state.foo
  this.stateBar // -> store.state.bar
  this.getterFoo // -> store.getters.foo
  this.actionFoo({ value: true }) // -> store.dispatch('foo', { value: true })
  this.mutationFoo({ value: true }) // -> store.commit('foo', { value: true })
  this.moduleGetterFoo // -> store.getters['path/to/module/foo']
 }
}

mixin

對于mixin，我們使用class的繼承很容易實現(xiàn)類似功能。

import Vue from 'vue'
import { Component } from 'vue-property-decorator'
@Component
class DeployMixin extends Vue{
 name: string;
 deploy(){
  // do something
 }
}
@Component
class Index extends DeployMixin{
 constructor(){ 
  super()
 }
 sure(){
  this.deploy()
 }
}

VS code jsx快捷鍵

設(shè)置 VS code中對emmet的支持

"emmet.includeLanguages": {
  "javascript": "html"
}

或者是

"emmet.includeLanguages": {
  "javascript": "javascriptreact"
}

關(guān)于Typescript怎么在Vue項目中使用就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。