この記事は何？
この記事は、Utility Typesの一つであるPartialについて深く理解する記事です。
Utility Typesってそもそも何？という型（方）は以下の記事を御覧ください🙇🏻
👉 TypeScriptのUtility Typesを理解して活用する
そもそも、TypeScriptって何？って型は以下を御覧ください
👉 JavaScriptを知っている方がTypeScriptをなんとなく理解するための記事① ~はじめに~
Partial＜Type＞とは
TypeScript公式には以下のように書かれています。
Constructs a type with all properties of Type set to optional. This utility will return a type that represents all subsets of a given type.
Typeのすべてのプロパティがオプションに設定されたタイプを構築します。このユーティリティは、指定されたタイプのすべてのサブセットを表すタイプを返します。
https://www.typescriptlang.org/docs/handbook/utility-types.html#partialtype
つまり、どういうことかというと、
ある型について、全てオプショナル（その型を使っても使わなくても良い）にしてしまうもの、ということです。
具体的に、コードで見ていきましょう。
まずは、Partialを使わない場合です
interface digitalMonsters {
name: string;
nextGrade: string;
level: number;
}
// プロパティ'level'がタイプ '{name：string; nextGrade：文字列;}にありません。タイプ'digitalMonsters'では必須です。
const agumon: digitalMonsters = {
name: "agumon",
nextGrade: "gureimon",
}
level: number;がないので当然アウト🙅です。
次は、Partialを使った場合です。
interface digitalMonsters {
name: string;
nextGrade: string;
level: number;
}
type looseDigitalMonsters = Partial<digitalMonsters>;
// levelがなくてもOK
const looseAgumon: looseDigitalMonsters = {
name: "agumon",
nextGrade: "gureimon",
}
// nameもlevelがなくてもOK
const looseAgumon2: looseDigitalMonsters = {
nextGrade: "gureimon",
}
// nameもnextGradeがなくてもOK
const looseAgumon3: looseDigitalMonsters = {
level: 3,
}
このようにPartial<Type>を通すと、各プロパティを指定してもしなくても良い状態になります。
型定義としては少しゆるい状態になりますので、取り扱いには注意が必要そうです。
また、以下のように使うと理解が深まるかもしれません。
interface digitalMonsters {
name: string;
nextGrade: string;
level: number;
}
interface Ability {
offensivePower: number,
defensePower: number
}
type looseDigitalMonsters = digitalMonsters & Partial<Ability>;
// OK
const looseAgumon: looseDigitalMonsters = {
name: "agumon",
nextGrade: "greimon",
level: 3,
offensivePower: 100,
}
type strictDigitalMonsters = digitalMonsters & Ability;
// タイプ'{name： string; nextGrade： string; level： number; }'は、タイプ'Ability'から次のプロパティが欠落しています： offensivePower, defensePower
const strictAgumon: strictDigitalMonsters = {
name: "agumon",
nextGrade: "greimon",
level: 3,
}
React&TypeScriptなどで使いたい場合は、以下のように書けば良さそうです。
type Props = digitalMonsters & Partial<Ability>;
const digitalMonsterList: React.FC<Props> = (props) => {
...
}
おわりに
今回は、Partialについて書いてみました。
是非、ご活用ください！