ペロハム大学

ﾔﾙｿﾞｰ

プロを目指す人のためのTypeScript入門 読書メモ⑨ 第6章（1）

TypeScript

■ 思ったこと

いよいよ骨太ナンバーワン、第6章よ！！がんばるZ！！

■ 第6章 高度な型（6.1～6.1.6）

ユニオン型

  • 例えばUser型はT型が入ることもあるし、U型が入ることもある
  • T | UでT型またはU型を表せる！いくつ書いてもOK
  • ・・ただ、User型にはどっちが入ってるか分からなくなる！
  • 存在しないプロパティにアクセスする可能性があるとエラーになる
type Animal = {
  name: string;
  species: string;
  age: string;
};
type Human = {
  name: string;
  age: number;
};
type Performer= Animal | Human;

const rappy: Performer = {
  name: "Rappy",
  species: "rabbit",
  age: "2",
}
const akira: Performer = {
  name: "Akira Kawashima",
  age: 43,
}

const gerSpecies = (performer: Performer): string => {
  // ここでエラーになる
  // プロパティ 'species' は型 'Performer' に存在しません。
  // プロパティ 'species' は型 'Human' に存在しません。
  return performer.species;
}
  • ちなみに上の例でageプロパティは「string | number」型！

インターセクション型（交差型）

  • T ＆ UでT型であり、かつ！U型を表せる！こちらも複数書いてOK
  • こんな感じでtype T= U & {}やるとT型にU型が重複なしで結合されたがごとく！

オプショナルプロパティ再び

  • 復習！オプショナルなプロパティって型名?: 型これ！
  • こいつぁ必ずundefinedとのユニオン型になる
  • でも、型名?: 型と型名: 型 | undefinedは意味が違うとな、、そうなの！？
  • 前者は値自体がなくてもオッケーだが、後者はないならundefined入れないとダメ
  • 型名?: 型は値を入れないことでundefinedを示せるってことだけど、ワンチャン書き忘れかもしれんし、型名: 型 | undefinedのように明示的に入れてあげた方が親切かも？

オプショナルチェイニング

  • プロパティアクセスの亜種、式を作る構文！
  • obj?.hogeみたいにできる。オブジェクトがnullやundefinedでもOKなのが特徴
  • これ入ってたらOKだけどundefinedなら処理しないよ、がif文書かずともカンタンに！
  • 関数呼び出し、メソッド呼び出しでも使える。?.()で処理があるときだけ実行できるのだ
    • とても便利だけど、es2020だと実行時エラーになった。調べると、es2018なら使えるみたい。フーム？
  • 一度?を書いたらそれ以降のプロパティアクセス！関数呼び出し！メソッド呼び出し！すべてすっ飛ばす！！だから、func?.().toStringなんて書いても問題ないぜ

■ 感想

知ってるようで知らなったユニオン型の挙動いろいろ…この本はほんとにわかりやすい！！