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
210
私のことは嫌いになっても 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
460
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
48
13k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
43
2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
VelocityConf: Rendering Performance Case Studies
addyosmani
322
23k
Large-scale JavaScript Application Architecture
addyosmani
508
110k
The Mythical Team-Month
searls
218
43k
GitHub's CSS Performance
jonrohan
1030
450k
BBQ
matthewcrist
83
9.2k
The Language of Interfaces
destraynor
153
23k
Writing Fast Ruby
sferik
623
60k
Building a Modern Day E-commerce SEO Strategy
aleyda
36
6.8k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
8.9k
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! ご清聴ありがとうございました!