Effective TypeScript はいいぞ

Slide 1

Slide 1 text

Effective TypeScript Yusuke Soeda 10 Minutes Study Group of TypeScript

Slide 2

Slide 2 text

自己紹介ソエダユースケ  🐙@soe-j　🦜@soeda_jp  昨年ジョイン、TypeScriptを書き始めた   TypeScript が導入されてないプロジェクトを   TypeScript化の最中   その他リファクタしながらゴリゴリ機能開発   型いる？と思っていた頃もあったが   型なしでは生きられない身体に  

Slide 3

Slide 3 text

https://effectivetypescript.com/   TypeScript の効果を最大限に活かそう   PDF版のが安い、Google翻訳にぶち込みやすい   コードベースで説明されてて理解しやすい   書籍中で出てくるサンプルコードは公開されている   https://github.com/danvk/effective-typescript     Effective TypeScript

Slide 4

Slide 4 text

広くあさーく本の紹介です  公開されてる情報を元に発表します   どういう考え方が存在するか   “なぜそうなるか” は本の内容になるので   気になったら買ってみてね   （回し者ではありません）     今日は

Slide 5

Slide 5 text

JavaScript を書いている人   TypeScript ってなんなの？って思っている人   これからTypeScript を書こうと思っている人   TypeScript 書いてるけど JSとの関係がよく分からん     TypeScript の力を享受できてない気がする人     TypeScript の力  誰にとって「いいぞ」なのか

Slide 6

Slide 6 text

TypeScript について知ろう   Chapter 1: Getting to Know TypeScript   TypeScript の型システム   Chapter 2: TypeScript’s Type System   型推論  Chapter 3: Type Inference   型設計  Chapter 4: Type Design   タイトルから見る Effective TypeScript any を使いながら  Chapter 5: Working with any   型定義と @types  Chapter 6: Types Declarations and @types   コードを書く、実行する   Chapter 7: Writing and Running Your Code   TypeScript に移行する   Chapter 8. Migrating to TypeScript   8章 62項タイトルは全公開されている   それだけでも内容が垣間見れるので紹介したい  

Slide 7

Slide 7 text

Chapter 1 : TypeScript について知ろう   1. TypeScript と JavaScript の関係   Understand the Relationship Between TypeScript and JavaScript   2. TypeScript のオプション   Know Which TypeScript Options You’re Using   3. コード生成は型に依存しない   Understand That Code Generation Is Independent of Types   4. 構造的型付けで快適に   Get Comfortable with Structural Typing   5. any の使用を制限せよ   Limit Use of the any Type   Getting to Know TypeScript   TypeScript の全体像について   細かい仕様までは言及されてないので TypeScript Handbook などご参照のこと   風向きを知る風見鶏  

Slide 8

Slide 8 text

6. エディタ上で型をみよう   Use Your Editor to Interrogate and Explore the Type System   7. 型を値の集合として捉えよう   Think of Types as Sets of Values   8. 型空間 or 値空間どちらのシンボルか見分けよう   Know How to Tell Whether a Symbol Is in the Type Space or Value Space   9. アサーションより型宣言を使おう   Prefer Type Declarations to Type Assertions   10. Object Wrapper Type を避けよう   Avoid Object Wrapper Types (String, Number, Boolean, Symbol, BigInt)   Chapter 2 : TypeScript の型システム (1/3)   TypeScript’s Type System   TypeScript の使い方、考え方   ざっと書き方は把握したけど、どう使おうかなと考えている人に   正しい使い方を知りたい  

Slide 9

Slide 9 text

11. 余剰なプロパティをチェックするのは限界がある   Recognize the Limits of Excess Property Checking   12. 関数式全体に型を適用しよう   Apply Types to Entire Function Expressions When Possible   13. type と interface の違い   Know the Differences Between type and interface   14. Type Operations と Generics と使って重複を避けよう   Use Type Operations and Generics to Avoid Repeating Yourself   Chapter 2 : TypeScript の型システム (2/3)   TypeScript’s Type System   正しい使い方を知りたい   TypeScript の使い方、考え方   ざっと書き方は把握したけど、どう使おうかなと考えている人に  

