Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Effective TypeScript はいいぞ

Effective TypeScript はいいぞ

2021/03/05 ANDPAD TechLive #4 ANDPAD FrontEnd NOW!!

ANDPAD inc

March 05, 2021
Tweet

More Decks by ANDPAD inc

Other Decks in Programming

Transcript

  1. 自己紹介 ソエダユースケ
 🐙@soe-j 🦜@soeda_jp
 昨年ジョイン、TypeScriptを書き始めた 
 TypeScript が導入されてないプロジェクトを 
 TypeScript化の最中 


    その他リファクタしながらゴリゴリ機能開発 
 型いる?と思っていた頃もあったが 
 型なしでは生きられない身体に 

  2. JavaScript を書いている人 
 TypeScript ってなんなの?って思っている人 
 これからTypeScript を書こうと思っている人 
 TypeScript

    書いてるけど JSとの関係がよく分からん 
 
 TypeScript の力を享受できてない気がする人 
 
 TypeScript の力
 誰にとって「いいぞ」なのか
  3. 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項 タイトルは全公開されている 
 それだけでも内容が垣間見れるので紹介したい 

  4. 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 などご参照のこと 
 風向きを知る風見鶏 

  5. 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 の使い方、考え方 
 ざっと書き方は把握したけど、どう使おうかなと考えている人に 
 正しい使い方を知りたい 

  6. 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 の使い方、考え方 
 ざっと書き方は把握したけど、どう使おうかなと考えている人に 

  7. 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 の使い方、考え方 
 ざっと書き方は把握したけど、どう使おうかなと考えている人に 

  8. 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 でも言える基本的なことも踏まえながら。 
 信頼のある推測を無料で提供 

  9. 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 でも言える基本的なことも踏まえながら。 
 信頼のある推測を無料で提供 

  10. 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 を例にしているが、他の言語にも応用できる話かと 
 設計大事

  11. 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 を例にしているが、他の言語にも応用できる話かと 
 設計大事

  12. 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 と仲良く

  13. 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 と仲良く

  14. 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製のライブラリ、型定義をどう扱うか 
 ライブラリとして公開するときの注意点、プロジェクト全体でどのように型を運用するか 
 ライブラリ

  15. 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製のライブラリ、型定義をどう扱うか 
 ライブラリとして公開するときの注意点、プロジェクト全体でどのように型を運用するか 
 ライブラリ

  16. 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集的な章 
 ラン(実行)

  17. 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化という戦いにアドバイス 

  18. TypeScript と JavaScript の関係
 型を値の集合として捉えよう
 Null を型の外へ、型は常に Valid な状態に
 APIや仕様から型を生成

    、型の名前にはドメインの言葉を
 type と interface の違い
 any との付き合い方
 推論できる型でコードを散らかすな 
 注目! Pickup!

  19. TypeScript と JavaScript の関係 TypeScript は実行前に機能する
 静的型付け言語。型定義、型推測して問題を検出する 
 実行時には JavaScript

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

  20. 型を値の集合として捉えよう 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 

  21. 型を値の集合として捉えよう 引数Vector3D の関数に Vector2D は渡せない 
 Vector1D Vector2D Vector3D 引数Vector1D

    の関数に Vector2D は渡せない 
 ×
 x, y, z x, y x Item 7 : Think of Types as Sets of Values 

  22. 型の設計 28. 常に Valid な状態を表すこと 
 31. Null を型の外へ押しやる 


    
 state: pending のときに、responseBody に何か値が入っていることはないよね?null だよね? 
 Chapter 4: Type Design 

  23. 35. データではなくAPIや仕様から型を生成しよう 
 自前で型を作るより GraphQL や gRPC を活用して 型を生成できるならそうしたい(希望) 


    
 36. 型の名前にはドメインの言葉を使おう 
 独自に編み出した言葉をつけるんじゃなくて、 
 ドメインで使われている言葉 を使おう
 (ANDPADなら建築分野など) 
 型の設計 Chapter 4: Type Design 

  24. 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 

  25. any との付き合い方 Chapter 5 : Working with any 
 特にJSから移行中など、完全に

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

  26. まとめ JavaScript との関係 を理解して、適材適所を見極め使っていこう 
 型を集合として捉えると考えやすいかも 
 いきなりすべて TypeScript 化は現実的ではない、

    徐々に移行する howto を掴もう
 TypeScript やライブラリに 任せられるところは任せよう 
 
 読むのが大変? 勉強会を活用してみては?
 Things to Remember