本篇實屬 TypeScript 初心者，在將它與 Vue 2 的專案合併時所遇上的一系列掙扎後，最後作出個讓上手環境的難度較低的環境成品。
項目
1. Vetur 的套件衝突問題
由於想利用 EsLint 和 StyleLint 的規則檔，和 VS Code 內的套件進行整合，以達成「按下存檔，就自動排版好格式」的目標，也順帶統一管理規則。這時，集編譯、highlight、縮排於一身的 Vetur 工具，就顯得有些冗於，且容易發生衝突。經過測試後，jcbuisson 的 vue 套件進行 highlight、外加上 Vue 3 Snippets 來進行簡寫提示功能。
不過若只安裝上面兩套，那麼在瀏覽 .vue 的檔案時，會無法使用 TypeScript 的檢查功能。目前這點尚無兩全其美的解法。
2. VS Code 的設定檔調整
承接上個項目，最後得到的設定檔 json 如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
{ ......, "emmet.includeLanguages": { "vue-html": "html", "vue": "html" }, "editor.formatOnSave": false, "editor.codeActionsOnSave": { "source.fixAll.eslint": true, "source.fixAll.stylelint": true }, "eslint.alwaysShowStatus": true, "eslint.validate": [ "javascript", "javascriptreact", "typescript", "typescriptreact", "vue", ], "css.validate": false, "less.validate": false, "scss.validate": false, "files.autoSaveDelay": 500, } |
3. ES Lint 自動編排無法使用
通常問題會發生在你的 .eslintrc 設定檔並非在開啟視窗的根目錄下，可以在根目錄中新增 .vscode 資料夾，並在其內新增的 settings.json 如下：
|
1 2 3 4 5 6 7 |
// 相對於專案根目錄 { "eslint.workingDirectories": [ "路徑A", "路徑B" ] } |
4. 是否要使用 Class-Components 的撰寫模式
這點起先滿掙扎的，畢竟 TypeScript 的 Class 特色是一大優勢，但 Vue 在撰寫之初的設計概念就並不相同。用 Vue.extend() 的話，跟原先的 Object-based 的寫法比較起來差異最少，也不需要額外安裝一大堆的開發套件如 vue-class-component … 等。因為若你要用 vuex, vue-router 的話，還得額外安裝不少東西，造成入手門檻上升許多。最後，我選擇用 Vue.extend() 的方法。
5. 如何引入原生的 JavaScript 第三方套件
如果官方沒有特別出 TypeScript 版本的話 ( 以 Chart.js ) 為例，那麼可以先下載 chart.js 的 JavaScript 版本後，再額外去尋找有無新增描述檔，如 @types/chart.js 。
|
1 |
npm install chart.js @types/chart.js |
下載後，在要使用 Chart.js 的地方引入即可。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<template> <canvas id="chartJS"></canvas> </template> <script lang="ts"> import Vue from 'vue' import Chart from 'chart.js' export default Vue.extend({ name: 'HelloWorld', data () { return { chart: {}, data: [25, 75, 30], colors: ['red', 'green', 'blue'], labels: ['Red', 'Green', 'Blue'] } }, props: { msg: String }, mounted () { this.createChart({ datasets: [ { data: this.data, backgroundColor: this.colors } ], labels: this.labels }) }, methods: { createChart (chartData: object) { const canvas = document.getElementById('chartJS') as HTMLCanvasElement const options = { type: 'doughnut', data: chartData } this.chart = new Chart(canvas, options) console.log(this.chart) } } }) </script> |
參考資料
1. vue中引入typescript开发使用vue.extend()和vue.class-component
2. Update: the Class API proposal is being dropped.
3. Vue.js × TypeScript でclass style componentを廃止した話
