vue + typescript 專案起手式

三命發表於2017-10-27

vue + typescript 新專案起手式

最後更新於2018-06-30,技術文具有時效性,請知悉

我知道你們早就想用上 vue + ts 強型別了

還有後續 vue + typescript 進階篇

  • 安裝vue-cli
  • 安裝ts依賴
  • 配置 webpack
  • 新增 tsconfig.json
  • 新增 tslint.json
  • ts 識別 .vue
  • 改造 .vue檔案

什麼是typescript

TypeScriptJavaScript 的強型別版本。然後在編譯期去掉型別和特有語法,生成純粹的 JavaScript 程式碼。由於最終在瀏覽器中執行的仍然是 JavaScript,所以 TypeScript 並不依賴於瀏覽器的支援,也並不會帶來相容性問題。

TypeScriptJavaScript 的超集,這意味著他支援所有的 JavaScript 語法。並在此之上對 JavaScript 新增了一些擴充套件,如 class / interface / module 等。這樣會大大提升程式碼的可閱讀性。

與此同時,TypeScript 也是 JavaScript ES6 的超集,GoogleAngular 2.0 也宣佈採用 TypeScript 進行開發。這更是充分說明了這是一門面向未來並且腳踏實地的語言。

強型別語言的優勢在於靜態型別檢查,具體可以參見 http://www.zhihu.com/question... 的回答。概括來說主要包括以下幾點:

  1. 靜態型別檢查
  2. IDE 智慧提示
  3. 程式碼重構
  4. 可讀性
靜態型別檢查可以避免很多不必要的錯誤, 不用在除錯的時候才發現問題

前言

隨著vue2.5 更好的 TypeScript 整合,同時因為新開專案的契機,故準備動手嘗試一下typescript + vue

都說ts萬般好,不如一個段子來的直觀,一個程式設計師自從用上了ts之後,連續寫了3000+行程式碼一次編譯通過一氣呵成,然後很激動的打電話跟老婆炫耀這件事情,老婆回了一句

之前看文章或者 demo 一直認為 vue + typescript 之後就不能友好的寫.vue單檔案,並且我也在各種 live 中問vue + ts 或者 flow的整合,也一直沒有問出什麼好的實踐,但是本上強上ts的念頭,一個字,就是幹!

終於決定自己動手,那接下來從 vue-cli 開始配置 ts,看看事實上整合 ts 的體驗到底是如何呢?


先貼一張最後配置完畢的.vue檔案 ,template 和 style 跟以前的寫法保持一致,只有 script 的變化

圖片描述

起手vue-cli

這步應該不用寫了

Vue 引入 TypeScript

首先Cli之後,接下來需要安裝一些必要/以後需要的外掛

安裝vue的官方外掛
npm i vue-class-component vue-property-decorator --save

// ts-loader typescript 必須安裝,其他的相信你以後也會裝上的
npm i ts-loader typescript tslint tslint-loader tslint-config-standard --save-dev

這些庫大體的作用,可以按需引入:

  • vue-class-component:強化 Vue 元件,使用 TypeScript/裝飾器 增強 Vue 元件
  • vue-property-decorator:在 vue-class-component 上增強更多的結合 Vue 特性的裝飾器
  • ts-loader:TypeScript 為 Webpack 提供了 ts-loader,其實就是為了讓webpack識別 .ts .tsx檔案
  • tslint-loadertslint:我想你也會在.ts .tsx檔案 約束程式碼格式(作用等同於eslint)
  • tslint-config-standardtslint 配置 standard風格的約束

配置 webpack

首先找到./build/webpack.base.conf.js

  • 找到entry.appmain.js 改成 main.ts, 順便把專案檔案中的main.js也改成main.ts, 裡面內容保持不變
entry: {
  app: './src/main.ts'
}
  • 找到resolve.extensions 裡面加上.ts 字尾 (是為了之後引入.ts的時候不寫字尾)
  resolve: {
    extensions: ['.js', '.vue', '.json', '.ts'],
    alias: {
      '@': resolve('src')
    }
  }
  • 找到module.rules 新增webpack對.ts的解析
