No Regrets in Bathing

カレーを週に一度食っていく

Vue + TypeScript + poiで小さいプロジェクトを作る時の手順

TypeScriptを使いたい、型に守られたいという気持ちが定期的に生まれるのだけど、 ただwebpack.config.jsとtsconfig.jsonが上手く書けなくてしんどいみたいなことがままある。

お仕事的に、TypeScript + Vueでやっていくぞというのは下記のダーシノさんのスライドが良い。

www.slideshare.net

上記の内容と、webpack-simpleという自分が愛用しているテンプレートと、vue-class-componentのexampleを見ながら書いた雛形が下記に置いてある。

github.com

それはそれとして、今日はpoiを調べた。

poi + TypeScript

poiは設定より規約感のあるツールで、書捨てのプロジェクトにはwebpack直で使うよりpoiが楽だったりする。 .vueファイルへの対応も最初から組み込まれている。 デフォルトではbabelが使われる設定なのだけど、TypeScriptやる場合は、もう下記のことを順にやってけば良い。

github.com

で、それなりにボイラープレートも必要だったので、自分なりにやった手順を書いておく。

まずはセットアップ。

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が使えてバイブス上がる感じになる。

f:id:hashrock:20171111031211p:plain

という風に、補完もバッチリ効く。ただ、LSP実装もなかなか大変なようで、リネームやリファクタリングには未対応の様子だった。veturのロードマップ

VSCodeのリファクタ機能をフルに使いたい場合は、ロジックはなるべくモデルに切り出して、普通のTSにしてからリファクタするのが良さそう。

これで作ったプロジェクトの雛形が以下。流石に素のwebpackより大分シンプル。

github.com

気持ち

自分がコード書くときはとにかく設計も何もなく適当にぐちゃぐちゃ書き進めることが大半で、しかも意識が朦朧としていることが多かったりする。JSは集中してないと書けないので大変難しい。

自分がアホだからこそ役立つのがTypeScriptなんだけど、アホにとってtsconfig.jsonやwebpack.config.jsはパズルじみていて、書くのが難しいという問題がある。もうちょっと楽になったらいいなぁとは思う。

追記 : vue-class-componentを使わないバージョンのブランチを作った

vue-class-componentを使わなくとも、TypeScriptの恩恵を受けられるそうで、 お手軽用途にそっちのバージョンも作った。

github.com

data内のプロパティにもちゃんと型がついてる。すごい。

f:id:hashrock:20171111142359p:plain

最初はbabelで書いて、TSに段階移行というやり方が取れると思う。

babelからの移行手順で必要なのは

これによる利点は、下記を参考。

やって来る Vue 2.5 での TypeScript の変更 — Vue.js