私のことは嫌いになっても TypeScriptのことは嫌いにならないでください〜フロントエンドエンジニアがTypeScriptと仲良くなる方法〜

Slide 1

Slide 1 text

[LT]私のことは嫌いになっても TypeScriptのことは嫌いにならないでください〜フロントエンドエンジニアがTypeScriptと仲良くなる方法〜 TSKaigiサブイベント #1 フロントエンド株式会社ICS Fumiya Konno

Slide 2

Slide 2 text

発表の目的 G 初学者ってどこでつまづくんだっけ？を振り返 G 広大なTypeScriptの海を泳ぐヒントを提供する

Slide 3

Slide 3 text

自己紹介株式会社ICS 昆野史弥（@238_k_）フロントエンド専門の制作会社、株式会社ICSに 2019年入社会社でメディア（https://ics.media/）を運営しているのでよかったら見てください

Slide 4

Slide 4 text

JavaScriptでTODOアプリを作ってみるいまいちど初心に戻って... https://github.com/ics-konno/todo-demo その後TypeScriptにする

Slide 5

Slide 5 text

要件 ' TODOを追加できÈ ' 追加したTODOを削除できÈ ' TODOにチェック状態をつけられる要件 ' TODOを追加できÈ ' 追加したTODOを削除できÈ ' TODOにチェック状態をつけられる動くようになったのでTypeScriptファイルにしてみたところ...

Slide 6

Slide 6 text

エラーがたくさん！

Slide 7

Slide 7 text

発生したエラーの一例 g 初期値が空の配列はany型になG g 引数には型が必f g querySelectorで取得したDOMはnullかもしれな% g e.target.valueはtargetがHTMLInputElementの場合にのみ生える JavaScriptでは気付けなかったもの

Slide 8

Slide 8 text

ここがつらいよTypeScript f ブラウザAPIのような一般的な型のエラーは大体お決まりの作法があu f ライブラリの型エラーはつらい..C f ライブラリ自体の型定義がよくないこともあるあu f ただし、がんばって解決できたら必ず成長すu f 最悪型キャストしてランタイムでバリデーションをかける型エラーが解消できない... 環境構築が大変... f ビルドツールを使おx f npm create vite コードが冗長になる... f あるべき姿に戻っただけ！

Slide 9

Slide 9 text

ここが嬉しいTypeScript JavaScriptより安全 I ランタイムエラーでエラーを検出するのは非合理8 I 型は事前にエラーになりうる箇所を検知してくれる型はドキュメントになる I 作成した関数やクラスをどう使ってほしいかが明確になd I 他の実装者の自由度を下げることで、コードの品質が一定に保たれる

Slide 10

Slide 10 text

TypeScript上級者への道型エラーを解消できる S Optionalな型を理解でき8 S APIを適切に使用でき8 S 型の絞り込みができる型を定義できる S 交差型やユニオン型を使用でき8 S 汎用型が使用できる変数や型から型をつくれる Creating Types from Typek S ジェネリクy S keyof typeoe S Conditional Typek S Mapped Types type-challengesは楽しいよ〜

Slide 11

Slide 11 text

まとめ

Slide 12

Slide 12 text

型を知ろう B 型というのは..( % 潜在的なエラーを洗い出すも2 % ドキュメントの役割を果たすも2 % 開発を助けるもの B レベルアップのヒンr B 型エラーをたくさん解決しよう B 自分で型を作ってみよう B TypeScriptの便利機能を使ってみよう B 人やAIに質問しよう

Slide 13

Slide 13 text

フロントエンドと型 2 型パズルよりも設X 2 TypeScriptの世界は深い。まずはフロントエンドのためのTypeScript を教えよう、学ぼr 2 みなさんにとっての「TypeScriptを使う理由」もぜひ教えて下さい

Slide 14

Slide 14 text

Thank You! ご清聴ありがとうございました！