Vue.js+TypeScript

イニシャルエンジニアリング

vue init webpack simple

工事構造は以下の通りである.

simple/

build/

webpack.base.conf.js

src/

components/

Hello.vue

Count.vue

App.vue

main.js

Typeスクリプトのインストールと構成

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に完全に依存し、いずれか1つのみ使用することができる.

main.js

名前変更main.js main.ts

App.vue

import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export default class App extends Vue {
  name: 'app'
}

Hello.vue

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()
  }
}

Count.vue

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
}

リファレンス

Microsoft TypeScript Vue Starter Vue.js Type ScriptはWriting Class-Based Components with Vueをサポートする.js and TypeScript vue-class-component vue-property-decorator