Partial<T>

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

Partial<T>の型引数

T

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

Partialの使用例

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

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

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

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

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

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

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

📄️ キーワード引数とOptions Objectパターン

JavaScriptやTypeScriptの関数には、Pythonにあるキーワード引数のような機能はありません。その代わり、分割代入引数を応用することで、キーワード引数と同じようなことができます。

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

ts
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
) {
  // ...
}

ts
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
) {
  // ...
}

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

ts
findUsers(undefined, undefined, undefined, 22);

ts
findUsers(undefined, undefined, undefined, 22);

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

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

ts
type FindUsersArgs = Partial<User>;

ts
type FindUsersArgs = Partial<User>;

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

ts
function findUsers({
  surname,
  middleName,
  givenName,
  age,
  address,
  nationality,
}: FindUsersArgs) {
  // ...
}

ts
function findUsers({
  surname,
  middleName,
  givenName,
  age,
  address,
  nationality,
}: FindUsersArgs) {
  // ...
}

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

ts
findUsers({});

ts
findUsers({});

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

ts
function findUsers({
  surname,
  middleName,
  givenName,
  age,
  address,
  nationality,
}: FindUsersArgs = {}) {
  // ...
}
 
findUsers();
findUsers({ age: 22 });

ts
function findUsers({
  surname,
  middleName,
  givenName,
  age,
  address,
  nationality,
}: FindUsersArgs = {}) {
  // ...
}
 
findUsers();
findUsers({ age: 22 });

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

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

ts
function findUsers({
  surname = "Doe",
  givenName = "John",
  nationality = "Araska",
  age = 22,
}: FindUsersArgs = {}) {
  // ...
}

ts
function findUsers({
  surname = "Doe",
  givenName = "John",
  nationality = "Araska",
  age = 22,
}: FindUsersArgs = {}) {
  // ...
}

関連情報

📄️ Required<T>

全プロパティを必須にする