Vue + TypeScript + poiで小さいプロジェクトを作る時の手順
TypeScriptを使いたい、型に守られたいという気持ちが定期的に生まれるのだけど、 ただwebpack.config.jsとtsconfig.jsonが上手く書けなくてしんどいみたいなことがままある。
お仕事的に、TypeScript + Vueでやっていくぞというのは下記のダーシノさんのスライドが良い。
www.slideshare.net
上記の内容と、webpack-simpleという自分が愛用しているテンプレートと、vue-class-componentのexampleを見ながら書いた雛形が下記に置いてある。
それはそれとして、今日はpoiを調べた。
poi + TypeScript
poiは設定より規約感のあるツールで、書捨てのプロジェクトにはwebpack直で使うよりpoiが楽だったりする。 .vueファイルへの対応も最初から組み込まれている。 デフォルトではbabelが使われる設定なのだけど、TypeScriptやる場合は、もう下記のことを順にやってけば良い。
で、それなりにボイラープレートも必要だったので、自分なりにやった手順を書いておく。
まずはセットアップ。
mkdir my-project cd $_ yarn init yarn add poi typescript poi-preset-typescript --dev
そして、下記のファイルを作る。
index.ts
import Vue from 'vue'
import App from "./App.vue"
new Vue({
el: '#app',
render: h => h(App)
})
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"strict": true,
"module": "es2015",
"moduleResolution": "node",
"experimentalDecorators": true
}
}
App.vue
<template>
<div id="main">
<h1>Hello World!</h1>
<input v-model="text">
<p>input: {{text}}</p>
</div>
</template>
<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
@Component({})
export default class App extends Vue {
text: string = "Hello There";
mounted() {}
}
</script>
poi.config.js
module.exports = {
presets: [
require('poi-preset-typescript')(/* options */)
],
"homepage": "./"
}
sfc.d.ts
declare module "*.vue" {
import Vue from 'vue'
export default Vue
}
その後、package.json内に下記を追記。
"scripts": {
"dev": "poi index.ts",
"build": "poi build index.ts"
}
もし、ビルド後のプロジェクトをGitHub Pagesにデプロイしたい場合は…
yarn add gh-pages
しつつ、package.jsonに以下も追加
"scripts": {
"deploy": "gh-pages -d dist"
}
という感じで、意外とボイラープレート作らなきゃいけなくて、 まだ楽とは言い切れない感じではある。
ただこれさえ済ませてしまえば、Vueファイルの中でもTypeScriptが使えてバイブス上がる感じになる。
という風に、補完もバッチリ効く。ただ、LSP実装もなかなか大変なようで、リネームやリファクタリングには未対応の様子だった。veturのロードマップ
VSCodeのリファクタ機能をフルに使いたい場合は、ロジックはなるべくモデルに切り出して、普通のTSにしてからリファクタするのが良さそう。
これで作ったプロジェクトの雛形が以下。流石に素のwebpackより大分シンプル。
気持ち
自分がコード書くときはとにかく設計も何もなく適当にぐちゃぐちゃ書き進めることが大半で、しかも意識が朦朧としていることが多かったりする。JSは集中してないと書けないので大変難しい。
自分がアホだからこそ役立つのがTypeScriptなんだけど、アホにとってtsconfig.jsonやwebpack.config.jsはパズルじみていて、書くのが難しいという問題がある。もうちょっと楽になったらいいなぁとは思う。
追記 : vue-class-componentを使わないバージョンのブランチを作った
vue-class-componentを使わなくとも、TypeScriptの恩恵を受けられるそうで、 お手軽用途にそっちのバージョンも作った。
data内のプロパティにもちゃんと型がついてる。すごい。
最初はbabelで書いて、TSに段階移行というやり方が取れると思う。
babelからの移行手順で必要なのは
- poi.config.js
- tsconfig.json
- sfc.d.ts
- コンポーネント定義時にVue.extendを使うように変更（これをしないと型推論がされない）
これによる利点は、下記を参考。
