Zenn
🔨

【TS】Utility Typesを使ってこれやりたい集 〜オブジェクト型〜

2023/04/10に公開
JavaScript
Next.js
React
TypeScript
tech

これは何？

ReactとTypescriptを使って、小規模のアプリケーションを作成しながらキャッチアップを行っているのですが、その中でもTypescriptのタイプエラーが連発し、型のエラーを直すことに時間が割かれ、本来の開発に集中できない時が多々ありました。
そのため、Typescriptのキャッチアップの一環として、使えそうなUtility Typesについてまとめました。

プロパティを読み取り専用にしたい（Readonly<Type>）

Type型のすべてのプロパティにreadonlyがマップされ、読み取りのみ可能になる。
そのため、プロパティへの再代入はできなくなる。

あるタイミングで、初めに定義した値を不変にしたいケースに使用できそう。

interface Todo {
  id: number,
  name: string,
  status: boolean
}

	
const todo: Readonly<Todo> = {
  id: 1,
  name: 'ヨガ',
  status: true,
}

// Cannot assign to 'name' because it is a read-only property.(2540)のエラーが測れる
todo.name = 'ランニング'

ある型から必要なプロパティだけ抽出して型を定義したい （Pick<Type, Keys>）

Type型から必要なプロパティ（Key）を選択し、新しい型として定義できる。

interface Todo {
  id: number,
  name: string,
  status: boolean
}

// pickedHabitは { id: number; name: string }の型になる
type pickedHabit = Pick<Todo, "id" | "name">

ある型から不要なプロパティだけ取り除いて型を定義したい （Omit<Type, Keys>）

Pickとは逆で、ある型から取り除きたいプロパティ「Key」を選択し、選択したプロパティ以外を新しい型として定義できる。

interface Todo {
  id: number,
  name: string,
  status: boolean
}

// omittedHabitは { status: boolean }の型になる
type omittedHabit = Omit<Todo, "id" | "name">

ある型のプロパティを全て必須プロパティにして使いたい（Required<Type>）

プロパティがOptional(任意)になっている型を、全て必須にして新しい型を定義することができる。

interface Todo {
  id?: number,
  name?: string,
  status?: boolean
}

type partialType = Required<Todo>
// 以下のようにオプショナル(?)がなくなっている
	
type requiredType = {
    id: number;
    name: string;
    status: boolean;
}

ある型のプロパティを全て任意のプロパティにして使いたい（Partial<Type>）

Required<Type>の逆で、プロパティが必須になっている型を、全てOptional(任意)にして新しい型を定義することができる。

interface Todo {
  id: number,
  name: string,
  status: boolean
}

type partialType = Partial<Todo>

// 以下になっている
type partialType = {
    id?: number | undefined;
    name?: string | undefined;
    status?: boolean | undefined;
}

考察

これらのUtility Typesを使うことで、元となっているドメインの型の一部のプロパティだけ必要なケースであったり、プロパティを変更させたくないケースがある際に、わざわざinterfaceやtypeで新しく型定義せずとも実現できるように見えます。
さらに、元の型が何であるかが追いやすくなるのではと思いました。

今後は、開発する際にUtility Typesを使うタイミングを見計らいながら開発していきたいと思います。

Discussion