掌握 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中文網其他相關文章！