摘要：新項(xiàng)目起手式最后更新于，技術(shù)文具有時(shí)效性，請(qǐng)知悉我知道你們?cè)缇拖胗蒙蠌?qiáng)類型了還有后續(xù)進(jìn)階篇安裝安裝依賴配置添加添加讓識(shí)別改造文件什么是是的強(qiáng)類型版本。是的超集，這意味著他支持所有的語(yǔ)法。與此同時(shí)，也是的超集，的也宣布采用進(jìn)行開(kāi)發(fā)。

最后更新于2018-06-30，技術(shù)文具有時(shí)效性，請(qǐng)知悉

我知道你們?cè)缇拖胗蒙?vue + ts 強(qiáng)類型了

還有后續(xù) vue + typescript 進(jìn)階篇

安裝vue-cli

安裝ts依賴

配置 webpack

添加 tsconfig.json

添加 tslint.json

讓 ts 識(shí)別 .vue

改造 .vue文件

TypeScript 是 JavaScript 的強(qiáng)類型版本。然后在編譯期去掉類型和特有語(yǔ)法，生成純粹的 JavaScript 代碼。由于最終在瀏覽器中運(yùn)行的仍然是 JavaScript，所以 TypeScript 并不依賴于瀏覽器的支持，也并不會(huì)帶來(lái)兼容性問(wèn)題。

TypeScript 是 JavaScript 的超集，這意味著他支持所有的 JavaScript 語(yǔ)法。并在此之上對(duì) JavaScript 添加了一些擴(kuò)展，如 class / interface / module 等。這樣會(huì)大大提升代碼的可閱讀性。

與此同時(shí)，TypeScript 也是 JavaScript ES6 的超集，Google 的 Angular 2.0 也宣布采用 TypeScript 進(jìn)行開(kāi)發(fā)。這更是充分說(shuō)明了這是一門(mén)面向未來(lái)并且腳踏實(shí)地的語(yǔ)言。

強(qiáng)類型語(yǔ)言的優(yōu)勢(shì)在于靜態(tài)類型檢查，具體可以參見(jiàn) http://www.zhihu.com/question... 的回答。概括來(lái)說(shuō)主要包括以下幾點(diǎn)：

靜態(tài)類型檢查

IDE 智能提示

代碼重構(gòu)

可讀性

靜態(tài)類型檢查可以避免很多不必要的錯(cuò)誤, 不用在調(diào)試的時(shí)候才發(fā)現(xiàn)問(wèn)題

隨著vue2.5 更好的 TypeScript 集成，同時(shí)因?yàn)樾麻_(kāi)項(xiàng)目的契機(jī)，故準(zhǔn)備動(dòng)手嘗試一下typescript + vue

都說(shuō)ts萬(wàn)般好，不如一個(gè)段子來(lái)的直觀，一個(gè)程序員自從用上了ts之后，連續(xù)寫(xiě)了3000+行代碼一次編譯通過(guò)一氣呵成，然后很激動(dòng)的打電話跟老婆炫耀這件事情，老婆回了一句 哦

之前看文章或者 demo 一直認(rèn)為 vue + typescript 之后就不能友好的寫(xiě).vue單文件，并且我也在各種 live 中問(wèn)vue + ts 或者 flow的集成，也一直沒(méi)有問(wèn)出什么好的實(shí)踐，但是本上強(qiáng)上ts的念頭，一個(gè)字，就是干！

終于決定自己動(dòng)手，那接下來(lái)從 vue-cli 開(kāi)始配置 ts，看看事實(shí)上集成 ts 的體驗(yàn)到底是如何呢？

先貼一張最后配置完畢的.vue文件 ，template 和 style 跟以前的寫(xiě)法保持一致，只有 script 的變化

這步應(yīng)該不用寫(xiě)了

首先Cli之后，接下來(lái)需要安裝一些必要/以后需要的插件

安裝vue的官方插件
npm i vue-class-component vue-property-decorator --save

// ts-loader typescript 必須安裝，其他的相信你以后也會(huì)裝上的
npm i ts-loader typescript tslint tslint-loader tslint-config-standard --save-dev

