TypeScript で nullish coalescing 演算子を使用してネストプロパティのデフォルト値を設定する：Partial 型の活用

2024-05-11

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 を使用すると、次の利点があります。

オブジェクトの特定の部分のみをオプションで設定することができます。
複雑なオブジェクト構造をより簡単に操作することができます。
すべてのプロパティを常に設定する必要がない場合に、コードをより簡潔にすることができます。

設定されていないプロパティは undefined になります。
オブジェクトのすべてのプロパティがオプションであることに注意する必要があります。
オブジェクトの構造が変更される可能性がある場合は注意が必要です。

その他の使用例

Partial は、ネストプロパティ以外にもさまざまな用途に使用できます。たとえば、次のことができます。

TypeScript で Partial を使用すると、複雑なオブジェクト構造をより簡単に操作することができます。Partial を使用すると、オブジェクトの特定の部分のみをオプションで設定したり、オブジェクトの構造が変更される可能性がある場合にコードをより柔軟にしたりすることができます。

以下の例は、TypeScript でネストプロパティに Partial を使用するさまざまな方法を示しています。

例 1: ネストプロパティの一部をオプションにする

interface User {
  name: string;
  address: {
    street: string;
    city: string;
  };
}

const user: Partial<User> = {
  name: 'John Doe',
  address: {
    city: 'New York',
  },
};

例 2: ネストプロパティをすべてオプションにする

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',
  },
};

例 4: ネストプロパティ内のプロパティの型を変更する

interface User {
  name: string;
  address: {
    street: number;
    city: string;
  };
}

const user: Partial<User> = {
  name: 'John Doe',
  address: {
    city: 'New York',
  },
};

TypeScript でネストプロパティに Partial を使用するその他の方法

ネストプロパティに Partial を使用する以外にも、TypeScript で複雑なオブジェクト構造を操作するための方法はいくつかあります。

型ガードを使用すると、ランタイム時にオブジェクトの型を確認することができます。これにより、コードをより安全かつ予測可能にすることができます。

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 演算子 (??) を使用すると、プロパティが存在しない場合または 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

デフォルトパラメータを使用すると、関数の引数にデフォルト値を設定することができます。

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