Vue.jsの単一ファイルコンポーネントでTypeScriptを使う方法

最初どうやるのか分からなくて、単一ファイルコンポーネントの書き方かTypeScriptどっちか諦めざるを得ないと思ったがそんなことなかった。

前提

• typescript や ts-loaderがインストールされている
• tsconfig.json がある

方法

プロジェクト内に index.d.ts というファイルを作成し、中身を下記のように記述します。ちなみにファイルの設置箇所とファイル名についてですが、拡張子が .d.ts で tsconfig.json内のpathに含まれるようならどこでもどんな名前でもいいみたいです。

index.d.ts

declare module "*.vue" {
  import Vue from "vue";
  const _default: Vue;
  export default _default;
}

これによりTypeScriptが .vue の拡張子のファイルを認識してくれるようになります。

あとは単一ファイルコンポーネント内の <script> のところで lang="ts" をすればバッチリです。

Sample.vue

<template>
  <h1>tsが使える！！</h1>
</template>

<script lang="ts">
//your awesome code
</script>