【Vue】javascriptからtypescriptへのコード書き換え

Question

vue.jsのスクリプトを既存のjavascriptからtypescriptへ書き換えたいのですが、dataが配列になっている場合どう書けばよいかわかりません。
現在のコード

<script>
export default {
  data: () => ({
    cards: [
      { title: 'hamster1', src: 'hoge1.jpg', flex: 12 },
      { title: 'hamster2', src: 'hoge2.jpg', flex: 12 }
    ]
  }),
  methods: {
    getImgUrl (img) {
      return require('@/assets/img/' + img)
    }
  }
}

とりあえずそのまんま書き換えたのですが、

<script lang="ts">
import Vue from 'vue-property-decorator'
export default class testData extends Vue {
  cards: [
      { title: 'hoge1', src: 'hoge1.jpg', flex: 12 },
      { title: 'hoge2', src: 'hoge2.jpg', flex: 12 }    
  ],
  getImgUrl (img: string): string {
    return require('@/assets/img/' + img)
  }
}
</script>

どこを直せばよいかわからない状態です。

Answer 1

動作確認を行っていないのでなんとも言えないですが、
以下のように書き換えたら動作しませんでしょうか？

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

@Component
export default class testData extends Vue {
  cards = [
      { title: 'hoge1', src: 'hoge1.jpg', flex: 12 },
      { title: 'hoge2', src: 'hoge2.jpg', flex: 12 }    
  ]
  getImgUrl (img: string): string {
    return require('@/assets/img/' + img)
  }
}
</script>

掲示されているコードが動かない原因は、TypeScriptに書き換えたことではなく、vue-class-component の記法で書き換えたことにあります。vue-class-componentはその名の通り、Vueの単一ファイルコンポーネントをオブジェクトリテラルの形式ではなく、class形式で書き下すことができるライブラリです。
それは、ファイルの冒頭に、

export default class testData extends Vue {}

と記述されていることからもわかります。このような記述スタイルをクラススタイルと言ったりします。

ちなみに、通常のVueの単一ファイルコンポーネントは以下のように記述すると思います。

export default {}

これは、ただ単純にObjectをexportしているだけなので、オブジェクトスタイルといったりします。

ここまで説明すればわかるかもしれませんが、クラススタイルで書くのであれば、クラスの中はJavascriptのクラス内で許された記法しか使うことができません。同様にオブジェクトスタイルで書くのであれば、JavaScriptのオブジェクトリテラルの形式でなければ書くことができません。

詳細な記法についてはクラスやオブジェクトリテラルでググってもらえれば、それぞれの記法の違いがわかるかと思います。（ちなみにこれはJSの言語仕様の話で、Vue固有の記法ではありません）

（もしくはもっと手っ取り早く知りたいのであれば、vue-class-componenのREADMEを読むのが良いかもしれません）

VueでTypeScriptを使う場合は、型補完を行う時にクラススタイルで記述するほうが表現力が高くなるのでこの記法を使うことが多いようです。決して、TypeScriptを使うようにしたからクラススタイルになったわけではありません。公式ドキュメントのTypeScriptの紹介ページでさらっとvue-class-componentを使う書き方が紹介されているので誤解されがちですが、オブジェクトスタイルのままTypeScriptを使う書き方もあります。参考

Comments

[yochun02]

丁寧に教えてくださりありがとうございます！！
試したところ、
"export 'default' (imported as 'Vue') was not found in 'vue-property-decorator'
Unable to resolve signature of class decorator when called as an expression.
Type '<VC extends VueClass<Vue>>(target: VC) => VC' is not assignable to type 'typeof testData'.
Type '<VC extends VueClass<Vue>>(target: VC) => VC' provides no match for the signature 'new (): testData'.

import Component from 'vue-class-component'

@Component
^
export default class testData extends Vue {
cards = [
...

このようなエラーがでました

[KuwabataK]

後でちょっと調べてみますが、
ソース全文がないとなんとも言えないかもしれないので、とりあえず以下のソースとかを参考に書き換えてみてください。

https://github.com/vuejs/vue-class-component/blob/master/example/src/App.vue

[yochun02]

'vue-property-decorator' -> 'vue'
としたら行けました！ありがとうございます！

[KuwabataK]

あっ、そうなのですね。良かったです！

こちらも確認不足のソースを貼ってしまって申し訳ないです。