メインコンテンツまでスキップ

Partial<T>

Partial<T>は、オブジェクト型Tのすべてのプロパティをオプションプロパティにするユーティリティ型です。

Partial<T>の型引数#

T#

型引数Tにはオブジェクト型を渡します。

Partialの使用例#

typescript
type Person = {
  surname: string;
  middleName?: string;
  givenName: string;
};
type PartialPerson = Partial<Person>;
typescript
type Person = {
  surname: string;
  middleName?: string;
  givenName: string;
};
type PartialPerson = Partial<Person>;

このPartialPersonは次の型と同じになります。

typescript
type PartialPerson = {
  surname?: string;
  middleName?: string;
  givenName?: string;
};
typescript
type PartialPerson = {
  surname?: string;
  middleName?: string;
  givenName?: string;
};

Partialを用いたOptions Objectパターンの例#

PartialをOptions Objectパターンに応用すると、省略可能でありながら見やすい関数を実装できます。

ユーザーの検索をかける関数を作ります。プロパティはそれぞれ引数となっており、対応する引数に値を与えると検索ができる関数findUsers()があるとします。ここでは例のため引数を

typescript
type User = {
  surname: string;
  middleName?: string;
  givenName: string;
  age: number;
  address?: string;
  nationality: string;
  createdAt: string;
  updatedAt: string;
};
function findUsers(
  surname?: string,
  middleName?: string,
  givenName?: string,
  age?: number,
  address?: string,
  nationality?: string
): Promise<User[]> {
  // ...
}
typescript
type User = {
  surname: string;
  middleName?: string;
  givenName: string;
  age: number;
  address?: string;
  nationality: string;
  createdAt: string;
  updatedAt: string;
};
function findUsers(
  surname?: string,
  middleName?: string,
  givenName?: string,
  age?: number,
  address?: string,
  nationality?: string
): Promise<User[]> {
  // ...
}

ですが、このfindUsers()のシグネチャだと年齢だけがXX才のユーザーが欲しい時は引数の順番を維持するために他の引数はundefinedを入力しなければいけません。

typescript
findUsers(undefined, undefined, undefined, 22);
typescript
findUsers(undefined, undefined, undefined, 22);

この例では引数は6個しかなくage以降の引数は省略できるためそこまで見辛くありませんが、多い引数の関数になるとどこが対応する引数なのかを探すだけでも面倒です。これをPartial<T>を使って見た目をよくできます。

まず引数はすべてオブジェクトで受け渡しされるものとしてそのオブジェクトの型を定義します。さらにプロパティを省略可能にするためにPartial<T>をつけます。

typescript
type FindUsersArgs = Partial<User>;
typescript
type FindUsersArgs = Partial<User>;

これを関数findUsers()の引数にします。

typescript
function findUsers({
  surname,
  middleName,
  givenName,
  age,
  address,
  nationality,
}: FindUsersArgs): Promise<User[]> {
  // ...
}
typescript
function findUsers({
  surname,
  middleName,
  givenName,
  age,
  address,
  nationality,
}: FindUsersArgs): Promise<User[]> {
  // ...
}

これだけではまだ呼び出し側は省略ができません。findUsers()を使用する時は仮に何も設定する必要がなくても引数に{}を与えなければいけません。

typescript
findUsers({});
typescript
findUsers({});

引数を省略できるようにするためにデフォルト引数を使い省略時に{}が代入されるようにします。

typescript
function findUsers({
  surname,
  middleName,
  givenName,
  age,
  address,
  nationality,
}: FindUsersArgs = {}): Promise<User[]> {
  // ...
}
findUsers();
findUsers({ age = 22 });
typescript
function findUsers({
  surname,
  middleName,
  givenName,
  age,
  address,
  nationality,
}: FindUsersArgs = {}): Promise<User[]> {
  // ...
}
findUsers();
findUsers({ age = 22 });

FindUsersArgsの右の= {}がそれにあたります。これによりfindUsers()は引数がなくても呼び出せるようになります。特定の引数だけ値を指定することもできます。findUsers({ age = 22 })がその例です。

さらにFindUsersArgs側にもデフォルト型を設定することで初期値することもできます。

typescript
function findUsers({
  name = "John Doe",
  nationality = "Araska",
  age = 22,
}: FindUsersArgs = {}): Promise<User[]> {
  // ...
}
typescript
function findUsers({
  name = "John Doe",
  nationality = "Araska",
  age = 22,
}: FindUsersArgs = {}): Promise<User[]> {
  // ...
}

関連情報#