vue-cli+webpack-simple +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 等。這樣會大大提升代碼的可閱讀性。

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

1.靜態類型檢查（靜態類型檢查可以避免很多不必要的錯誤, 不用在調試的時候才發現問題）

2.IDE智能提示

3.代碼重構

4.可讀性

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

首先找到.webpack.config.js或./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的解析

  {
        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 配置，完成的配置請點擊 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)
    }
  }
}

開始修改App.vue文件

1. 在script 標簽上加上 lang="ts", 意思是讓webpack將這段代碼識別為typescript 而非javascript
2. 修改vue組件的構造方式( 跟react組件寫法有點類似, 詳見官方 )， 如下圖
3. 用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>

最后npm run dev

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

參考鏈接/推薦閱讀

• TypeScript
• vue typescript 支持
• 從 JavaScript 到 TypeScript 6 - Vue 引入 TypeScript
• Vue with TypeScript
• ES7 Decorator 裝飾者模式