Slide 10

Slide 10 text

15. 動的データには Index Signature を使おう   Use Index Signatures for Dynamic Data   16. Array, Tuple, ArrayLikeを使おう   Prefer Arrays, Tuples, and ArrayLike to number Index Signatures   17. readonly を使おう   Use readonly to Avoid Errors Associated with Mutation   18. Mapped Types を使って値と同期しよう   Use Mapped Types to Keep Values in Sync   Chapter 2 : TypeScript の型システム (3/3)   TypeScript’s Type System   正しい使い方を知りたい   TypeScript の使い方、考え方   ざっと書き方は把握したけど、どう使おうかなと考えている人に  

Slide 11

Slide 11 text

19. 推論できる型でコードを散らかすな   Avoid Cluttering Your Code with Inferable Types   20. 型の違う値は変数を分けよう   Use Different Variables for Different Types   21. 型が広く解釈されることがある   Understand Type Widening   22. 型の絞り込み  Understand Type Narrowing   23. オブジェクトは一度に作ろう   Create Objects All at Once     Chapter 3 : 型推論 (1/2)   Type Inference  TypeScript が行う型推論で、発生し得る問題と解決方法。   JavaScript でも言える基本的なことも踏まえながら。   信頼のある推測を無料で提供  

Slide 12

Slide 12 text

24. 一貫性を持ってエイリアスを使おう  Be Consistent in Your Use of Aliases   25. callback ではなく async function を使おう   Use async Functions Instead of Callbacks for Asynchronous Code   26. 型推論におけるコンテキストの使われ方   Understand How Context Is Used in Type Inference   27. 便利な関数やライブラリを使おう   Use Functional Constructs and Libraries to Help Types Flow   Chapter 3 : 型推論 (2/2)   Type Inference  TypeScript が行う型推論で、発生し得る問題と解決方法。   JavaScript でも言える基本的なことも踏まえながら。   信頼のある推測を無料で提供  

Slide 13

Slide 13 text

28. 型は常に Valid な状態を表すこと   Prefer Types That Always Represent Valid States   29. 受け取るものには寛容に、生み出すものには厳格に   Be Liberal in What You Accept and Strict in What You Produce   30. 定義した型情報をドキュメントで繰り返さないで   Don’t Repeat Type Information in Documentation   31. Null を型の外へ押しやろう   Push Null Values to the Perimeter of Your Types   32. Union を含む Interface より、Interface を分けて Union を使おう   Prefer Unions of Interfaces to Interfaces of Unions     Chapter 4 : 型設計 (1/2)   Type Design  TypeScript において、型をどう設計するのが良いか。   TypeScript を例にしているが、他の言語にも応用できる話かと   設計大事 

Slide 14

Slide 14 text

Chapter 4 : 型設計 (2/2)   Type Design  33. 文字列型より正確な型を定義しよう   Prefer More Precise Alternatives to String Types   34. 不正確な型よりも不完全な型を   Prefer Incomplete Types to Inaccurate Types   35. データではなくAPIや仕様から型を生成しよう   Generate Types from APIs and Specs, Not Data   36. 型の名前にはドメインの言葉を使おう   Name Types Using the Language of Your Problem Domain   37. Nominal Typing するなら “Brands” を使ってみよう   Consider “Brands” for Nominal Typing   TypeScript において、型をどう設計するのが良いか。   TypeScript を例にしているが、他の言語にも応用できる話かと   設計大事 

Slide 15

Slide 15 text

38. any を使うスコープを可能な限り狭く   Use the Narrowest Possible Scope for any Types   39. any より正確な any のバリエーションを使おう  Prefer More Precise Variants of any to Plain any   40. 安全でない型アサーションを十分に型定義された関数で隠そう   Hide Unsafe Type Assertions in Well-Typed Functions   41. any は進化する  Understand Evolving any     Chapter 5 : any を使いながら (1/2)   Working with any  1章で「any はなるべく使うなよ」とは言っていたが、JSプロジェクトに最初から   全部型をつけるのは困難... any の特性を理解して、うまく使っていこう   any と仲良く 