module: {
  rules: [
    {
      test: /\.(js|vue)$/,
      loader: 'eslint-loader',
      enforce: 'pre',
      include: [resolve('src'), resolve('test')],
      options: {
        formatter: require('eslint-friendly-formatter')
      }
    },
// 從這裡複製下面的程式碼就可以了
    {
      test: /\.ts$/,
      exclude: /node_modules/,
      enforce: 'pre',
      loader: 'tslint-loader'
    },
    {
      test: /\.tsx?$/,
      loader: 'ts-loader',
      exclude: /node_modules/,
      options: {
        appendTsSuffixTo: [/\.vue$/],
      }
    },
// 複製以上的
  }
}

是不是加完了,那現在來解釋一下

ts-loader 會檢索當前目錄下的 tsconfig.json 檔案,根據裡面定義的規則來解析.ts檔案(就跟.babelrc的作用一樣)

tslint-loader 作用等同於 eslint-loader

新增 tsconfig.json

接下來在根路徑下建立tsconfig.json檔案

這裡有一份參考的 tsconfig.json 配置,完成的配置請點選 tsconfig.json

{
  // 編譯選項
  "compilerOptions": {
    // 輸出目錄
    "outDir": "./output",
    // 是否包含可以用於 debug 的 sourceMap
    "sourceMap": true,
    // 以嚴格模式解析
    "strict": true,
    // 採用的模組系統
    "module": "esnext",
    // 如何處理模組
    "moduleResolution": "node",
    // 編譯輸出目標 ES 版本
    "target": "es5",
    // 允許從沒有設定預設匯出的模組中預設匯入
    "allowSyntheticDefaultImports": true,
    // 將每個檔案作為單獨的模組
    "isolatedModules": false,
    // 啟用裝飾器
    "experimentalDecorators": true,
    // 啟用設計型別後設資料(用於反射)
    "emitDecoratorMetadata": true,
    // 在表示式和宣告上有隱含的any型別時報錯
    "noImplicitAny": false,
    // 不是函式的所有返回路徑都有返回值時報錯。
    "noImplicitReturns": true,
    // 從 tslib 匯入外部幫助庫: 比如__extends,__rest等
    "importHelpers": true,
    // 編譯過程中列印檔名
    "listFiles": true,
    // 移除註釋
    "removeComments": true,
    "suppressImplicitAnyIndexErrors": true,
    // 允許編譯javascript檔案
    "allowJs": true,
    // 解析非相對模組名的基準目錄
    "baseUrl": "./",
    // 指定特殊模組的路徑
    "paths": {
      "jquery": [
        "node_modules/jquery/dist/jquery"
      ]
    },
    // 編譯過程中需要引入的庫檔案的列表
    "lib": [
      "dom",
      "es2015",
      "es2015.promise"
    ]
  }
}

順便貼一份自己的配置

{
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ],
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "allowJs": true,
    "module": "esnext",
    "target": "es5",
    "moduleResolution": "node",
    "isolatedModules": true,
    "lib": [
      "dom",
      "es5",
      "es2015.promise"
    ],
    "sourceMap": true,
    "pretty": true
  }
}

新增 tslint.json

在根路徑下建立tslint.json檔案

這裡就很簡單了,就是 引入 tsstandard 規範

{
  "extends": "tslint-config-standard",
  "globals": {
    "require": true
  }
}

讓 ts 識別 .vue

由於 TypeScript 預設並不支援 *.vue 字尾的檔案,所以在 vue 專案中引入的時候需要建立一個 vue-shim.d.ts 檔案,放在專案專案對應使用目錄下,例如 src/vue-shim.d.ts

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}
敲黑板,下面有重點!

意思是告訴 TypeScript *.vue 字尾的檔案可以交給 vue 模組來處理。

而在程式碼中匯入 *.vue 檔案的時候,需要寫上 .vue 字尾。原因還是因為 TypeScript 預設只識別 *.ts 檔案,不識別 *.vue 檔案:

