Posted at

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

More than 1 year has passed since last update.

最初どうやるのか分からなくて、単一ファイルコンポーネントの書き方か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>