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

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

前提

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

方法

プロジェクト内に index.d.ts というファイルを作成し、中身を下記のように記述します。ちなみにファイルの設置箇所とファイル名についてですが、拡張子が .d.tstsconfig.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>
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.