vue + typescript 進階篇

本文是繼 Vue + TypeScript 新項目起手式 之后的進階+踩坑配置，所以推薦先行閱讀前文

完整閱讀完之后，基本可以順利在新項目中使用vue + typescript 了

另外特別注意！！！

不推薦在已有項目上強加 typescript， 因ts寫法的組件跟之前的組件不兼容，若上的話需要修改之前寫的組件

配置完整版可參考 vue-typescript-starter，若沒配置出來，也可以對照修改配置

直接進入正題：

概覽

• ts 支持 render jsx 寫法

• ts 支持 es6 / es67

• 配置 vuex

• vue 識別全局方法/變量

• 支持 mixin

• 支持 ProvidePlugin 的全局變量，比如 lodash的_

支持 render jsx 寫法

這里一共分兩步

1. 首先得先讓 vue 支持 jsx 寫法

2. 再讓 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 // 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'] } }

讓 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' 的行為不一致，這樣的話，之后會留下隱患

到這里，本文的配置就到此結束

最后

本文的這些配置都是在新項目開發中，一步步用血汗踩出來的

目測已經涵蓋了大部分的使用問題，如果有其他的意見或建議的話，歡迎在本文下面評論~~

再發一次，配置完整版可參考 vue-typescript-starter，若沒配置出來，也可以對照修改配置

在剛上typescript的時候，我是拒絕的，嫌棄每個地方都要聲明類型，不然就走不下去，但是如果讓你們做以下一個選擇題：

• 在編譯時發現問題

• 還是運行時發現問題

我會毫不猶豫選擇前者，這是ts強類型帶給我最大的亮點