まくろぐ

TypeScriptの型: オブジェクトの特定のプロパティをオプショナルにする

更新:
作成:

プロパティに?を付けるとオプショナルになる

TypeScript でオブジェクトの型情報を定義するとき、プロパティ名に ? を付けると、そのプロパティの有無を問わない(つまりオプショナルプロパティ)であることを示すことができます。

例えば、下記の変数 x は、name プロパティと age プロパティを持つ型のオブジェクトとして定義していますが、age プロパティには ? が付けられているので、age プロパティを持たない値も、変数 x に格納することができます。

let x: { name: string, age?: number };
x = { name: 'Maku', age: 5 };  // OK
x = { name: 'Maku' };  // OK

もし、age プロパティに ? を付けていないと、2 つ目の代入文はエラーになります。

次のように、オブジェクトの型情報をインタフェースとして定義してしまう場合も同様です。

interface User {
  name: string;
  age?: number;
}

let x: User;
x = { name: 'Maku', age: 5 };  // OK
x = { name: 'Maku' };  // OK

オプショナルなプロパティを定義する代わりに、特定の値(例えば -1)を、値がないことを示すために使用するという方法もありますが、プロパティ自体格納しない方が分かりやすいでしょう。 オブジェクトが、あるプロパティを保持しているかどうかを調べるには、次のように in を使用します。

if ('age' in obj) {
  // オブジェクト obj は age プロパティの値を持つ
}

使用例

次の getUser 関数は、name プロパティと age プロパティを持つ User オブジェクトを返す関数ですが、場合によっては age プロパティを持たないオブジェクトを返すことを示しています。

interface User {
  name: string;
  age?: number;  // age プロパティはオプショナル
}

function getUser(withAge: boolean): User {
  return withAge ? {name: 'Maku', age: 5} : {name: 'Maku'};
}

// main
const user = getUser(true);
console.log(`name = ${user.name}`);
if ('age' in user) {
  console.log(`age = ${user.age}`)
}

関連記事

まくろぐ
サイトマップまくへのメッセージ