初始化工程

vue init webpack simple

工程結構如下：

• simple/
  • build/
    • webpack.base.conf.js
  • src/
    • components/
      • Hello.vue
      • Count.vue
    • App.vue
    • main.js

TypeScript 安裝與配置

npm i -g typescript

在工程根目錄simple/下，執行tsc --init生成tsconfig.json，更改配置如下：

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
    "module": "ESNext",                     /* Specify module code generation: 'none', commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "lib": [
      "dom",
      "es5",
      "es2015.promise",
      "es2017",
      "esnext"
      ],                              /* Specify library files to be included in the compilation:  */
    "allowJs": true,                       /* Allow javascript files to be compiled. */

    /* Strict Type-Checking Options */
    "strict": true,                            /* Enable all strict type-checking options. */

    /* Module Resolution Options */
    "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */

    /* Experimental Options */
    "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
    "emitDecoratorMetadata": true         /* Enables experimental support for emitting type metadata for decorators. */
  }
}

Webpack 配置調整

npm i --save-dev typescript ts-loader

打開simple/build/webpack.base.conf.js，修改配置如下：

module.exports = {
  entry: {
    app: './src/main.ts'  // 將 main.js 重名為 main.ts 后，這里也要改
  },
...
  resolve: {
    extensions: ['.js', '.vue', '.json', '.ts'],  // 添加 .ts
    ...
  },
  module: {
    rules: [
      // 添加 ts-loader
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
        options: {
          appendTsSuffixTo: [/\.vue$/],
        }
      },
      ...
    ]
  }
}

babel 配置

npm i --save-dev babel-plugin-transform-decorators-legacy babel-plugin-transform-class-properties

打開simple/.babelrc，添加配置：

"plugins": [
    "transform-decorators-legacy",
    "transform-class-properties",
    ...
  ]

單文件組件(Single File Components)

聲明.vue文件為單文件組件，從中提取代碼。
創建simple/src/sfc.d.ts，并寫入如下內容：

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

組件配置

npm i --save-dev vue-class-component
npm i --save-dev vue-property-decorator

• vue-property-decorator 完全依賴于 vue-class-component，可以只使用任意一種。

main.js

• 重命名 main.js 為 main.ts

App.vue

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export default class App extends Vue {
  name: 'app'
}
</script>

Hello.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>{{ count }}</h2>
    <comm-count :msg="msg"></comm-count>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'

@Component({
  name: 'Hello',
  components: {
    CommCount: () => import('./Count.vue')
  }
})
export default class Hello extends Vue {
  // initial data
  msg: string = 'Welcome to Your Vue.js App'

  // computed
  get count () {
    return new Date().getSeconds()
  }

  // lifecycle hook
  mounted () {
    this.msg = 'Jack Ma'
    setInterval(this.greet, 1000)
  }

  // method
  greet () {
    this.msg = 'Jack Ma' + new Date().getSeconds()
  }
}
</script>

Count.vue

<template>
  <div>Count {{ msg }} {{ count }}</div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Component, Prop } from 'vue-property-decorator'

@Component({
  name: 'Count'
})
export default class Count extends Vue {
  @Prop()
  msg: string
  
  count = 'sss, ' + this.msg
}
</script>

參考

Microsoft TypeScript Vue Starter
Vue.js TypeScript 支持
Writing Class-Based Components with Vue.js and TypeScript
vue-class-component
vue-property-decorator