TypeScriptオブジェクト型詳解

Typescriptにおけるオブジェクトのキーと値の型

Typescriptでは、オブジェクトのキーと値それぞれの型を指定することができます。これにより、コードの型安全性と読みやすさを向上させることができます。

キーと値の型を指定する方法

1. インデックスシグネチャー
   

   • オブジェクトのキーの型と値の型を直接指定します。
   • 任意のキーに対して同じ型の値を持つオブジェクトを表現できます。

   interface Person {
       [key: string]: string | number;
   }
   
   const person: Person = {
       name: "Alice",
       age: 30
   };
   

2. マッピング型
   

   • 既存の型から新しい型を生成する際に、キーと値の型を変更します。
   • 複雑なオブジェクト構造を定義する際に便利です。

   type Readonly<T> = {
       readonly [P in keyof T]: T[P];
   };
   
   interface Point {
       x: number;
       y: number;
   }
   
   const readonlyPoint: Readonly<Point> = {
       x: 10,
       y: 20
   };
   

キーと値の型を活用する場面

• オブジェクト操作の型安全性
  
• カスタム型の実装
  
• APIレスポンスの型定義
  

interface Person {
    [key: string]: string | number;
}

const person: Person = {
    name: "Alice",
    age: 30
};

• personオブジェクトは、Personインターフェースの条件を満たしています。
• Personインターフェースは、任意の文字列キーに対して文字列または数値の値を持つオブジェクトを定義します。

type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};

interface Point {
    x: number;
    y: number;
}

const readonlyPoint: Readonly<Point> = {
    x: 10,
    y: 20
};

• readonlyPointオブジェクトは、Pointインターフェースのすべてのプロパティが読み取り専用になっています。
• Pointインターフェースは、xとyのプロパティを持つオブジェクトを定義します。
• Readonly<T>マッピング型は、既存の型Tのすべてのプロパティを読み取り専用にします。

interface ApiResponse {
    data: {
        id: number;
        name: string;
    };
    message: string;
}

const response: ApiResponse = {
    data: {
        id: 1,
        name: "John Doe"
    },
    message: "Success"
};

• ApiResponseインターフェースは、APIレスポンスの構造を定義しています。

TypeScriptオブジェクト型詳解

TypeScriptでは、オブジェクト型を柔軟に定義し、コードの型安全性と読みやすさを向上させることができます。以下は、オブジェクト型に関する重要な概念です。

• ジェネリック型
  任意の型を受け取り、それに基づいて新しい型を生成する型です。
• 型エイリアス
  既存の型に新しい名前を付けるための型です。
• クラス
  オブジェクトの構造と振る舞いを定義する型です。
• インターフェース
  オブジェクトの構造を定義する型です。

インデックスシグネチャーの代替: Record<K, T>型

• インデックスシグネチャーと同様の機能を提供します。
• Record<K, T>型は、キーの型Kと値の型Tを指定してオブジェクト型を定義します。

interface Person {
    [key: string]: string | number;
}

// 以下と同等です
type Person = Record<string, string | number>;

マッピング型の代替: Partial<T>, Required<T>, Readonly<T>

• Partial<T>型は、既存の型Tのすべてのプロパティをオプションにします。

interface Point {
    x: number;
    y: number;
}

// 以下と同等です
type PartialPoint = Partial<Point>;
type RequiredPoint = Required<Point>;
type ReadonlyPoint = Readonly<Point>;

キーと値の型を活用する場面: 型ガード

• typeof演算子やカスタム型ガード関数を使用して、オブジェクトのキーや値の型を判定することができます。
• 型ガードは、変数の型を特定し、それに応じた処理を行うための手法です。

function isPerson(obj: any): obj is Person {
    return typeof obj === "object" &&
           obj.hasOwnProperty("name") &&
           typeof obj.name === "string" &&
           obj.hasOwnProperty("age") &&
           typeof obj.age === "number";
}

• マッピング型の代替
  カスタムマッピング型を作成して、より複雑な型変換を実現することもできます。
• クラスの代替
  インターフェースと関数型を使用して、クラスに似た構造を表現することもできます。
• インターフェースの代替
  型エイリアスやジェネリック型を使用して、オブジェクト型を定義することもできます。