3.0遲遲沒(méi)有發(fā)布release版本，現(xiàn)階段在Vue項(xiàng)目中使用Typescript需要花不小的精力在工程的配置上面。主要的工作是webpack對(duì)TS，TSX的處理，以及2.x版本下面使用class的形式書(shū)寫(xiě)Vue 組件的一些限制和注意事項(xiàng)。
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)容將會(huì)使用ts-loader處理，而TSX內(nèi)容將會(huì)按照ts-loader-->babel-loader的順序處理。
appendTsSuffixTo/appendTsxSuffixTo 配置項(xiàng)的意思是說(shuō)，從vue文件里面分離的script的ts,tsx（取決于<script lang="xxx"></script>）內(nèi)容將會(huì)被加上ts或者tsx的后綴，然后交由ts-loader解析。
我在翻看了ts-loader上關(guān)于appendTsxSuffixTo的討論發(fā)現(xiàn)，ts-loader貌似對(duì)文件后綴名稱有很嚴(yán)格的限定，必須得是ts/tsx后綴，所以得在vue-loader extract <script>中內(nèi)容后，給其加上ts/tsx的后綴名，這樣ts-loader才會(huì)去處理這部分的內(nèi)容。
ts-loader只對(duì)tsx做語(yǔ)法類型檢查，真正的jsx-->render函數(shù)應(yīng)該交由babel處理。
所以我們還需要使用plugin-transform-vue-jsx來(lái)將vue jsx轉(zhuǎn)換為真正的render函數(shù)。
// babel.config.json{ "presets": ["env"], "plugins": ["transform-vue-jsx"]}同時(shí)，配置TS對(duì)tsx的處理為preserve，讓其只對(duì)tsx做type類型檢查。
// tsconfig.json{??"compilerOptions":?{????"jsx":?"preserve",}高版本的vue cli如4.x已經(jīng)集成了vue + typescript的配置。選擇use Typescript + Use class-style component syntax選項(xiàng)創(chuàng)建工程。
創(chuàng)建后的工程目錄如下：
在src根目錄下，有兩個(gè)shims.xx.d.ts的類型聲明文件。
// shims.vue.d.tsdeclare?module?"*.vue"?{??import?Vue?from?"vue";??export?default?Vue;}// shims.jsx.d.tsimport?Vue,?{?VNode?}?from?"vue";declare?global?{??namespace?JSX?{????//?tslint:disable?no-empty-interface????interface?Element?extends?VNode?{}????//?tslint:disable?no-empty-interface????interface?ElementClass?extends?Vue?{}????interface?IntrinsicElements?{??????[elem:?string]:?any;????}??}}它們是作什么用的呢？
shims.vue.d.ts給所有.vue文件導(dǎo)出的模塊聲明了類型為Vue，它可以幫助IDE判斷.vue文件的類型。
shims.jsx.d.ts 為 JSX 語(yǔ)法的全局命名空間，這是因?yàn)榛谥档脑貢?huì)簡(jiǎn)單的在它所在的作用域里按標(biāo)識(shí)符查找。當(dāng)在 tsconfig 內(nèi)開(kāi)啟了 jsx 語(yǔ)法支持后，其會(huì)自動(dòng)識(shí)別對(duì)應(yīng)的 .tsx 結(jié)尾的文件，(也就是Vue 單文件組件中<script lang="tsx"></script>的部分)可參考
官網(wǎng) tsx
在vue 2.x中使用class的方式書(shū)寫(xiě)vue組件需要依靠vue-property-decorator來(lái)對(duì)vue class做轉(zhuǎn)換。
<script?lang="ts">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);??}}</script>導(dǎo)出的class是經(jīng)過(guò)Vue.extend之后的VueComponent函數(shù)（理論上class就是一個(gè)Function）。
其最后的結(jié)果就像我們使用Vue.extend來(lái)擴(kuò)展一個(gè)Vue組件一樣。
//?創(chuàng)建構(gòu)造器var?Profile?=?Vue.extend({??template:?'<p>{{firstName}}?{{lastName}}?aka?{{alias}}</p>',??data:?function?()?{????return?{??????firstName:?'Walter',??????lastName:?'White',??????alias:?'Heisenberg'????}??}})export default { components: { Profile }}注意上面的Profile組件并不是和我們平時(shí)一樣寫(xiě)的Vue組件是一個(gè)plain object配置對(duì)象，它其實(shí)是一個(gè)VueComponent函數(shù)。
父組件實(shí)例化子組件的時(shí)候，會(huì)對(duì)傳入的vue object 進(jìn)行擴(kuò)展，使用Vux.extend轉(zhuǎn)換為組件函數(shù)。
如果components中的值本身是一個(gè)函數(shù)，就會(huì)省略這一步。這一點(diǎn)， 從Vue 源碼中可以看出。
if?(isObject(Ctor))?{????Ctor?=?baseCtor.extend(Ctor)??}上面的Ctor就是在components中傳入的組件，對(duì)應(yīng)于上面導(dǎo)出的Profile組件。
使用vuex-class中的裝飾器來(lái)對(duì)類的屬性做注解。
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')@Componentexport 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'] }}對(duì)于mixin，我們使用class的繼承很容易實(shí)現(xiàn)類似功能。
import?Vue?from?'vue'import?{?Component?}?from?'vue-property-decorator'@Componentclass?DeployMixin?extends?Vue{??name:?string;??deploy(){????//?do?something??}}@Componentclass?Index?extends?DeployMixin{??constructor(){?????super()??}??sure(){????this.deploy()??}}設(shè)置 VS code中對(duì)emmet的支持
"emmet.includeLanguages":?{ "javascript":?"html"}或者是
"emmet.includeLanguages":?{ "javascript":?"javascriptreact"}聯(lián)系客服
