Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
私のことは嫌いになっても TypeScriptのことは嫌いにならないでください 〜フロントエ...
Search
Fumiya Konno
August 06, 2024
1
310
私のことは嫌いになっても TypeScriptのことは嫌いにならないでください 〜フロントエンドエンジニアがTypeScriptと仲良くなる方法〜
TSKaigiサブイベント #1 フロントエンド
発表資料
https://typescript-jpc.connpass.com/event/325001/
Fumiya Konno
August 06, 2024
Tweet
Share
More Decks by Fumiya Konno
See All by Fumiya Konno
CDNから届ける Nuxt Edge-Side Rendering
238_k_
0
560
Featured
See All Featured
Done Done
chrislema
182
16k
4 Signs Your Business is Dying
shpigford
182
22k
For a Future-Friendly Web
brad_frost
176
9.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Visualization
eitanlees
146
15k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Statistics for Hackers
jakevdp
797
220k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Code Review Best Practice
trishagee
67
18k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
9
450
Transcript
[LT]私のことは嫌いになっても TypeScriptのことは嫌いにならないでください 〜フロントエンドエンジニアがTypeScriptと仲良くなる方法〜 TSKaigiサブイベント #1 フロントエンド 株式会社ICS Fumiya Konno
発表の目的 G 初学者ってどこでつまづくんだっけ?を振り返 G 広大なTypeScriptの海を泳ぐヒントを提供する
自己紹介 株式会社ICS 昆野 史弥(@238_k_) フロントエンド専門の制作会社、株式会社ICSに 2019年入社 会社でメディア(https://ics.media/)を運営して いるのでよかったら見てください
JavaScriptでTODOアプリ を作ってみる いまいちど初心に戻って... https://github.com/ics-konno/todo-demo その後TypeScriptにする
要件 ' TODOを追加できÈ ' 追加したTODOを削除できÈ ' TODOにチェック状態をつけられる 要件 ' TODOを追加できÈ
' 追加したTODOを削除できÈ ' TODOにチェック状態をつけられる 動くようになったのでTypeScriptファイルにしてみたところ...
エラーがたくさん!
発生したエラーの一例 g 初期値が空の配列はany型になG g 引数には型が必f g querySelectorで取得したDOMはnullかもしれな% g e.target.valueはtargetがHTMLInputElementの場合にのみ生える JavaScriptでは気付け
なかったもの
ここがつらいよTypeScript f ブラウザAPIのような一般的な型のエラーは大体お決まりの作 法があu f ライブラリの型エラーはつらい..C f ライブラリ自体の型定義がよくないこともあるあu f ただし、がんばって解決できたら必ず成長すu
f 最悪型キャストしてランタイムでバリデーションをかける 型エラーが解消できない... 環境構築が大変... f ビルドツールを使おx f npm create vite コードが冗長になる... f あるべき姿に戻っただけ!
ここが嬉しいTypeScript JavaScriptより安全 I ランタイムエラーでエラーを検出するのは非合理8 I 型は事前にエラーになりうる箇所を検知してくれる 型はドキュメントになる I 作成した関数やクラスをどう使ってほしいかが明確になd I
他の実装者の自由度を下げることで、コードの品質が一定に 保たれる
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は楽しいよ〜
まとめ
型を知ろう B 型というのは..( % 潜在的なエラーを洗い出すも2 % ドキュメントの役割を果たすも2 % 開発を助けるもの B
レベルアップのヒンr B 型エラーをたくさん解決しよう B 自分で型を作ってみよう B TypeScriptの便利機能を使ってみよう B 人やAIに質問しよう
フロントエンドと型 2 型パズルよりも設X 2 TypeScriptの世界は深い。まずはフロントエンドのためのTypeScript を教えよう、学ぼr 2 みなさんにとっての「TypeScriptを使う理由」もぜひ教えて下さい
Thank You! ご清聴ありがとうございました!