VueをTypescriptで実装しようとしたら、方法がさまざまあって手こずる。Vue2を使用していますがVue3に向けてどれで慣れておいたらいいのかも迷う。

上のような表示をするだけのヤツを実装方法を変えて3つ。

1. vue-class-component
2. vue-property-decorator
3. Vue.extend

どれもWebpackを使ってバンドルしています。あとデバッグ用なので特に必要はないですがwindow.appというグローバル変数を作成(global.d.ts)して、ViewModelをグローバルへ露出させています。

一つ目は「vue-class-component」

以下はソースの一部です、デコレータ部分がおっきくなりますね。あとpropへの参照が「$prop」とかエディタのサジェスト機能で初めて知りました。

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

@Component({
    template:'<li v-on:click="onClick">{{name}}</li>',
    props:{
        name:String
    }
})
class MyData extends Vue{
    onClick = ():void =>{
        console.log(this.$props.name);
    }
}

二つ目、「vue-property-decorator」を加えて

propをクラス内に書けるようになってスッキリ、VueとTypescriptの型宣言が二重になってて冗長ですけど。

import {Component, Prop, Vue} from "vue-property-decorator";

@Component({
    template:'<li v-on:click="onClick">{{name}}</li>',
})
class MyData extends Vue{
    @Prop({type:String})
    name:string
    onClick = ():void =>{
        console.log(this.name);
    }
}

三つ目、「Vue.extend」で、

最後にVue.extendを使用して、さらにSFC(シングルファイルコンポーネント)です。@vue/cliで簡単にSFCのバンドル環境を整えられますが、理解の妨げになるので使わずwebpack.donfig.jsはTypeScript Vue Starter[github.com]を参考にしています。

Elecrtonへ乗せる事も視野に、コンテンツセキュリティポリシー (CSP)は「unsafe-eval」を外しても動くようにVueはテンプレートコンパイラを含まないvue.runtime.esm.jsをバンドル。Developmentモードでのビルドはeval関数が含まれてしまいますのでProductionモードでビルドするようwebpack.config.jsで指定しています。

<template>
  <li v-on:click="onClick">{{name}}</li>
</template>

<script lang="ts">
import Vue from "vue";
export default Vue.extend({
  props:{
    name:{type:String}
  },
  methods:{
    onClick():void {
      console.log(this.name);
    }
  }
})
</script>

<style scoped>

</style>

vue-class-componentと比べてVueの記述寄りになって見やすくなったかな。propの型指定でそのうちつまずきそうな予感ですけど。