Vue.jsにTypescriptを導入してメンテナビリティが向上した

はじめまして、2017年新卒として入社し、現在社内ツールを開発する部署に所属している成田と申します。
最近Vue.js & Typescriptで開発をしているので、どんな感じで開発しているのか紹介します!

Vue.js公式サイトで紹介されているTodo管理のexampleをVue.js & Typescriptに書き換えてみました。
ソースはgithubに載せました。

github.com

※ 完全再現はしてません。

依存関係

Webpackを使用することを前提で話を進めます。
Vue.jsをTypescriptで書くには依存するmoduleがいくつかあります。
まずはこれらを開発環境に導入してください。

ts-loader
　typescriptファイル(.tsファイル)をトランスパイルするのに必要
tslib
　トランスパイル時に必要になるtypescriptのヘルパー関数を含むライブラリ
vue-template-compiler
　単一ファイルコンポーネント(.vueファイル)を処理してくれる
vue-property-decorator
　必須ではないですがかなり使い勝手がいいのでオススメです！
　propに使用するdataや、watchするdataなどをJavaのアノテーションのように記述できるようになります。

Typescriptコンパイルオプション

Decoratorの使用にexperimentalDecoratorsというのが必要です。

{
  "compilerOptions": {
    ~~~

    "emitDecoratorMetadata": true,

    ~~~
}

Typescriptと一緒に使用して感じたメリット

jsあるあるの、実行時のくだらないバグによる時間浪費が回避できます。
デバックの時間も節約できますし、そんなくだらないバグをプロダクションに持ち込むリスクも軽減できます。心にも優しいですね。

また、TypescriptコンパイラのオプションnoUnusedLocalsを適用することで未使用変数、未使用引数、未使用import がコード中に存在するときコンパイルエラーを吐いくるので無駄な記述を減らす助けになります。
コードが綺麗になりますし、レビューの手間なども少し省けます。型あり言語ならではですね。

やはり型があることで少し不自由さはありますが、安心してプログラムを書けるというのはかなり楽ですね。面倒なデバックもしなくていいですし。
何よりメンタル面に優しいと思います。