這些庫(kù)大體的作用，可以按需引入：

vue-class-component：強(qiáng)化 Vue 組件，使用 TypeScript/裝飾器 增強(qiáng) Vue 組件

vue-property-decorator：在 vue-class-component 上增強(qiáng)更多的結(jié)合 Vue 特性的裝飾器

ts-loader：TypeScript 為 Webpack 提供了 ts-loader，其實(shí)就是為了讓webpack識(shí)別 .ts .tsx文件

tslint-loader跟tslint：我想你也會(huì)在.ts .tsx文件 約束代碼格式（作用等同于eslint）

tslint-config-standard：tslint 配置 standard風(fēng)格的約束

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

找到entry.app 將main.js 改成 main.ts, 順便把項(xiàng)目文件中的main.js也改成main.ts, 里面內(nèi)容保持不變

entry: {
  app: "./src/main.ts"
}

找到resolve.extensions 里面加上.ts 后綴 （是為了之后引入.ts的時(shí)候不寫(xiě)后綴）

  resolve: {
    extensions: [".js", ".vue", ".json", ".ts"],
    alias: {
      "@": resolve("src")
    }
  }

找到module.rules 添加webpack對(duì).ts的解析

module: {
  rules: [
    {
      test: /.(js|vue)$/,
      loader: "eslint-loader",
      enforce: "pre",
      include: [resolve("src"), resolve("test")],
      options: {
        formatter: require("eslint-friendly-formatter")
      }
    },
// 從這里復(fù)制下面的代碼就可以了
    {
      test: /.ts$/,
      exclude: /node_modules/,
      enforce: "pre",
      loader: "tslint-loader"
    },
    {
      test: /.tsx?$/,
      loader: "ts-loader",
      exclude: /node_modules/,
      options: {
        appendTsSuffixTo: [/.vue$/],
      }
    },
// 復(fù)制以上的
  }
}

是不是加完了，那現(xiàn)在來(lái)解釋一下

ts-loader 會(huì)檢索當(dāng)前目錄下的 tsconfig.json 文件，根據(jù)里面定義的規(guī)則來(lái)解析.ts文件（就跟.babelrc的作用一樣）

tslint-loader 作用等同于 eslint-loader

接下來(lái)在根路徑下創(chuàng)建tsconfig.json文件

這里有一份參考的 tsconfig.json 配置，完成的配置請(qǐng)點(diǎn)擊 tsconfig.json：

{
  // 編譯選項(xiàng)
  "compilerOptions": {
    // 輸出目錄
    "outDir": "./output",
    // 是否包含可以用于 debug 的 sourceMap
    "sourceMap": true,
    // 以嚴(yán)格模式解析
    "strict": true,
    // 采用的模塊系統(tǒng)
    "module": "esnext",
    // 如何處理模塊
    "moduleResolution": "node",
    // 編譯輸出目標(biāo) ES 版本
    "target": "es5",
    // 允許從沒(méi)有設(shè)置默認(rèn)導(dǎo)出的模塊中默認(rèn)導(dǎo)入
    "allowSyntheticDefaultImports": true,
    // 將每個(gè)文件作為多帶帶的模塊
    "isolatedModules": false,
    // 啟用裝飾器
    "experimentalDecorators": true,
    // 啟用設(shè)計(jì)類型元數(shù)據(jù)（用于反射）
    "emitDecoratorMetadata": true,
    // 在表達(dá)式和聲明上有隱含的any類型時(shí)報(bào)錯(cuò)
    "noImplicitAny": false,
    // 不是函數(shù)的所有返回路徑都有返回值時(shí)報(bào)錯(cuò)。
    "noImplicitReturns": true,
    // 從 tslib 導(dǎo)入外部幫助庫(kù): 比如__extends，__rest等
    "importHelpers": true,
    // 編譯過(guò)程中打印文件名
    "listFiles": true,
    // 移除注釋
    "removeComments": true,
    "suppressImplicitAnyIndexErrors": true,
    // 允許編譯javascript文件
    "allowJs": true,
    // 解析非相對(duì)模塊名的基準(zhǔn)目錄
    "baseUrl": "./",
    // 指定特殊模塊的路徑
    "paths": {
      "jquery": [
        "node_modules/jquery/dist/jquery"
      ]
    },
    // 編譯過(guò)程中需要引入的庫(kù)文件的列表
    "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
  }
}

