TypeScriptの「こういう時ってどう書くの？」

Utility Typesを理解

こういう時ってどう書くの？って時にめっちゃ使います。
大抵のものが解決できると思っています(大ごと)

特にPickやらOmitやらはよく使う印象です。

▼ 超参考になる記事

配列編

下記コードを例に説明していきます。

example.ts

const cheeseList = ['モッツアレラ', 'チェダー', 'カマンベール'] as const;

何番目のリテラル型が欲しい

// type Mozzarella = 'モッツアレラ'
type Mozzarella = typeof cheeseList[0];

配列のユニオン型をつくりたい

// type CheeseList = "モッツアレラ" | "チェダー" | "カマンベール
type CheeseList = typeof cheeseList[number];

as const はすべての値をreadonlyにします。
つまり、変更不可になるため、より厳格な型定義がされるためユニオン型を実現することができます。

オブジェクト編

下記コードを例に説明していきます。

example.ts

const cheeseObj = {
  mozzarella: {
    name: 'モッツアレラ',
    productionArea: 'Italia',
  },
  cheddar: {
    name: 'チェダー',
    productionArea: 'England',
  },
} as const;

入れ子になっているオブジェクトの型を取り出したい

// type Mozzarella = { name: 'モッツアレラ', productionArea: 'Italia' }
type Mozzarella = typeof cheeseObj['mozzarella'];

オブジェクトのキーのユニオン型が欲しい

// type CheeseList = "mozzarella" | "cheddar"
type CheeseList = keyof typeof cheeseObj;

オブジェクトの値のユニオン型が欲しい

これは自作する必要があります。

export type valueOf<T> = T[keyof T];

▼ 参考

const colors = {
  red: '#f00'
  blue: '#00f'
} as const;

// type Color = "#f00" | "#00f"
type Color = valueOf<typeof colors>;

ジェネリクス活用編

ジェネリクスは難しく思えるかもしれませんが、

• 型に引数を持たせる(<(引数)>で渡してあげる)
• 引数の型に制限を持たせる(<T extends 〇〇>)

これらを組み合わせているだけです。

渡した型と同じ型を返す

複雑な処理の過程で、returnのタイプの抽象度が上がってしまう場合において使います。

const sameTypeArray = <T>(list: T[]): T[] => {
  // いろんな処理
  return formattedList
};

// エラーにならない
sameTypeArray(['one', 'two', 'three']).map((item) => item.toUpperCase());

// エラーになる
sameTypeArray([1, 2, 3]).map((item) => item.toUpperCase());

上の処理のTは、○型か△型しか受け付けない

このような時はextendを使います。

type ArrayType = number | string;
const sameTypeArray = <T extends ArrayType>(list: T[]): T[] => {
  // いろんな処理
  return formattedList
};

▼ 参考

never活用編

Aの時はBを持たなくて、Bの時はAを持たない

type Link = {
  onClick?: never;
  href: string;
};

type Click = {
  onClick: () => void;
  href?: never;
};

type ButtonProps = Link | Click;


// エラーがでない
const buttonPropsOnClick: ButtonProps = {
  onClick: () => {
    console.log('link');
  },
};

// エラーがでない
const buttonPropsLink: ButtonProps = {
  href: 'https://example.com',
};

// エラーがでる
const buttonProps: ButtonProps = {
  href: 'https://example.com',
  onClick: () => {
    console.log('link');
  },
};

---

今後、「こういう時ってどう書くの？」と悩んだ時に追記していきます！！