Menguasai Antara Muka TypeScript: Panduan Komprehensif dengan Contoh Praktikal

Dalam TypeScript, antara muka ialah alat berkuasa yang digunakan untuk mentakrifkan bentuk objek. Mereka menguatkuasakan semakan jenis, memastikan objek yang anda cipta mematuhi struktur tertentu. Berikut ialah melihat pelbagai kes di mana antara muka biasa digunakan, bersama-sama dengan contoh:

1. Menentukan Bentuk Objek

Antara muka selalunya digunakan untuk menentukan struktur sesuatu objek. Ini memastikan bahawa mana-mana objek yang melekat pada antara muka akan mempunyai sifat khusus.

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

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

2. Sifat Pilihan

Antara muka membolehkan anda menentukan sifat pilihan menggunakan ? simbol. Ini bermakna objek itu mungkin mempunyai sifat tersebut atau mungkin tidak.

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

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

3. Sifat Readonly

Anda boleh mentakrifkan sifat sebagai baca sahaja, bermakna ia tidak boleh ditukar selepas dimulakan.

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. Jenis Fungsi

Antara muka boleh digunakan untuk menentukan bentuk fungsi, menentukan jenis parameter dan jenis pulangan.

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

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

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

5. Melanjutkan Antara Muka

Antara muka boleh memanjangkan antara muka lain, membolehkan penciptaan jenis kompleks dengan menggabungkan yang sedia ada.

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. Melaksanakan Antara Muka dalam Kelas

Kelas boleh melaksanakan antara muka, memastikan mereka mematuhi struktur antara muka.

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. Jenis Boleh Indeks

Antara muka boleh menerangkan objek yang mempunyai sifat dengan kekunci dinamik jenis tertentu.

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

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

8. Jenis Hibrid

Antara muka boleh mentakrifkan objek yang bertindak sebagai fungsi dan sebagai objek dengan sifat.

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. Penggabungan Antara Muka

TypeScript membolehkan anda menggabungkan berbilang pengisytiharan antara muka yang sama, yang berguna apabila bekerja dengan pangkalan kod atau perpustakaan yang besar.

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

interface Box {
  color: string;
}

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

Antara muka dalam TypeScript menyediakan cara yang fleksibel dan berkuasa untuk mentakrif dan menguatkuasakan bentuk objek, membolehkan pemeriksaan jenis yang kuat dan kod yang jelas dan boleh diselenggara.

Atas ialah kandungan terperinci Menguasai Antara Muka TypeScript: Panduan Komprehensif dengan Contoh Praktikal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!