進めてる(進めていく)教材とか

• HypertextCandy React入門チュートリアル 完了
• りあクト！ TypeScriptで始めるつらくないReact開発 4/14 完了
• Udemy フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門 完了
• Udemy React Hooks 入門 - Hooksと Redux を組み合わせて最新のフロントエンド状態管理手法を習得しよう！ 完了
• React 公式チュートリアル 完了

今日やったこと

• りあクト！ TypeScriptで始めるつらくないReact開発 第4章 TypeScriptで型をご安全に

りあクト！ TypeScriptで始めるつらくないReact開発 第4章 TypeScriptで型をご安全に

ざっくりサマリー

型の名前と型合成

• 型エイリアス

  • 任意の型に別名をあたえられる
• インターフェース文は型の宣言

• インターフェースはプロパティの型定義を追加していくことができる

  • どこからでも定義を拡張できてしまうのであまりよくない
• 型エイリアスのほうが表現力も高く,バグも入りにくいので型エイリアスを使ったほうが良い

• ユニオン型(共用体型)

  • |(パイプ)で型を並べることで複合的な型を定義できる
  • let id: number | string ← 数値型でも文字列型でも許容される

• インターセクション型(交差型)

  • &で型を並べて複数の型を一つに結合させる
  • オブジェクト型で使われる
  • インターセクション型を使えばインターフェース拡張のextendsと同等のことが可能

• 型のNull安全を使うには設定が必要

  • tsconfig.jsonでstrictNullChecksを設定してやる必要がある
• nullを許容したいときはユニオン型で明示的に表現してやる

• 非Nullアサーション演算子

  • nullもundefinedが入る可能性があっても強制的にコンパイルできるようにする

  • 基本的には使わないように

    さらに高度な型表現

• 型のコンテキストで用いると

  • typeof演算子 → 型を抽出できる
  • in演算子 → 各要素の型の値を抜き出してマップ型を作る
• keyof演算子 → オブジェクトからキーの肩を抽出できる

• Constアサーション

  • 定数としての方注釈を付与

• ユーティリティ型

  ・Partial<T> … T のプロパティをすべて省略可能にする
  ・Required<T> … T のプロパティをすべて必須にする
  ・Readonly<T> … T のプロパティをすべて読み取り専用にする

  • オブジェクト型から取捨選択できるユーティリティ型

    ・Pick<T,K> … T から K が指定するキーのプロパティだけを抜き出す
    ・Ommit<T,K> … T から K が指定するキーのプロパティを省く

  • 列挙的な型から取捨選択できるユーティリティ型

    ・Extract<T,U> … T から U の要素だけを抜き出す
    ・Exclude<T,U> … T から U の要素を省く

  • null非許容にするユーティリティ型

    ・NonNullable<T> … T から null と undefined を省く

  • 関数を扱うユーティリティ型

    ・Parameters<T> … T の引数の型を抽出し、タプル型で返す
    ・ReturnType<T> … T の戻り値の型を返す

• 関数のオーバーロード

  • TSオーバーロードできるけど関数の実装は一つの関数に集約される

まとめ

当たり前だけど,Javaとは少し違うのでちょっとずつ難しく感じるようになってきました。
実際にTypeScriptを使っていかないと慣れなそうですね。
もう少しでパート1が終わりそう。
時間めっちゃかかってますね。
アウトプットしつつ読んだほうが効率良いんだろうか…

それではまた明日。