在根路徑下創(chuàng)建tslint.json文件

這里就很簡(jiǎn)單了，就是 引入 ts 的 standard 規(guī)范

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

由于 TypeScript 默認(rèn)并不支持 *.vue 后綴的文件，所以在 vue 項(xiàng)目中引入的時(shí)候需要?jiǎng)?chuàng)建一個(gè) vue-shim.d.ts 文件，放在項(xiàng)目項(xiàng)目對(duì)應(yīng)使用目錄下，例如 src/vue-shim.d.ts

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}

敲黑板，下面有重點(diǎn)！

意思是告訴 TypeScript *.vue 后綴的文件可以交給 vue 模塊來(lái)處理。

而在代碼中導(dǎo)入 *.vue 文件的時(shí)候，需要寫(xiě)上 .vue 后綴。原因還是因?yàn)?TypeScript 默認(rèn)只識(shí)別 *.ts 文件，不識(shí)別 *.vue 文件：

import Component from "components/component.vue"

在這之前先讓我們了解一下所需要的插件（下面的內(nèi)容需要掌握es7的裝飾器, 就是下面使用的@符號(hào)）

vue-class-component 對(duì) Vue 組件進(jìn)行了一層封裝，讓 Vue 組件語(yǔ)法在結(jié)合了 TypeScript 語(yǔ)法之后更加扁平化：

上面的代碼跟下面的代碼作用是一樣的

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

  // 聲明周期鉤子
  mounted () {
    this.greet()
  }

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

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

vue-property-decorator 是在 vue-class-component 上增強(qiáng)了更多的結(jié)合 Vue 特性的裝飾器，新增了這 7 個(gè)裝飾器：

@Emit

@Inject

@Model

@Prop

@Provide

@Watch

@Component (從 vue-class-component 繼承)

在這里列舉幾個(gè)常用的@Prop/@Watch/@Component, 更多信息，詳見(jiàn)官方文檔

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) { }
}

上面的代碼相當(dāng)于：

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
    }
  }
}

在script 標(biāo)簽上加上 lang="ts", 意思是讓webpack將這段代碼識(shí)別為typescript 而非javascript

修改vue組件的構(gòu)造方式( 跟react組件寫(xiě)法有點(diǎn)類似, 詳見(jiàn)官方 )， 如下圖

用vue-property-decorator語(yǔ)法改造之前代碼

當(dāng)然也可以直接復(fù)制下面的代碼替換就可以了

接下來(lái)用相同的方式修改HelloWorld.vue即可

這個(gè)時(shí)候運(yùn)行項(xiàng)目就應(yīng)該能正常跑起來(lái)了

到這里我們的配置就已經(jīng)結(jié)束了

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

總的來(lái)說(shuō)，就如本文最初講，ts 從數(shù)據(jù)類型、結(jié)構(gòu)入手，通過(guò)靜態(tài)類型檢測(cè)來(lái)增強(qiáng)你代碼的健壯性，從而避免 bug 的產(chǎn)生。

同時(shí)可以繼續(xù)使用.vue單文件

而且我個(gè)人認(rèn)為加上了typescript，項(xiàng)目逼格提升2個(gè)level，也能讓后端大哥們不吐槽js弱語(yǔ)言的詬病了

相信之后 vue 對(duì)于 ts 的集成會(huì)更加友善，期待尤大之后的動(dòng)作

還有后續(xù) vue + typescript 進(jìn)階篇

TypeScript

vue typescript 支持

從 JavaScript 到 TypeScript 6 - Vue 引入 TypeScript

Vue with TypeScript

ES7 Decorator 裝飾者模式