TypeScript のサポート

公式宣言ファイル

静的型システムは、特にアプリケーションが成長するに伴い、多くの潜在的なランタイムエラーを防止するのに役立ちます。そのため、Vue は TypeScript 向けに公式型宣言を提供しており、Vue コアだけでなく Vue RouterVuex も同様に提供しています。

これらは、NPM で公開されており、Vue によって宣言が自動的にインポートされるので、Typings のような外部ツールは必要ありません。つまり、以下のように単純です:

import Vue = require('vue')

これにより、すべてのメソッド、プロパティ、およびパラメータが型チェックされます。例えば、template コンポーネントのオプションを tempate (l が欠けている)と間違えた場合、TypeScript コンパイラはコンパイル時にエラーメッセージを出力します。Visual Studio Code のような、TypeScript を使用できるエディタを使用している場合、コンパイルする前にこれらのエラーをキャッチすることができます:

Visual Studio Code での TypeScript による型エラー

コンパイルオプション

Vue の宣言ファイルには --lib DOM,ES5,ES2015.Promise によるコンパイラオプションが必要です。このオプションを tsc コマンドに渡すか、それと同等のものを tsconfig.json ファイルに追加することができます。

Vue の型宣言へのアクセス

Vue の型で独自のコードにアノテート (annotate) したい場合は、Vue のエクスポートされたオブジェクトでそのコードにアクセスできます。例えば、以下は (.vue ファイルにおいて) エクスポートされたコンポーネントオプションオブジェクトにアノテートします:

import Vue = require('vue')
export default {
props: ['message'],
template: '<span>{{ message }}</span>'
} as Vue.ComponentOptions<Vue>

クラススタイルの Vue コンポーネント

Vue のコンポーネントオプションは容易に型でアノテートできます:

import Vue = require('vue')
// コンポーネントの型を宣言
interface MyComponent extends Vue {
message: string
onClick (): void
}
export default {
template: '<button @click="onClick">Click!</button>',
data: function () {
return {
message: 'Hello!'
}
},
methods: {
onClick: function () {
// TypeScriptは `this` が MyComponent 型で、
// `this.message` が文字列であることを知っています
window.alert(this.message)
}
}
// エクスポートされたオプションオブジェクトに
// MyComponent 型を明示的にアノテートする必要があります
} as Vue.ComponentOptions<MyComponent>

残念ながら、ここではいくつかの制限があります:

幸いにも、vue-class-componentは、これらの問題を両方解決できます。これは公式ライブラリで、@Component デコレータでコンポーネントをネイティブな JavaScript クラスとして宣言することができます。例として、上記のコンポーネントを書き直してみましょう:

import Vue = require('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)
}
}

この構文では、コンポーネントの定義が短くなるだけでなく、明示的なインタフェース宣言がなくても messageonClick の型を推論することができます。この戦略では、算出プロパティ、ライフサイクルフック、描画関数の型を扱うこともできます。詳細な使用方法については、vue-class-component のドキュメントを参照してください。