我知道你們早就想用上 vue + ts 強型別了
還有後續 vue + typescript 進階篇
- 安裝
vue-cli - 安裝
ts依賴 - 配置
webpack - 新增
tsconfig.json - 新增
tslint.json - 讓
ts識別.vue - 改造
.vue檔案
什麼是typescript
TypeScript 是 JavaScript 的強型別版本。然後在編譯期去掉型別和特有語法，生成純粹的 JavaScript 程式碼。由於最終在瀏覽器中執行的仍然是 JavaScript，所以 TypeScript 並不依賴於瀏覽器的支援，也並不會帶來相容性問題。
TypeScript 是 JavaScript 的超集，這意味著他支援所有的 JavaScript 語法。並在此之上對 JavaScript 新增了一些擴充套件，如 class / interface / module 等。這樣會大大提升程式碼的可閱讀性。
與此同時，TypeScript 也是 JavaScript ES6 的超集，Google 的 Angular 2.0 也宣佈採用 TypeScript 進行開發。這更是充分說明了這是一門面向未來並且腳踏實地的語言。
強型別語言的優勢在於靜態型別檢查，具體可以參見 http://www.zhihu.com/question/28016252/answer/39056940 的回答。概括來說主要包括以下幾點：
- 靜態型別檢查
- IDE 智慧提示
- 程式碼重構
- 可讀性
靜態型別檢查可以避免很多不必要的錯誤, 不用在除錯的時候才發現問題
前言
隨著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-loader跟tslint：我想你也會在
.ts.tsx檔案 約束程式碼格式（作用等同於eslint） -
tslint-config-standard：
tslint配置standard風格的約束
配置 webpack
首先找到./build/webpack.base.conf.js
- 找到
entry.app將main.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檔案
這裡就很簡單了，就是 引入 ts 的 standard 規範
{
"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-component 對 Vue 元件進行了一層封裝，讓 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檔案
-
在
script標籤上加上lang="ts", 意思是讓webpack將這段程式碼識別為typescript而非javascript -
修改vue元件的構造方式( 跟
react元件寫法有點類似, 詳見官方 )， 如下圖 -
用
vue-property-decorator語法改造之前程式碼
當然也可以直接複製下面的程式碼替換就可以了
<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 的整合會更加友善，期待尤大之後的動作