[TypeScript] オブジェクト型の型宣言をマスターしよう！

初めに

オブジェクト型の型宣言についてマスターしていきましょう！

【目次】

まずは基本的な型宣言をマスターしよう！
オブジェクト型の型宣言をマスターしよう！ ←🈁
関数の型定義をマスターしよう！
配列をマスターしよう！
インターフェースをマスターしよう！
クラスを使いこなそう！
型修飾子についての理解を深めよう！
ジェネリックをマスターしよう！
独自の構文拡張をマスターしよう！

---

基本的な型宣言

let sampleObj: {
  prop1: string, 
  prop2: number
}

type SampleObj = {
  prop1: string,
  prop2: number
}

let obj: SampleObj;

obj = {
  prop1: "str",
  prop2: 1234
}

---

ネストされたオブジェクト型の場合

type SampleObj = {
  nested: NestedObj,
  prop1: string
}

type NestedObj = {
  prop1: string,
  prop2: number
}

let obj: SampleObj = {
  nested: {
    prop1: "nested",
    prop2: 1234
  },
  prop1: "SampleObj"
}

---

オプショナルプロパティ

TypeScriptのオブジェクトは基本的に全てのプロパティへの値格納が必須です。
但し、プロパティ名の末尾に : を付与することで省略可能プロパティとして宣言することができます。

type OptionalObj = {
  prop1: string,
  optionalProp?: number
}

// OK
let sampleA: OptionalObj = {
  prop1: "str",
  optionalProp: 1234
}

// OK
let sampleB: OptionalObj = {
  prop1: "str",
}

---

オブジェクト型の合併型

オブジェクト型についても合併型を用いることができます。

​​type ObjA = {
  prop1: string,
  prop2: number,
  type: "A"
}

type ObjB = {
  prop1: string,
  prop3: number,
  type: "B"
}

let objA: ObjA = {
  prop1: "str",
  prop2: 1234,
  type: "A"
}

let objB: ObjB = {
  prop1: "str",
  prop3: 1234,
  type: "B"
}

let sampleObj: ObjA | ObjB = Math.random() > 0.5 ? objA : objB;

// 通常の合併型と同様両データ型が持ちうるプロパティのみ呼び出し可能
sampleObj.prop1 // OK
sampleObj.prop2 //NG

オブジェクトの絞り込み

変数が取りうるデータ型を絞り込むことで、特定のデータ型のみが持つプロパティを呼び出すことが可能です。

if (sampleObj.type === "A") {
  sampleObj.prop2
} else {
  sampleObj.prop3
}

このようにオブジェクトのtype（リテラル型）で絞り込むデザインパターンをdiscriminated unionという。
https://typescriptbook.jp/reference/values-types-variables/discriminated-union

---

交差型

以下の定義で、複数のデータ型を同時に満たす型を定義できる。
データ型A & データ型B

type ObjFirst = {
  prop1: string,
  prop2: number,
}

type ObjSecond = {
  prop1: string,
  prop3: number,
}

// 交差型の定義
type ObjFirstAndSecond = ObjFirst & ObjSecond;

// ObjFirst, ObjSecondを組み合わせたデータ定義となる
let sampleObj: ObjFirstAndSecond = {
  prop1: "str",
  prop2: 1234,
  prop3: 4567
}

---

まとめ

以上です！
次節として、配列に関する記事を公開しておりますので、よろしければご覧ください🙏