了解 Typescript 中的類型和接口

介面

什麼是接口：

• 介面是在 Typescript 中定義物件的形狀或結構的一種方式。
• 它主要用於描述物件的藍圖，確保它們遵循特定的結構。

主要特點：

1。用於物件結構

• 定義屬性、方法及其型別。

interface User {
username: string, 
password: string,
email?: string // this is optional property
}

2。支援擴充：

• 介面可以擴充其他介面來繼承屬性。

interface Address {
street: string,
city: string
}
interface User extends Address {
username: string,
password: string,
email?: string
}

3。類別可以實作介面：

• 強制類別遵守介面結構。

class Admin implements User {
  username: string
  password: string
  email?: string
  street: string
  city: string

  constructor(username: string, password:string, street:string, city:string, email?:string){
    this.username = username;
    this.password = password;
    this.email = email || '';
    this.street = street;
    this.city = city;
  };
}

var aAdmin = new Admin("user1", "123", "3/2 street", "hcmc");
console.log(aAdmin);

輸出：

Admin {
  username: 'user1',
  password: '123',
  email: '',
  street: '3/2 street',
  city: 'hcmc'
}

4。可以宣告函數

• 介面可以宣告函式簽名

interface AddUser{
  (name: string) : void;
}

const user : AddUser = (name) => console.log(`Hello ${name}`);

類型

什麼是類型：

• 類型是一種靈活的方式，可以為 Typescript 中的幾乎所有內容定義類型別名。
• 它可以描述物件、並集、交集、元組等等。

主要特點：

1。任何類型的別名：

• 可以定義基本型別、對象，甚至並集、交集。

type UserType = {
  id: string,
  name: string
}
type ID = string | number; //Union type

2。支援交叉點類型：

• 將多種類型合併為一種

type UserType = {
  id: string,
  name: string
}

type AddressType = {
  street: string,
  city: string,
}
type UserWithAddress = UserType & AddressType;

3。支持元組：

• 可以為每個元素定義具有特定類型的固定長度陣列。

type Coordinates = [number, number];
const point: Coordinates = [10, 20];

4。無法重新開啟：

• 與介面不同，您不能重新聲明或擴充現有類型。

class AdminType extends UserType {
  // ERROR: 'UserType' only refers to a type, but is being used as a value here.ts(2693)
}

介面和類型之間的主要區別

Aspect	Interface	Type
Usage	Define Object structure	Flexible: can be define objects, unions, intersections, tuples.
Extensibility	Can be extended using extends	Can be combined using & (intersection).
Reopen/Declartion	Can be reopened to add new properties.	Cannot be reopened.
Primitive Type	Cannot represent primitives directly.	Can alias primitive (e.g,.type ID = string);
Union and Typle Support	Not supported.	Fully supported

方面 介面 類型 標題> 用法 定義物件結構 靈活：可以定義物件、並集、交集、元組。 可擴充性 可以使用 extends 進行擴展 可以使用 &（交集）組合。 重新開放/聲明 可以重新開啟以新增屬性。 無法重新開啟。 原始類型 無法直接表示基元。 可以為原語取別名（例如.type ID = string）； 聯合和類型支援 不支援。 完全支援 表>

何時使用使用者介面與類型

使用介面：

• 描述物件的形狀或使用類別時。

interface User {
username: string, 
password: string,
email?: string // this is optional property
}

使用類型：

• 定義聯合或元組或任何高級類型定義時。

interface Address {
street: string,
city: string
}
interface User extends Address {
username: string,
password: string,
email?: string
}

組合類型：

class Admin implements User {
  username: string
  password: string
  email?: string
  street: string
  city: string

  constructor(username: string, password:string, street:string, city:string, email?:string){
    this.username = username;
    this.password = password;
    this.email = email || '';
    this.street = street;
    this.city = city;
  };
}

var aAdmin = new Admin("user1", "123", "3/2 street", "hcmc");
console.log(aAdmin);

最佳實踐：

1. 使用介面來描述對象，使用類型來描述其他一切。
2. 使用 類型 進行更進階的用例，例如並集或交集。
3. 如果您在引用它的團隊中工作，請選擇介面以保持一致性

以上是了解 Typescript 中的類型和接口的詳細內容。更多資訊請關注PHP中文網其他相關文章！