Slide 16

Slide 16 text

1章で「any はなるべく使うなよ」とは言っていたが、JSプロジェクトに最初から   全部型をつけるのは困難... any の特性を理解して、うまく使っていこう   42. 型が不明な値には unknown を使おう   Use unknown Instead of any for Values with an Unknown Type   43. モンキーパッチに対する型安全なアプローチ   Prefer Type-Safe Approaches to Monkey Patching   44. 型カバレッジを追跡しよう   Track Your Type Coverage to Prevent Regressions in Type Safety     Chapter 5 : any を使いながら (2/2)   Working with any  any と仲良く 

Slide 17

Slide 17 text

45. TypeScript と @types は devDependencies に   Put TypeScript and @types in devDependencies   46. 型定義に関わる3つのバージョン   Understand the Three Versions Involved in Type Declarations   47. API として公開される型はすべて export せよ   Export All Types That Appear in Public APIs   48. TSDoc を使おう   Use TSDoc for API Comments   Chapter 6 : 型定義と @types (1/2)   Types Declarations and @types   利用する TypeScript のバージョン管理、TS製のライブラリ、型定義をどう扱うか   ライブラリとして公開するときの注意点、プロジェクト全体でどのように型を運用するか   ライブラリ 

Slide 18

Slide 18 text

49. callback内の this の型を定義する   Provide a Type for this in Callbacks   50. オーバーロードで型宣言するよりも Conditional Types を使おう   Prefer Conditional Types to Overloaded Declarations   51. 型をミラーリングして依存関係を断つ   Mirror Types to Sever Dependencies   52. 型をテストするときの落とし穴   Be Aware of the Pitfalls of Testing Types     Chapter 6 : 型定義と @types (2/2)   Types Declarations and @types   利用する TypeScript のバージョン管理、TS製のライブラリ、型定義をどう扱うか   ライブラリとして公開するときの注意点、プロジェクト全体でどのように型を運用するか   ライブラリ 

Slide 19

Slide 19 text

53. ECMAScript の機能を使おう   Prefer ECMAScript Features to TypeScript Features   54. Object を反復処理する方法   Know How to Iterate Over Objects   55. DOMの階層構造   Understand the DOM hierarchy   56. 隠蔽のために Private に頼ってはいけない   Don’t Rely on Private to Hide Information   57. デバッグにはソースマップを使おう   Use Source Maps to Debug TypeScript   Chapter 7 : コードを書く、実行する   Writing and Running Your Code   記述時に困ること、実行時に困ることの Tips集的な章   ラン（実行） 

Slide 20

Slide 20 text

58. 最新の JavaScript で書く   Write Modern JavaScript   59. @ts-check と JSDoc を使って TypeScript を試す   Use @ts-check and JSDoc to Experiment with TypeScript   60. allowJs を使って TypeScript と JavaScript を混ぜる   Use allowJs to Mix TypeScript and JavaScript   61. モジュール毎に移行して依存関係グラフをのぼる   Convert Module by Module Up Your Dependency Graph   62. noImplicitAny を有効にするまで移行は完了しない   Don’t Consider Migration Complete Until You Enable noImplicitAny   Chapter 8 : TypeScript に移行する   Migrating to TypeScript   JavaScript のプロジェクトを TypeScript へ移行するためのアドバイス   TS化という戦いにアドバイス  

Slide 21

Slide 21 text

TypeScript と JavaScript の関係  型を値の集合として捉えよう  Null を型の外へ、型は常に Valid な状態に  APIや仕様から型を生成、型の名前にはドメインの言葉を  type と interface の違い  any との付き合い方  推論できる型でコードを散らかすな   注目！ Pickup! 

