5分でTypeScript入門！〜既存JS環境に引導を渡そう〜

TypeScriptあんまり触ったことないですが、TS入門のLT資料を作ってみました。

Transcript

1. 5分でTypeScript入門！ 〜既存JS環境に引導を渡そう〜
2. TypeScriptとは？ • JavaScriptの静的型付け版の言語 • Microsoftがオープンソースで開発している • Googleでも社内標準言語として利用されている • TypeScriptをJavaScriptにコンパイルして実行する
3. なぜTypeScript？ • 型が保証されている（型推論も使える） • 型があることで改修時のバグ発生率が下がり保守性の向上 • 型を書けるので気持ちがいい（Developer eXperience） • エディタの入力補完を受けられることで開発効率の向上 • 型チェックの厳しさをプロジェクトごと決められる ◦ → 導入障壁が低い！！！
4. TypeScriptを導入してみよう 弊社のお掃除ロボットるんばちゃんの状況をリアルタイムで知らせる「る んばちゃんbot」のチャットを投稿しているJavaScriptのプログラムに TypeScriptを導入してみようと思います。
5. ざっくり手順 1. typescriptのinstallとtsconfig.jsonの作成 2. tsconfig.jsonの設定を緩めに指定 3. ファイルの拡張子を .js → .ts に変更する 4. コンパイルエラーを修正する とっても簡単！！！！(？)
6. typescriptのinstallと tsconfig.jsonの作成 • typescriptはTypeScriptのコンパイラのモジュール • tsconfig.jsonはTypeScriptコンパイルの設定ファイル
7. tsconfig.jsonの設定を緩めに指定① • 最初は型チェックに関する設定を緩めにする
8. tsconfig.jsonの設定を緩めに指定② ☆ポイント • 優先すべきは「TypeScript」導入を完了させること ◦ 「厳密な型を使う」のはあとからでも追加できる • any型を許容する（大事） • 型を緩くしていてもJavaScriptよりも堅い型チェックやエディタによる 補完などのサポートを受けられる
9. ファイル拡張子を.js → .tsに変更 • `rename`コマンドは追加する必要あり(Mac) • Linuxの`rename`コマンドとは若干違うらしい(未検証) • Windowsの場合は`ren`コマンドが使えそう？(未検証)
10. コンパイルエラーを修正①
11. コンパイルエラーを修正② • プロパティを定義していない状態でオブジェクトを作成していたの で、オブジェクト定義の時にプロパティも同時に定義する • ついでに「type」でオブジェクトの型も定義する（必須ではない）
12. コンパイルエラーを修正③
13. エラーが出なければOK！！ これであなたもTypeScripterの仲間入り！！ いざ、ビルド！
14. ご清聴ありがとうございました。 良いTypeScriptライフを！！！！ 参考記事： https://eh-career.com/engineerhub/entry/2019/04/16/103000 https://tech.raksul.com/2019/07/22/introduce-typescript-to-existing-product/ https://komiyak.hatenablog.jp/entry/20170421/1492752232