https://segmentfault.com/a/1190000011744210
vue + typescript 新項目起手式
最后更新於2018-06-30，技術文具有時效性，請知悉
我知道你們早就想用上 vue + ts 強類型了
- 安裝
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... 的回答。概括來說主要包括以下幾點：
- 靜態類型檢查
- 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 的集成會更加友善，期待尤大之后的動作