Slide 22

Slide 22 text

TypeScript と JavaScript の関係 TypeScript は実行前に機能する  静的型付け言語。型定義、型推測して問題を検出する   実行時には JavaScript へ変換されている   実行中のエラーは JavaScript によりハンドリングされる。 TypeScript で付与した型情報は消えさる。   API レスポンスなど動的なデータ、実行時にしか分からない型は、TypeScript が推測することは不可能。  DOM の取得も当てはまる。型定義、アサーションなどで TypeScript に教えてあげよう。   JavaScript で担保できることは JavaScript で書こう   Item 53: Prefer ECMAScript Features to TypeScript  

Slide 23

Slide 23 text

型を値の集合として捉えよう Vector3D extends Vector2D   Vector3D は Vector2D の部分集合  Vector1D x Vector2D x, y Vector3D x, y, z Vector1D Vector2D Vector3D 継承継承 z を持つ y を持つ x を持つ Item 7 : Think of Types as Sets of Values  

Slide 24

Slide 24 text

型を値の集合として捉えよう引数Vector3D の関数に Vector2D は渡せない   Vector1D Vector2D Vector3D 引数Vector1D の関数に Vector2D は渡せない   ×  x, y, z x, y x Item 7 : Think of Types as Sets of Values  

Slide 25

Slide 25 text

型の設計 28. 常に Valid な状態を表すこと   31. Null を型の外へ押しやる     state: pending のときに、responseBody に何か値が入っていることはないよね？null だよね？   Chapter 4: Type Design  

Slide 26

Slide 26 text

35. データではなくAPIや仕様から型を生成しよう   自前で型を作るより GraphQL や gRPC を活用して型を生成できるならそうしたい（希望）     36. 型の名前にはドメインの言葉を使おう   独自に編み出した言葉をつけるんじゃなくて、   ドメインで使われている言葉を使おう  （ANDPADなら建築分野など）   型の設計 Chapter 4: Type Design  

Slide 27

Slide 27 text

type  Union 型の表現などが出来る   interface  declaration merging が出来る  https://github.com/danvk/effective-typescript/blob/master/samples/ch02-types/item-13-type-vs-interface/type-vs-interface-15.ts     それぞれの書き方、特性を理解して、どっち使うか統一すべし  個人的には type を使っている   type と interface の違い Item 13 : Know the Differences Between type and interface  

Slide 28

Slide 28 text

any との付き合い方 Chapter 5 : Working with any   特にJSから移行中など、完全に any を使わないのは難しい、特性を理解して使っていく   34. 不正確な型よりも不完全な型を   不正確な型を定義して、よりややこしいことにならないように注意したい   42. 型が不明な値には unknown を使おう   parser など定義が難しいときは unknown を活用することも考慮したい   Chapter 5: Working with any +α  

Slide 29

Slide 29 text

推論できる型でコードを散らかすなできるだけTSの型推論に任せよう   推論してくれるので全部書く必要はない   というよりTSが推測できるところは任せたほうが良い   間違えて型をつけちゃったり、それにより思わぬ型推論されたり   人為的ミスを防ぎたい   Item 7 : Think of Types as Sets of Values  

Slide 30

Slide 30 text

まとめ JavaScript との関係を理解して、適材適所を見極め使っていこう   型を集合として捉えると考えやすいかも   いきなりすべて TypeScript 化は現実的ではない、徐々に移行する howto を掴もう  TypeScript やライブラリに任せられるところは任せよう     読むのが大変？勉強会を活用してみては？  Things to Remember  

Slide 31

Slide 31 text

担当者は日替わり  約1項目を esa にまとめる＆朝10分共有  英語読む習慣、深い知識を得る習慣   詳しくはテックブログで（はてぶしてね）   https://tech.andpad.co.jp/entry/2020/09/23/095120     毎朝気づきがある様子   ANDPAD名物(?) 10分勉強会

Slide 32

Slide 32 text

O’WEILLY （おわり）