【TypeScript】オブジェクトのプロパティ名の末尾にある「？」について解説します。

TypeScript

【TypeScript】オブジェクトのプロパティ名の末尾にある「?」について解説します。

※本記事は広告が含まれる場合があります。

なやむくん
オブジェクトのプロパティ名の末尾にある「？」の意味がわからない…。

などの疑問や悩みを解決してまいります。

以下のTypeScript のコードがあるとします。

interface getRequestParams {
  headers?: AxiosHeaders;
  params?: Object;
  domain?: string;
}
なやむくん
「？」がついているのですが、どのような意味があるのでしょうか。
みつた
特にTypeScriptをまだ学習し始めの方や経験が浅かったりすると、知っている方は少ないかもしれませんね。

今回の記事ではこのオブジェクト内のプロパティ名の末尾にある「?」についての解説をしていきます。

オプショナルプロパティ

「?」が末尾にあるプロパティは、オプショナルプロパティと呼ばれるプロパティになります。

例えば以下のinterfaceを見てください。

interface OptionalProperty {
  name: string;
  age: number;
  email: string;
}

OptionalProperty型にはname、age、emailとそれぞれのプロパティと型情報が記述されています。

typeやinterfaceを使用する場合、記述されている内容と同じプロパティが記述されていないと型エラーが起きてしまいます。

const optionalProperty: OptionalProperty = {
  name: "mitsuta",
  age: 30
}

// プロパティ 'email' は型 '{ name: string; age: number; }' にありませんが、型 'OptionalProperty' では必須です。
みつた
つまりinterfaceに記述されているプロパティは必須ということになります。
なやむくん
TypeScriptは厳しいです…。

しかし、以下のように「？」を記述することでオプショナルプロパティとなり任意プロパティとすることができます。

interface OptionalProperty {
  name: string;
  age: number;
  email?: string; // オプショナルプロパティに変更
}

任意プロパティとなるため必須の制限がなくなり、先程起きていた型エラーが起きなくなります。

const optionalProperty: OptionalProperty = {
  name: "mitsuta",
  age: 30
}

// エラーが表示されなくなる
よろこびくん
おぉ！便利ですね！
みつた
確かに便利ですが、なんでもかんでもオプショナルプロパティにはせず適切な箇所で使用するのがポイントです！

まとめ

ここまで読んでいただきありがとうございました。

今回の記事のまとめです。

ポイント

  • 「？」が末尾にあるプロパティはオプショナルプロパティと呼ばれる
  • オプショナルプロパティは任意プロパティとして定義することができる

-TypeScript