TypeScript導入の布教資料

1. TypeScript導入のススメ

2. 話す内容
1. TypeScript is 何
2. どうやって導入しよう
- 2-1 既存
- 2-2 新規
3. まとめ
注 ）TSの書き方や詳しい型のお話はしません。
こういう感じに使ってみませんか。というご提案です🙋

3. 1. TypeScript is 何 (超ざっくり）
- 型のあるJavascript
- コンパイルするとJSになる
- JSでできることはTSでできる
何が違うの？ →

4. エラーに気づけるタイミングが違う
→「プログラムを実行」した時
→「テキストエディターで入力」した時

5. 使ってみて
- 実行前にエラーに気づける喜び
- 喜び ＞ 勉強コスト
＊anyを許容すればそんなに勉強いらない（そ
の分メリットは大きく下がるけど）

6. 2. どうやって導入する？どうやって使う？

7. JSプロジェクトがTSに比べ多い理由
多分大きく2点導入に至らない理由がある？
- 始めるのに手間がかかる
- JSのプロジェクトを置き換えるコストが高い

8. 2-1 始めるのに時間かかる
TSのコンパイル設定面倒。時間ない
ちょっとしたLPにTSいらないかも
↓
完全同意

9. 環境作りました
LPテンプレでTS使えるようにしました！
Reactもコンパイルできるようにしておきました。
SPAも作ってます！
↓
後でGithubリポジトリ共有します。

10. 2-2 JSのプロジェクトを置き換えるコスト
1. TSCを追加する
2. 各ファイルの拡張子を変更する
3. 必要な部分に型をつけていく （←地獄）
4. ライブラリを使用している場合、ライブラリの型ファイルをインストールする

11. ts-migrate is 何
Airbnbの開発チームが出したJS→TS移行ツール
大きいプロジェクトでは時間かかるが、それでも多分１週間くらいで移行できる。
https://github.com/airbnb/ts-migrate
使い方まとめてみました
https://qiita.com/Sotq_17/items/56403d3b8137affc1d10
＊今度ハンズオンで移行の仕方の勉強会（？）したいなと思います

12. ts-migrateを使った場合
1. TSCを追加する ＊一部調整必要
2. 各ファイルの拡張子を変更する
3. 必要な部分に型をつけていく （←地獄） ＊一部調整必要
4. ライブラリを使用している場合、ライブラリの型ファイルをインストールする

14. 各ファイルの調整
型の追加が必要な部分は、ライブラリ側が自動でany型を追加
補完できない箇所は@ts-expect-errorで表示される

15. 2-3 どういう風に使う？
JavaScriptに型を書いていくだけ（極論）

16. 諸刃の剣 ANY型
何にでもなる型
使ったらJavascriptと同じ挙動になる

17. ANYに対する意見
公式は？
>After all, remember that all the convenience of any comes at the cost of losing type safety. Type
safety is one of the main motivations for using TypeScript and you should try to avoid using any when
not necessary. # 公式
超意訳 ) any使ったら便利やけど型安全性なくなるよ。できればやめて。

18. 個人的な意見
Wizはとりあえずany許容で良いのでは（明示的にする）
anyでTS書く ＞＞＞＞ anyは意味ないからJSで書く

19. 最低限のTSルール
できるだけ型書きましょう。でも急いでたら書かなくてもOK。
その場合はAny型じゃなくて、独自の型を作りましょう（ex.FixMe)
みんな時間ある時にFixMe消していきましょう！

20. まとめ
- JSのプロジェクトを置き換えるコストが高い
→Ts-migrateで置き換えよう！
- 始めるのに手間がかかる
→Tsテンプレ使おう！
- どうやって使うの？
→anyを独自型にして、まずは使おう！

21. ご静聴ありがとうございました
＆
ご質問あれば！