TypeScript インターフェイスをマスターする: 実践的な例を含む包括的なガイド

TypeScript では、インターフェイスはオブジェクトの形状を定義するために使用される強力なツールです。これらは型チェックを強制し、作成したオブジェクトが特定の構造に準拠していることを確認します。ここでは、インターフェイスが一般的に使用されるさまざまなケースを例とともに見ていきます。

1. オブジェクトの形状を定義する

インターフェイスは、オブジェクトの構造を定義するためによく使用されます。これにより、インターフェイスに付着しているすべてのオブジェクトが特定のプロパティを持つことが保証されます。

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

const user: User = {
  name: "John Doe",
  age: 30,
  email: "john.doe@example.com"
};

2. オプションのプロパティ

インターフェイスでは、? を使用してオプションのプロパティを定義できます。シンボル。これは、オブジェクトがそれらのプロパティを持っている場合もあれば持っていない場合もあるということを意味します。

interface Product {
  id: number;
  name: string;
  description?: string; // Optional property
}

const product: Product = {
  id: 1,
  name: "Laptop"
};

3. 読み取り専用プロパティ

プロパティを読み取り専用として定義できます。つまり、初期化後に変更することはできません。

interface Config {
  readonly apiUrl: string;
  timeout: number;
}

const config: Config = {
  apiUrl: "https://api.example.com",
  timeout: 5000
};

// config.apiUrl = "https://newapi.example.com"; // Error: Cannot assign to 'apiUrl' because it is a read-only property.

4. 関数の種類

インターフェイスを使用して関数の形状を定義し、パラメーターの型と戻り値の型を指定できます。

interface Login {
  (username: string, password: string): boolean;
}

const login: Login = (username, password) => {
  return username === "admin" && password === "admin123";
};

console.log(login("admin", "admin123")); // true

5. インターフェースの拡張

インターフェイスは他のインターフェイスを拡張でき、既存のものを組み合わせて複合型を作成できます。

interface Person {
  name: string;
  age: number;
}

interface Employee extends Person {
  employeeId: number;
  department: string;
}

const employee: Employee = {
  name: "Alice",
  age: 28,
  employeeId: 12345,
  department: "Engineering"
};

6. クラスへのインターフェースの実装

クラスはインターフェースを実装し、インターフェースの構造に確実に準拠することができます。

interface Animal {
  name: string;
  makeSound(): void;
}

class Dog implements Animal {
  name: string;

  constructor(name: string) {
    this.name = name;
  }

  makeSound() {
    console.log("Woof! Woof!");
  }
}

const dog = new Dog("Buddy");
dog.makeSound(); // Woof! Woof!

7. インデックス可能な型

インターフェイスは、特定のタイプの動的キーを持つプロパティを持つオブジェクトを記述することができます。

interface StringArray {
  [index: number]: string;
}

const myArray: StringArray = ["Hello", "World"];
console.log(myArray[0]); // Hello

8. ハイブリッドタイプ

インターフェイスは、関数として機能するオブジェクトと、プロパティを持つオブジェクトとして機能するオブジェクトを定義できます。

interface Counter {
  (start: number): void;
  interval: number;
  reset(): void;
}

const counter: Counter = (function (start: number) {
  console.log("Counter started at", start);
} as Counter);

counter.interval = 1000;
counter.reset = () => {
  console.log("Counter reset");
};

counter(10);
console.log(counter.interval); // 1000
counter.reset();

9. インターフェースのマージ

TypeScript を使用すると、同じインターフェイスの複数の宣言をマージできます。これは、大規模なコードベースまたはライブラリを操作する場合に便利です。

interface Box {
  height: number;
  width: number;
}

interface Box {
  color: string;
}

const myBox: Box = {
  height: 20,
  width: 15,
  color: "blue"
};

TypeScript のインターフェイスは、オブジェクトの形状を定義および強制するための柔軟かつ強力な方法を提供し、強力な型チェックと明確で保守可能なコードを可能にします。

以上がTypeScript インターフェイスをマスターする: 実践的な例を含む包括的なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。