import Component from 'components/component.vue'

改造 .vue 檔案

在這之前先讓我們瞭解一下所需要的外掛(下面的內容需要掌握es7裝飾器, 就是下面使用的@符號)

vue-class-component

vue-class-componentVue 元件進行了一層封裝,讓 Vue 元件語法在結合了 TypeScript 語法之後更加扁平化:

<template>
  <div>
    <input v-model="msg">
    <p>msg: {{ msg }}</p>
    <p>computed msg: {{ computedMsg }}</p>
    <button @click="greet">Greet</button>
  </div>
</template>

<script lang="ts">
  import Vue from 'vue'
  import Component from 'vue-class-component'

  @Component
  export default class App extends Vue {
    // 初始化資料
    msg = 123

    // 宣告週期鉤子
    mounted () {
      this.greet()
    }

    // 計算屬性
    get computedMsg () {
      return 'computed ' + this.msg
    }

    // 方法
    greet () {
      alert('greeting: ' + this.msg)
    }
  }
</script>

上面的程式碼跟下面的程式碼作用是一樣的

export default {
  data () {
    return {
      msg: 123
    }
  }

  // 宣告週期鉤子
  mounted () {
    this.greet()
  }

  // 計算屬性
  computed: {
    computedMsg () {
      return 'computed ' + this.msg
    }
  }

  // 方法
  methods: {
    greet () {
      alert('greeting: ' + this.msg)
    }
  }
}

vue-property-decorator

vue-property-decorator 是在 vue-class-component 上增強了更多的結合 Vue 特性的裝飾器,新增了這 7 個裝飾器:

  • @Emit
  • @Inject
  • @Model
  • @Prop
  • @Provide
  • @Watch
  • @Component (從 vue-class-component 繼承)

在這裡列舉幾個常用的@Prop/@Watch/@Component, 更多資訊,詳見官方文件

import { Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from 'vue-property-decorator'

@Component
export class MyComponent extends Vue {
  
  @Prop()
  propA: number = 1

  @Prop({ default: 'default value' })
  propB: string

  @Prop([String, Boolean])
  propC: string | boolean

  @Prop({ type: null })
  propD: any

  @Watch('child')
  onChildChanged(val: string, oldVal: string) { }
}

上面的程式碼相當於:

export default {
  props: {
    checked: Boolean,
    propA: Number,
    propB: {
      type: String,
      default: 'default value'
    },
    propC: [String, Boolean],
    propD: { type: null }
  }
  methods: {
    onChildChanged(val, oldVal) { }
  },
  watch: {
    'child': {
      handler: 'onChildChanged',
      immediate: false,
      deep: false
    }
  }
}

開始修改App.vue檔案

  1. script 標籤上加上 lang="ts", 意思是讓webpack將這段程式碼識別為typescript 而非javascript
  2. 修改vue元件的構造方式( 跟react元件寫法有點類似, 詳見官方 ), 如下圖
  3. vue-property-decorator語法改造之前程式碼

clipboard.png

當然也可以直接複製下面的程式碼替換就可以了

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'

@Component({})
export default class App extends Vue {
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

</style>

接下來用相同的方式修改HelloWorld.vue即可

npm run dev

這個時候執行專案就應該能正常跑起來了

到這裡我們的配置就已經結束了

最後

如果按照文章沒有配置出來,可以參考此repo vue-typescript-starter (安全按照文章一步一步操作的版本)

總的來說,就如本文最初講,ts 從資料型別、結構入手,通過靜態型別檢測來增強你程式碼的健壯性,從而避免 bug 的產生。

同時可以繼續使用.vue單檔案

而且我個人認為加上了typescript,專案逼格提升2個level,也能讓後端大哥們不吐槽js弱語言的詬病了

相信之後 vue 對於 ts 的整合會更加友善,期待尤大之後的動作

還有後續 vue + typescript 進階篇

參考連結/推薦閱讀

相關文章