はじめに
JavaScriptを仕事で使い初めて18年のおじさん、
2年前にJSフレームワークの社内選定に関わるも、ここ数年はバッチチームでSQL(HiveQL)ばかり書いたりレビューしたりして悶々としていた。
そんな折、営業側で使う社内ツールをWEBで作って欲しいと依頼され作ることに。
（折角だからTypeScriptを使おうと心に決めて）
学習編
すでに社内では一部使われ始めているけど、きっと初歩を知りたい人も多いだろうと勉強会を始めていました。（僕の勉強にみんなを付き合わせようという思惑で）
TypeScript Deep Dive日本語版
学習方法は上記サイトを先生っぽい立ち位置で僕が読み上げるという方式。
ほぼ初見で私が読み上げるアクロバティックな方法なので、ときに生徒（同僚）たち総動員で「なんでこうなるんだ？」を解決しながら進めていきました。
JSの中級くらいからはじまり、TSの深いところもカバーしていると思うので、かなりおすすめです。
実装編
学習はTypeScript Deep Dive日本語版を使って、それなりにやってきた上でだったので、正直TypeScriptとしてはこまることは少なく「スケジュール以外で困ったこと」は頭を捻らないとでてこないくらいです。
そんな数少ない困ったことと良かったことを、少しピックアップして書いてみます。
###こまったこと（その１）：webpackからparcelに一瞬浮気してみた
私が携わったアプリは、「営業向けの小さなアプリでメンテナーが限られるから少し冒険しよう」がコンセプトにも含まれてました。
今回、サーバーサイドは別のメンバーに 丸投げ お任せ している上
割と冒険に溢れた感じになってました。（いつか担当者がなにか書いてくれるかもしれない）
「こちら（フロントエンド）もなんか冒険しなきゃ」と変な使命感に陥り、以前から気になっていたparcelを導入しかけました。(実装初期は使ってました)
使い始めは、好調！
なんの設定ファイルを書かずとも、何も困らずTypeScript + Vue.jsのコードを
percel ファイル名
でトランスパイルしてくれるのです。
「夢のbundler(?)に出会った」と思ったのですが、しばらく実装を続けてみて明らかに暗黙のanyを使っているのにトランスパイルエラーを出してくれない事に気づきました。
「もう少しエラーと判断されるレベルを上げたいなぁ」と色んな方法を検討しましたが、そうなると設定ファイルは免れず、percelでそれをやっていくのは少々めんどいという結論に至り、使い慣れたwebpackに戻ってきたということをしています。
たぶん、parcelにもっと慣れていたら状況も変わったかもしれませんがスケジュール進捗などから考えての判断です。
###こまったこと（その２）：突如現れたvue-class-component
実装初期ですが、これまで（JavaScript）のやり方でVue.jsで実装を始め「TypeScriptなんだから」と型を宣言しようにも下記用のようなdataプロパティにはどうやって型を指定しよう。。。と困り果てました。
...
data: function () {
return {
id: 0,
name: ''
}
}
...
// ※ componentのdataプロパティだからfunctionで値を定義しています
少し慣れてきた今なら下記のように書くかもしれません。
...
data: function () {
return new class {
id: number = 0;
name: string = '';
}
}
...
// ※ componentのdataプロパティだからfunctionで値を定義しています
ですが、下記のような書き方しか初期は思いつかず
...
data: function () {
let hoge: {
id: number,
name: string
} = {
id: 0;
name: '';
}
return hoge;
}
...
// ※ componentのdataプロパティだからfunctionで値を定義しています
さらに、あちこちに登場するthisをTypeScriptが解決できずにエラー出しまくる。。。これは他のやり方あるなぁ。調べるか、、、と公式見直して載っていたのが vue-class-component です。
よく読んで組み合わせて使えば、「Vue.jsはTypeScriptで書くために生まれたんじゃないか」と錯覚するほどきれいに実装出来ますが、
vue-class-componentで公式ドキュメントがあるわけでもないのでVue.jsをこれから始める人が何かに躓いて公式ドキュメントをみてJSでのやり方を調べvue-class-componentでのやり方も調べる２度手間がありそうかなと思われます（私自身はVue.jsをそれなりに使ってきているので、このような手間が発生してないので、妄想の範囲ですが）
さらにvue-class-componentを使ってもう一つ不安になるのが デコレータは実験的な機能であり、将来のリリースで変更される可能性があります。 が度々出ること。
vue-class-componentはデコレータをガッツリ使っているので「今後VersionUPがしんどいんじゃないかな」と不安を覚えます。。。（Vue1系から2系にVersionUpするのも、そこそこしんどいらしいとだれかのブログで読んだ記憶があるし、そんな事が起こるのかなと）
以上の様なもろもろ先々のメンテナンス性には不安はありますが、社内ツールだし多少は融通効くだろうと少し楽観的にこの辺は進めています。
良かったこと（その１）：nullの扱い
TypeScriptは後発のモダン言語らしく、少しだけnullやundefinedの扱いに厳しくなってます。具体的には下記の書き方をしないとnullやundefinedを入れられない(nullやundefinedがあり得る変数だよと宣言してあげると、それらのチェックなしのコードでトランスパイルエラーになる)のですが、今までVersionの低いJavaやPythonばかり書いていた私からすると「お。そうだった。安全だね！すばらしい！」となります。（社内Scala勢がいっぱいいるので、何を今更と言われそうですが）
let hoge?: number; // undefinedも入れられる
let fuga: string | null; // nullも入れられる
良かったこと（その２）：vue-class-componentが素晴らしい
「こまったこと」にも挙げてますが、コレが使えるのは良かったことの方でもあります。
TypeScriptをただ学習していてずっと思っていたことが「Classで実装しないと旨味半減だよなぁ。。。でもうちの会社だとClass書くほど大規模実装になる画面多くなそうだし、そもそもVue.jsとTypeScriptのClassの親和性は如何ほどのものなのか」と思っていました。
が、vue-class-componentに出会い完全に杞憂だと気付きました。
コレを使って実装すると「Vue.jsはTypeScriptの為に作られたんじゃないか」（実際にはvue-class-componentがTypeScriptの為に作られたんでしょうけど）と思えるほどきれいに実装できます。
JavaScriptでのVue.jsはなんだったんだろう。Vue.jsに出会っただけで「今までの冗長でデバッグしづらいJavaScriptは何だったんだろう」と思ってましたが、同じ感動をもう一度した感じです。
時間もなく、具体例は控えさせていただきますがVue.jsで実装している方々は一度ご経験あれというところです。（ただしデメリットとしてVue.js初心者が急にvue-class-componentから始めることに学習コストが高そうだなと思えることがあります）
おわりに
ちょっと時間が足りず殴り書きのような記事になってしまいましたがTypeScriptに出会ってよかったという気持ちだけは込めました。
もし何らかでこの記事をお目に止めていただけ、疑問に思ったことをコメントいただければすぐには返せませんが、できる限り回答させていただこうと思います。
長々書いてますが、最後まで読んでいただけた方々
まことにありがとうございます！