型のバリエーション

ポモドーロテクニックは25分間集中して5分休憩する、ということだけど、25分ってけっこうあっという間だよなーと思っていた。今日「50分集中して10分休憩」というソリューションを教わったので、昼間さっそく実践してみようと思う。ちなみに朝活も50分間。

さて今日もがんばりましょう！！

・ number ・ string ・ boolean ・ symbol ・ null ・ undefined

0、’’（空文字）、null、undefined が false、それ以外は true

strictNullChecks オプションを有効にすると、厳密な Null 安全性を保証する。（tsconfig.json で設定する）

VSCodeだと、任意の変数の上にカーソルをホバーさせたときにポップアップで型を教えてくれる！

never

const greet = (friend: 'serval' | 'caracal' | 'cheetah') => {
  switch (friend) {
    case 'serval':
      return 'Hello, Serval!';
    case 'caracal':
      return 'Hello Caracal!';
    case 'cheetah':
      return 'Hello Cheetah!';
    default:
      const check: never = friend;
  }
};

console.log(greet('serval'));    // Hello, Serval!

このコードから case 'cheetah ではじまる2行を削除すると、コンパイルエラーが起きる。

配列とオブジェクト

型は合成できる

interface Foo { hoge?: number, fuga: string };
interface Bar { hoge: number };
interface Buz { piyo: string };

type FooBar1 = Foo & Bar;    // 交差型
type FooBar2 = Foo | Bar;    // 共用体型
type FooBuz1 = Foo & Buz;
type FooBuz2 = Foo | Buz;

Reactではコンポーネントの引数の型合成を行うことが多い。同じ名前で複数回定義すると、上書きではなく継承されていくので注意。拡張したいときは、型合成を行ってType Alias で穴めをつけるやり方がおすすめとのこと。

constで変数を定義した場合、変数自体の再代入はできないが各要素の上書きや追加はできる。配列やオブジェクトの中身までイミュータブルにしたい場合、readonly をつける。

const arr1: ReadonlyArray<string> = ['foo', 'bar'];
const arr2: readonly string[] = ['foo', 'bar'];