TypeScript で nullish coalescing 演算子を使用してネストプロパティのデフォルト値を設定する：Partial 型の活用
TypeScript でネストプロパティに Partial を使用する
TypeScript でネストプロパティに Partial を使用すると、オブジェクトの特定の部分のみをオプションで設定することができます。これは、複雑なオブジェクト構造を持つ場合や、すべてのプロパティを常に設定する必要がない場合に役立ちます。
例
interface User {
name: string;
address: {
street: string;
city: string;
};
}
const user: Partial<User> = {
name: 'John Doe',
address: {
city: 'New York',
},
};
この例では、User インターフェースは name と address という 2 つのプロパティを持つオブジェクトを表します。address プロパティは、street と city という 2 つのプロパティを持つ別のオブジェクトです。
Partial<User> は、User インターフェースのすべてのプロパティがオプションであることを意味する型です。つまり、user オブジェクトには name と address の両方のプロパティを設定する必要はありません。
user オブジェクトには name と address.city のみが設定されています。address.street は設定されていないため、undefined になります。
Partial を使用する利点
Partial を使用すると、次の利点があります。
- すべてのプロパティを常に設定する必要がない場合に、コードをより簡潔にすることができます。
- 複雑なオブジェクト構造をより簡単に操作することができます。
- オブジェクトの特定の部分のみをオプションで設定することができます。
Partial を使用するときは、次の点に注意する必要があります。
- オブジェクトの構造が変更される可能性がある場合は注意が必要です。
- オブジェクトのすべてのプロパティがオプションであることに注意する必要があります。
- 設定されていないプロパティは
undefinedになります。
Partial は、ネストプロパティ以外にもさまざまな用途に使用できます。たとえば、次のことができます。
- オブジェクトのプロパティの型を変更することができます。
例 1: ネストプロパティの一部をオプションにする
interface User {
name: string;
address: {
street: string;
city: string;
};
}
const user: Partial<User> = {
name: 'John Doe',
address: {
city: 'New York',
},
};
interface User {
name: string;
address?: {
street: string;
city: string;
};
}
const user: User = {
name: 'John Doe',
};
address プロパティはオプションであるため、user オブジェクトには address プロパティを設定する必要はありません。
例 3: ネストプロパティ内の特定のプロパティを必須にする
interface User {
name: string;
address: {
street: string;
city: string;
};
}
const user: Partial<User> = {
name: 'John Doe',
address: {
city: 'New York',
},
};
Partial<User> は、User インターフェースのすべてのプロパティがオプションであることを意味する型です。ただし、address.city プロパティは必須であるため、user オブジェクトには address.city プロパティを設定する必要があります。
例 4: ネストプロパティ内のプロパティの型を変更する
interface User {
name: string;
address: {
street: number;
city: string;
};
}
const user: Partial<User> = {
name: 'John Doe',
address: {
city: 'New York',
},
};
型ガード
型ガードを使用すると、ランタイム時にオブジェクトの型を確認することができます。これにより、コードをより安全かつ予測可能にすることができます。
interface User {
name: string;
address: {
street: string;
city: string;
};
}
const user: Partial<User> = {
name: 'John Doe',
address: {
city: 'New York',
},
};
if ('street' in user.address) {
console.log(user.address.street); // 'undefined'
} else {
console.log('Street property is not defined');
}
この例では、user.address.street プロパティが存在するかどうかを確認するために型ガードを使用しています。street プロパティが存在する場合、その値をコンソールに出力します。そうでなければ、Street property is not defined というメッセージを出力します。
オプションチェーン演算子
オプションチェーン演算子 (?.) を使用すると、プロパティが存在しない場合にエラーが発生しないようにすることができます。
interface User {
name: string;
address: {
street: string;
city: string;
};
}
const user: Partial<User> = {
name: 'John Doe',
address: {
city: 'New York',
},
};
const street = user.address?.street; // undefined
console.log(street); // undefined
この例では、オプションチェーン演算子を使用して user.address.street プロパティの値を取得しています。street プロパティが存在しない場合、undefined が返されます。
nullish coalescing 演算子
nullish coalescing 演算子 (??) を使用すると、プロパティが存在しない場合または null または undefined である場合にデフォルト値を返すことができます。
interface User {
name: string;
address: {
street: string;
city: string;
};
}
const user: Partial<User> = {
name: 'John Doe',
address: {
city: 'New York',
},
};
const street = user.address?.street ?? 'No street'; // 'No street'
console.log(street); // No street
この例では、nullish coalescing 演算子を使用して user.address.street プロパティの値を取得しています。street プロパティが存在しない場合または null または undefined である場合、No street という文字列が返されます。
デフォルトパラメータ
デフォルトパラメータを使用すると、関数の引数にデフォルト値を設定することができます。
function getUserAddress(user: Partial<User>): string {
const street = user.address?.street ?? 'No street';
const city = user.address?.city ?? 'No city';
return `${street}, ${city}`;
}
const user: Partial<User> = {
name: 'John Doe',
address: {
city: 'New York',
},
};
const address = getUserAddress(user); // 'No street, New York'
console.log(address); // No street, New York
この例では、getUserAddress 関数を作成して、ユーザーの住所を取得します。street と city パラメータにはデフォルト値が設定されているため、ユーザーの住所オブジェクトにこれらのプロパティが存在しない場合でも、関数は有効な住所を返すことができます。
これらの方法はすべて、TypeScript でネストプロパティを操作するために使用できます。どの方法を使用するかは、特定のニーズによって異なります。
- 型ガード は、コードをより安全かつ予測可能にするために使用できます。
typescript
