深入使用TS
支持 render jsx 寫法
這里一共分兩步
-
首先得先讓
vue支持jsx寫法 -
再讓
vue中的ts支持jsx寫法
讓 vue 支持 jsx
按照官方做法，安裝Babel 插件
安裝依賴
npm install\ babel-plugin-syntax-jsx\ babel-plugin-transform-vue-jsx\ babel-helper-vue-jsx-merge-props\ babel-preset-es2015\ --save-dev
在.babelrc中添加：
{ "plugins": ["transform-vue-jsx"] }
之后就可以這些寫render，如下圖：
讓 ts 支持 jsx
首先配置 webpack
找到./build/webpack.base.conf.js
-
找到
resolve.extensions里面加上.tsx后綴
resolve: { extensions: ['.js', '.vue', '.json', '.ts', '.tsx'] }
-
找到
module.rules修改webpack對.tsx.ts的解析
module: { rules: [ { test: /\.(js|vue)$/, loader: 'eslint-loader', enforce: 'pre', include: [resolve('src'), resolve('test')], options: { formatter: require('eslint-friendly-formatter') } }, // 從這里復制下面的代碼就可以了 // 如果之前按照起手式配置的同學，請替換配置 { test: /\.tsx?$/, exclude: /node_modules/, enforce: 'pre', loader: 'tslint-loader' }, { test: /\.vue$/, loader: 'vue-loader', options: Object.assign(vueLoaderConfig, { loaders: { ts: "ts-loader", tsx: "babel-loader!ts-loader" } }) }, { test: /\.tsx?$/, exclude: /node_modules/, use: [ "babel-loader", { loader: "ts-loader", options: { appendTsxSuffixTo: [/\.vue$/] } } ] }, // 復制截止 { test: /\.js$/, loader: 'babel-loader', include: [resolve('src'), resolve('test')] },
上面的配置，主要意思是 vue 文件識別ts/tsx代碼的時候，先過一遍ts-loader，在過一遍babel-loader，我知道這聽起來有點蠢，但是jsx不能不要對吧？
然后在 tsconfig.json中，添加對jsx的支持
"compilerOptions": { "jsx": "preserve" }
之后就可以順利在.vue單文件中的ts寫jsx代碼了，如下圖所示：
敲黑板，這里又有重點，使用
jsx寫法的話， 一定要使用.tsx，不要用.ts了，切記！！！
支持es6 / es7
在 tsconfig.json中，添加對es6 / es7的支持，更多的配置請見tsconfig - 編譯選項
"lib": [ "dom", "es5", "es6", "es7", "es2015.promise" ]
不然的話，連Object.assign 這種最基本的函數也會在ts中報錯，真的令人難過
配置 vuex
這里就比較簡單了
# 安裝依賴npm i vuex vuex-class --save
-
vuex：在
vue中集中管理應用狀態 -
vuex-class ：在
vue-class-component寫法中 綁定vuex
Store的配置跟原來一模一樣，引用的時候有一點區別，下面的例子介紹了用法，應該一看便知，這里我不做贅述
import Vue from 'vue' import Component from 'vue-class-component' import { State, Getter, Action, Mutation, namespace } from 'vuex-class' const ModuleGetter = namespace('path/to/module', Getter) @Component export class MyComp extends Vue { @State('foo') stateFoo @State(state => state.bar) stateBar @Getter('foo') getterFoo @Action('foo') actionFoo @Mutation('foo') mutationFoo @ModuleGetter('foo') moduleGetterFoo // 如果省略了參數，使用屬性名 // 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'] } }
讓 vue 識別全局方法/變量
在項目中使用 ui 組件是很正常的操作
比如使用 Element-uI 的 meesage，用法如下圖：
this.$message({ message: '恭喜你，這是一條成功消息', type: 'success' })
但是在配置了 typescript之后
那是因為 $message屬性，並沒有在 vue實例中聲明
解決辦法也非常簡單，那我們就聲明一下唄
在之前文章中創建的 src/vue-shim.d.ts文件中，增加如下代碼：
// 聲明全局方法 declare module 'vue/types/vue' { interface Vue { $Message: any, $Modal: any } }
這樣，之后再使用this.$message()的話就不會報錯了
支持 mixin
我在vue-property-decorator里里外外找了好幾圈，缺沒有找到mixin這個修飾器
// 如果全局mixin，那也太蠢了 Vue.mixin( mixin )
找非常多的 ts + vue 項目，但是沒有找到我理想的mixin的方式，
那么就自己進行探索咯，下圖是我自己使用的目前最佳mixin方式：
聲明了一個mixin組件，如下圖：
其實就是我在mixin中聲明了聲明屬性 / 方法，那么我就在vue實例中聲明這個屬性 / 方法
使用方式如下圖：
支持 ProvidePlugin 的全局變量，比如 lodash 的 _
如果我們在項目中有使用 jquery，lodash 這樣的工具庫的時候，肯定不希望在所有用到的地方都import _ from ‘lodash’
@types/lodash
那我們就來配置一下：
首先還是在webpack.base.conf.js 中添加一個插件、並把這個 vendor拉出來
entry: { app: './src/main.ts', vendor: [ "lodash" ] } plugins: [ new webpack.ProvidePlugin({ _: 'lodash' }) ]
上面的意思是，當模塊使用這些變量的時候wepback會自動加載
然后，你需要告訴eslint這個 _ 是全局的
在.eslintrc.js中添加
globals: { _: true },
接下來，你還需要告訴ts這個 _ 是全局的
在vue-shim.d.ts
declare global { const _: typeof lodash }
如果沒有上面這段聲明，但是在
ts中使用的話，會報如下的錯誤：
這個問題Consider allowing access to UMD globals from modules · Issue #10178 · Microsoft/TypeScript · GitHub
有一個很簡單的解釋，就是害怕你全局聲明的_ 跟 import _ from 'lodash' 的行為不一致，這樣的話，之后會留下隱患