dackdive's blog

新米webエンジニアによる技術ブログ。JavaScript(React), Salesforce, Python など

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

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

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

Classes

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

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

所感

  • 「全然知らねえ!」というのはなかったよかった
  • Mapped Types とか Conditional Types とか Assertion Functions とか、説明聞いただけだとよくわからんみたいなのが最低限のサンプルコード載せてくれてるのはありがたい