Help us understand the problem. What is going on with this article?

VueでTypeScriptを使う時のテンプレートを作った

More than 3 years have passed since last update.

投稿時点のバージョン

Vue.js: v1.0.16
TypeScript: 1.7.5
vue-cli: v1.3.0
vue-loader: v8.0.0

概要

 Vue.jsは最近(2015年末ごろ?)、Vueを使ったWebアプリのひな形をかんたんに作成できるCLIツール(vue-cli) の提供をはじめました。

 このツールは自作のテンプレートを利用できるようになっていますので、TypeScriptを使ったテンプレートを作ってみました。
https://github.com/AbeHaruhiko/vue-webpack-typescript

 公式のテンプレートは下記の4種類です。一番上のテンプレートをForkして作りました。

Get Started

$ npm install -g vue-cli
$ vue init AbeHaruhiko/vue-webpack-typescript my-project
$ cd my-project
$ npm install
$ tsd install
$ npm run dev

 ※ 公式のテンプレートと違いtsd install が必要なのでお忘れなく!!

背景

 公式のテンプレート(vue-loaderを使う)では、*.vue ファイルで <script lang="ts"> としても、 下記のようなエラーになり、トランスパイルに失敗します。

ERROR in ./~/ts-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
Module build failed: Error: Could not find file: '/path/to/peoject/src/App.vue'.
    at getValidSourceFile (/path/to/peoject/node_modules/typescript/lib/typescript.js:44463:23)
    at Object.getEmitOutput (/path/to/peoject/node_modules/typescript/lib/typescript.js:47595:30)
    at Object.loader (/path/to/peoject/node_modules/ts-loader/index.js:406:34)
 @ ./src/App.vue 3:17-107

 webpack.base.conf.jstranspileOnly とすることでエラーは解消できますが、肝心の静的解析が行われなくなるのでTypeScript最大のメリットが失われます。

webpack.base.conf.js
  ts: {
      transpileOnly: true
  }

[参考] https://github.com/vuejs/vue-loader/issues/109

 そこで、*.vue (vue-loader)の使用はあきらめて、*.tsを ts-loaderで読み込んで使用します。その際 vue-class-component を使用します。同様に*.htmlはhtml-loader、*.cssはstyle-loaderで読み込みます。

注意

 *.vue ファイルを使ったコンポーネントと違い、html, ts, css に分断されてしまいます。ひとつのコンポーネントを1ファイルで扱えるvue-loaderのメリットが失われますが、それぞれlintによる静的解析が利用できるなど、メリットもあります。

 なお htmlこのサンプル のようにdecoratorの引数として、ts ファイルに埋め込むこともできます。

さいごに

 vueの作者さんによるとvue-loaderでtsを扱えるようにするのは容易ではないようです1。vue-loaderが対応するまでは、こんな感じでTypeScriptを利用してみてはどうでしょうか。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away