Type ✔ Vs Interface ❌：為什麼在 TypeScript 中應該選擇 Type 而不是 Interface。-js教程-PHP中文網

Type ✔ Vs Interface ❌：為什麼在 TypeScript 中應該選擇 Type 而不是 Interface。

WBOY

發布： 2024-08-09 07:18:52

原創

536 人瀏覽過

Type ✔ Vs Interface ❌: Why you should chose type over interface in typescript.

我找到了一個解決方案，您應該始終使用類型而不是介面。讓我們來分析一下原因吧！！

介面只能指定對象，但型別別名可以指定對象和其他一切。假設我們有一個地址字段，並且您將使用類型定義其類型，如下所示：

type Address = string;
const address: Address = '123 Hallway'

登入後複製

但是你不能用這樣的介面做這樣的事情：

interface Address = string; //error
const address: Address = '123 Hallway'

登入後複製

因為介面別名只能定義物件。如果我們想使用以下接口，我們需要完全改變結構：

interface Address {
    address: string;
}
const address: Address = {
    address: '12 3 Hallway'
}

登入後複製

這是介面的第一個問題。

型別別名可以定義 Union 類型，而介面別名則不能：讓我們的用戶可以有多個或單一地址：

type Address = string | string[] ;
const address: Address = '123 Hallway'
const newAddress: Address= ['123 Hallway', 'Flag Plaza']

登入後複製

字串| string[] 稱為 Union 類型，位址可以是字串，也可以是字串陣列。

你可以使用介面別名來做這樣的事情。

型別別名可以輕鬆使用實用程式類型。介面可以做到，但看起來會很難看，例如考慮一個使用者物件：

type User = {
    name: string;
    age: number;
    created_at: Date;
}

登入後複製

現在，假設我們有一個訪客對象，該對象尚未登錄，但我們可以檢查它的創建時間（首次登陸頁面）。在這種情況下，guest 就像一個用戶，但不是實際的用戶。我們希望在來自 User In 類型別名的 Guest 中擁有 create_at 屬性，我們這樣做：

     type Guest = Omit<User, 'name' | 'age'>

登入後複製

從技術上講，介面是可能的，但看看它是如何工作的：

type Guest extends Omit<User, 'name' | 'age'> {}

登入後複製

它可以工作，但語法很醜陋，不是嗎？

有時您需要描述元組。這是我們如何用類型別名來描述它

type Address = [string, number, string] ;
const address: Address = ['Hallway', 2, 'Abdul Plaza']

登入後複製

但有了介面，看看我們是如何做到的：

type Address extends Array<number | string> {
    0: string
    1: number;
    2: string;
}

const address: Address = ['Hallway', 2, 'Abdul Plaza']

登入後複製

又是醜陋的語法。

使用型別別名，我們可以非常輕鬆地提取類型。

const love_bonito ={
    level: 1,
    store_id: 'scad_12hdedhefgfeaa',
    country: ['US','PK','IND'],
    user: {
        user_id: "blah',
        username: 'nishat',
        likes: 421,
    },
};

// let's extract type for love_bonito
type LoveBonito = typeOf love_bonito;

// or even something inside love_bonito
type User = typeOf love_bonito.user;

登入後複製

這樣做的好處是，如果我們現在的等級總是 1 而沒有其他，我們也可以這樣做：

const love_bonito ={
    level: 1,
    store_id: 'scad_12hdedhefgfeaa',
    country: ['US','PK','IND'],
    user: {
        user_id: "blah';
        username: 'nishat';
        likes: 421;
    },
} as const

// let's extract type for love_bonito
type LoveBonito = typeOf love_bonito

// or even something inside love_bonito
type User = typeOf love_bonito.user

登入後複製

現在層級將推斷為 1，而不是任何數字。

使用介面別名，您可以重新聲明接口，

interface Home {
    rooms: number;
    light_bulbs: 12;
    rented_to: "Abu Turab";
}

interface Home {
   fans: 16;
}

// final type 

interface Home {
    rooms: 3;
    light_bulbs: 12;
    rented_to: "Abu Turab";
    fans: 16;
}

登入後複製

我們無法重新宣告型別別名。你可能會想，“哦！Sheraz，這裡，這是介面的一個優點”，但實際上不是！！！

在整個程式碼庫中使用相同識別碼的多個聲明聽起來很混亂。看來我真的很困惑。

假設您正在與一個團隊合作，您知道一個物件的類型（使用介面聲明的類型），但是您團隊中的某人重新聲明並更改了它，您會怎麼做。

但是使用型別別名這個問題也解決。如果你重新宣告一個類型，它會拋出一個錯誤

重複的標識符