vue與TypeScript集成配置最簡教程

vue與TypeScript集成配置最簡教程

[TOC]

前言

Vue的官方文檔沒有給出與TypeScript集成的具體步驟，網上其餘的教程不是存在問題就是與vue-cli創建的項目存在差別，讓人無從下手。

下面我就給出vue-cli創建的項目與TypeScript集成的最簡配置。

初始化項目

首先用vue-cli創建webpack項目。這裏爲了演示方便，沒有打開router和eslint等，能夠根據自身狀況打開。

# vue init webpack vue-typescript

? Project name vue-typescript
? Project description A Vue.js project
? Author
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No

安裝TypeScript相關依賴和項目其他依賴，用npm或cnpm

# cd /vue-typescript
# npm install typescript ts-loader --save-dev
# npm install

配置

修改目錄下bulid/webpack.base.conf.js文件，在文件內module>rules添加如下規則

{
  test: /\.tsx?$/,
  loader: 'ts-loader',
  exclude: /node_modules/,
  options: {
    appendTsSuffixTo: [/\.vue$/],
  }
},

在src目錄下新建一個文件vue-shims.d.ts，用於識別單文件vue內的ts代碼

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

在項目根目錄下創建TypeScript配置文件tsconfig.json

{
  "compilerOptions": {
    "strict": true,
    "module": "es2015",
    "moduleResolution": "node",
    "target": "es5",
    "allowSyntheticDefaultImports": true,
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

重命名src下的main.js爲main.ts

修改webpack.base.conf.js下的entry>app爲'./src/main.ts'

修改src下的App.vue文件，在<script>節點中添加lang=ts屬性

<script lang="ts">

測試

下面能夠測試是否集成成功，編輯src/components/Hello.vue文件，修改<script>標籤的內容爲TypeScript的形式

<script lang="ts">
  import Vue, {ComponentOptions} from 'vue'
  export default {
    name: 'hello',
    data() {
      return {
        msg: 'this is a typescript project now'
      }
    }
  } as ComponentOptions<Vue>
</script>

運行項目

# npm run dev

測試成功，如今是一個TypeScipt項目了

進階

配置官方推薦的vue-class-component，https://cn.vuejs.org/v2/guide/typescript.html

安裝開發依賴

# npm install --save-dev vue-class-component

修改ts配置文件，增長如下兩項配置

"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,

改寫咱們的Hello組件

<script lang="ts">
  import Vue from 'vue'
  import Component from 'vue-class-component'
  @Component
  export default class Hello extends Vue {
    msg: string = 'this is a typescript project now'    
  }
</script>

使用vue-class-component後，初始數據能夠直接聲明爲實例的屬性，而不需放入data() {return{}}中，組件方法也能夠直接聲明爲實例的方法，如官方實例，更多使用方法能夠參考其官方文檔

https://github.com/vuejs/vue-class-component#vue-class-component

import Vue from 'vue'
import Component from 'vue-class-component'
// @Component 修飾符註明了此類爲一個 Vue 組件
@Component({
  // 全部的組件選項均可以放在這裏
  template: '<button @click="onClick">Click!</button>'
})
export default class MyComponent extends Vue {
  // 初始數據能夠直接聲明爲實例的屬性
  message: string = 'Hello!'
  // 組件方法也能夠直接聲明爲實例的方法
  onClick (): void {
    window.alert(this.message)
  }
}