TypeScriptの公式チートシートを読んだ

先週の This Week In React に流れてきたやつ。

🧵 TypeScript Cheat Sheets by @orta

4 nicely designed and official cheatsheets now online:

- Types
- Interfaces
- Classes
- Control Flow Analysishttps://t.co/fnqAcuU8c8 pic.twitter.com/D7BlZsyvjf
— Sebastien Lorber 🇫🇷 🦖 ⚛️ 📨 (@sebastienlorber) 2022年1月19日

ざっと読んでみたけどそこまで目新しい発見はありませんでした。以下メモ。 💬 はコメント。

Classes

f:id:dackdive:20220124011610p:plain — https://www.typescriptlang.org/static/TypeScript%20Classes-83cc6f8e42ba2002d5e2c04221fa78f9.png

Common Syntax
- extends, implements
- コンストラクタ
- メソッド（アロー関数で書くのと2パターン）
- オーバーロード
- getter/setter
- private/protected メソッド
- static フィールド/メソッド
- static { this.#userCount = -1 } static ブロック
- 💬 private field が # 始まりになってる
Generics
Parameter Properties
- コンストラクタ引数に public, private, protected, readonly をつけると、インスタンス変数に自動的にセットしてくれる TypeScript 独自の機能
- https://www.typescriptlang.org/docs/handbook/2/classes.html#parameter-properties
- 💬 これ最近まで知らなかった

class Location {
  constructor(public x: number, public y: number) {}
}

const loc = new Location(20, 40);
loc.x // 20
loc.y // 40

Abstract Classes
Decorators and Attributes
- デコレータをクラス、メソッド、アクセサ、プロパティやパラメータに使えるよ、とだけ
- どういう動作になるのかは書かれておらず

Interfaces

f:id:dackdive:20220124011739p:plain — https://www.typescriptlang.org/static/TypeScript%20Interfaces-34f1ad12132fb463bd1dfe5b85c5b2e6.png

Common Syntax
- 💬 new XXX() したときの型の宣言とかしばらく知らなかった
  - new(s: string): JSONResponse;
Extension via merging
- interface は複数宣言することでマージできる

Types

f:id:dackdive:20220124011836p:plain — https://www.typescriptlang.org/static/TypeScript%20Types-4cbf7b9d45dc0ec8d18c6c7a0c516114.png

左上の Type vs Interface にどっち使う？の判断材料について言及されていた。

Type vs Interface
- Interface はオブジェクトの形状を表現するのにしか使えない
- Interface は複数回宣言することで拡張できる
- パフォーマンスがクリティカルな型は Interface のほうが速い可能性がある
💬 このへんの型については新しい知見はなかった
- Primitive Type, Object Literal Type, Tuple Type, Union Type, Intersection Types（& によるマージ）
Type Indexing
Type from Value: typeof 値 で値を元にした型が作れる
Type from Func Return: ReturnType<関数の型> で関数の戻り値の型が作れる
Type from Module

以下はライブラリを作成するときや既存のJavaScriptコードを表現するときに素晴らしい機能だが、多くのTypeScriptアプリケーションではほとんど使わないとのこと。

Mapped Types

type Artist = { name: string, bio: string };

type Subscriber<Type> = {
  [Property in keyof Type]:
    (newValue: Type[Property]) => void
}
type ArtistSub = Subscriber<Artist>

Conditional Types: A extends B ? C : D
Template Union Types
- 型にテンプレートリテラルを使う
- type AllLocaleIDs = `${SupportedLangs}_${FooterLocaleIDs}_id`

Control Flow Analysis

f:id:dackdive:20220124011918p:plain — https://www.typescriptlang.org/static/TypeScript%20Control%20Flow%20Analysis-8a549253ad8470850b77c4c5c351d457.png

If Statements
- if で型を絞り込む
Discriminated Unions
- Union の各メンバが同じプロパティを持っている場合、 if や switch で型を絞り込める

type Responses =
  | { status: 200, data: any }
  | { status: 301, to: string }
  | { status: 400, error: Error }

Type Guards
- 関数の戻り値の型に is を使うやつ
- これは as と同じく TypeScript の推論に頼らず自分で宣言しているだけなので取り扱い注意
Assertion Functions
- 関数の戻り値の型を asserts <引数> is SomeType で定義するやつ
Assignment
- as const