こんにちは！TypeScriptの世界へようこそ。チーフアーキテクトの私です。
TypeScriptを触り始めたばかりの頃って、次から次へと出てくる見慣れない記号や謎の英単語に圧倒されちゃいますよね。「`string`や`number`はわかるけど、なんだこのカッコいい顔をした `Partial
でも、大丈夫ですよ。今日お話しする `Partial
—
1. `Partial` って、いったいどんな道具？
いきなりコードを書く前に、ちょっと想像してみてください。
あなたは今、お友達の誕生日プレゼントをネット通販で買おうとしています。購入画面には、こんな入力フォームがありました。
- お名前（必須）
- お届け先住所（必須）
- 電話番号（必須）
- ラッピング希望（任意）
- メッセージカード（任意）
このとき、システム側から見ると「お名前」「ご住所」「お電話番号」は絶対に書いてもらわないと困る必須項目ですが、「ラッピング」や「メッセージカード」は、書かれていなくても注文を進められるオプショナル（省略可能）な項目ですよね。
TypeScriptの型定義でも、これと全く同じ状況がよく起こります。
例えば、「ユーザーの情報は、絶対に名前も年齢もメールアドレスも入っていなきゃダメ！」という厳格な型を作ったとします。
// ユーザーの基本データ（全員分の情報が必ず揃っているべき型）
type User = {
name: string;
age: number;
email: string;
};
さて、ここで問題です。
「ユーザーが自分のプロフィール画面で、『メールアドレスだけ』を新しいものに変更したい」と言ってきました。
このとき、変更用のデータを受け取る関数を作ろうとして、先ほどの `User` 型をそのまま使おうとすると……あれ？困ったことになります。
「いやいや、名前と年齢は変えないんだから送ってないよ！ なんでエラーになるの！？」と、TypeScriptの厳しいチェックに怒られてしまうんです。
すべてのプロパティを「マイルド」にする魔法
ここで登場するのが、今回の主役である `Partial
`Partial
先ほどの `User` 型を `Partial
- `name`があってもなくてもOK！
- `age`があってもなくてもOK！
- `email`があってもなくてもOK！
これなら、メールアドレスだけの変更だろうと、名前だけの変更だろうと、エラーを出さずにスマートに受け取れるようになりますよね。
—
2. 実際のコードで動きを見てみよう
百聞は一見にしかず。実際にエディタで書くときのイメージを、丁寧なコメント付きのコードで見てみましょう。
// 1. まずは「完璧な状態のユーザー」の型を定義します（厳格な親分タイプ）
type User = {
name: string;
age: number;
email: string;
};
// 2. プロフィールを更新する関数を作ります
// 引数には「Partial
function updateProfile(updatedData: Partial
console.log(“受け取ったデータ:”, updatedData);
}
// — さあ、使ってみましょう！ —
// 【パターンA】メールアドレスだけ変えたい！
// name や age がなくても、Partialのおかげでエラーになりません
updateProfile({
email: “new-email@example.com”,
});
// 【パターンB】名前と年齢だけ変えたい！
// email がなくてももちろんOKです
updateProfile({
name: “山田 太郎”,
age: 30,
});
// 【パターンC】全部変えたい！
// 全部揃っていても、もちろんエラーにはなりません
updateProfile({
name: “鈴木 花子”,
age: 25,
email: “hanako@example.com”,
});
// 【おまけ】何も渡さない空っぽのオブジェクトでもエラーになりません！
updateProfile({});
どうでしょう？ `Partial
—
3. 初学者がつまずきやすい「落とし穴」と優しいフォロー
ここで、実際に手を動かしている人が「あれ？」とつまずきがちなポイントを、こっそりシェアしておきますね。
つまずきポイント：「無いかもしれない」からこその注意点
`Partial
> 「ねえ、そのプロパティ、送信されてこなくて『undefined（何もない状態）』かもしれないよ？ 本当にそのままで大丈夫？」
例えば、受け取ったデータの長さをそのまま測ろうとすると……
function printUserName(user: Partial
// ⚠️ ここでエラーになることがあります！
// user.name が undefined の可能性があるので、文字数を数えようとすると怒られます
console.log(user.name.length);
}
「いやいや、名前くらいあるでしょ！」と思いたくなりますが、TypeScriptは石橋を叩いて渡る性格です。「もし `user.name` が存在しなかったらどうするの？」と心配してくれているわけですね。
優しく安全に回避する方法
そんなときは、JavaScript/TypeScriptのおしゃれな機能（オプショナルチェイニング `?.` や、値の有無チェック）を使ってあげましょう。
function printUserNameSafe(user: Partial
// 「もし name が存在していれば、その文字数を表示する。なければ undefined にする」
// これなら TypeScript も安心して見守ってくれます
console.log(user.name?.length);
// あるいは、if文でしっかり守ってあげるのも実務では好まれます
if (user.name) {
console.log(`こんにちは、${user.name}さん！`);
}
}
こうした「型が変わることで、安全性の確認もセットで必要になる」という感覚は、最初は少し面倒に感じるかもしれませんが、慣れてくると「バグを未然に防いでくれる心強い相棒」に変わっていきますよ。
—
おわりに
お疲れ様でした！
`Partial
- `Partial
` は、型 `T` のすべてのプロパティを「あってもなくてもいいよ（オプショナル）」にする便利ツール。 - 主にお買い物の入力フォームや、データの「更新（アップデート）処理」で大活躍する。
- プロパティが「ないかもしれない」状態になるので、使うときは `?.` などで優しくチェックしてあげよう。
TypeScriptのユーティリティ型は、最初は呪文のように見えますが、その正体は「私たちの開発をラクにしてくれる親切な大工道具」のようなものです。怖がらずに、まずは手元のコードで色々実験してみてくださいね。
あなたのTypeScriptライフが、少しでも楽しく快適なものになりますように。チーフアーキテクトの私でした！またお会いしましょう。
コメント