TypeScript 中的type與interface

對于 TypeScript，有兩種定義類型的方法：type與interface。

人們常常想知道該使用哪一種，而答案并不是一刀切的。這確實取決于具體情況。有時，其中一種比另一種更好，但在許多情況下，我們可以互換使用它們。

那么，讓我們來分析一下type與interface有其區(qū)別和相似之處。

在本文中，我們將深入探討這些區(qū)別，并總結(jié)什么時候使用它們。

type

在js中有一些基本類型，如字符串、布爾值、數(shù)字、數(shù)組、元組和枚舉。通過 TypeScript的type我們定義更多的類型，我們不是在創(chuàng)造新類型，只是給他們起了更友好的名字。這使得我們的代碼更容易閱讀和理解。

type MyNumber = number;
type User = {id: number;name: string;email: string;
}

例如，我們可以為number創(chuàng)建一個名為MyNumber的類型別名，因此我們可以直接說MyNumber，而不是寫number。

我們還可以為User 創(chuàng)建一個類型別名，它描述了用戶的數(shù)據(jù)應(yīng)該是什么樣子。

當人們談?wù)?code>type時，他們實際上是在談?wù)擃愋蛣e名。這就像給同一組事物賦予不同的名稱一樣。

interface

在 TypeScript 中，將interface視為對象必須遵循的一組規(guī)則或要求。

interface Client { name: string; address: string;
}

現(xiàn)在，有另一種方式來表達這些規(guī)則。我們可以使用所謂的“類型注釋”來更好的解釋Client所包含的屬性。

因此，無論我們使用type還是interface，我們本質(zhì)上都是在為Client定義相同的期望集。這就像為同一組指令賦予兩個不同的名稱。

type與interface的差異

type和interface都是用于定義自定義數(shù)據(jù)結(jié)構(gòu)和形狀，但它們的行為和用法有一些差異。

原始類型

使用type

type MyNumber = number;

使用interface

我們不能像直接使用interface定義原始類型number。原始類型都是在 TypeScript 中預(yù)定義的。

聯(lián)合類型

使用type

type MyUnionType = number | string;

在這里，我們定義了一個MyUnionType的類型，它可以保存number或string類型的值。

使用interface

interface通常不用于直接表示聯(lián)合類型。

函數(shù)類型

使用type

type MyFunctionType = (arg1: number, arg2: string) => boolean;

這定義了一個MyFunctionType函數(shù)的類型，該函數(shù)接受兩個參數(shù)（一個數(shù)字和一個字符串）并返回一個布爾值。

使用interface

interface MyFunctionInterface {(arg1: number, arg2: string): boolean;
}

聲明合并

使用type

類型別名不支持聲明合并。如果多次定義相同的類型別名，將會導(dǎo)致錯誤。

使用interface

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

TypeScript 會自動將這兩個Person接口合并為一個，并且具有name和age的屬性。

擴展

使用extends

interface A { propA: number; }
interface B extends A { propB: string; }

接口B擴展接口A，繼承propA屬性并添加新屬性propB。

使用&來擴展

type AB = A & { propB: string; }

在這里，我們使用交集將類型A與新屬性propB組合起來創(chuàng)建類型AB。

處理擴展時的沖突

TypeScript 強制擴展時具有相同名稱的屬性類型匹配：

interface A { commonProp: number; }
interface B { commonProp: string; }
interface AB extends A, B { }
// Error: Property 'commonProp' must have the same type in A and B

要解決沖突，我們需要確保類型匹配或使用函數(shù)的方法重載。

使用元組類型

使用type

type MyTupleType = [number, string];
const tuple: MyTupleType = [42, "hello"];

在這里，我們使用type定義一個元組類型，然后我們可以創(chuàng)建該元組類型的變量。

使用interface

interface MyTupleInterface {0: number;1: string;
}
const tuple: MyTupleInterface = [42, "hello"];

我們還可以使用接口定義元組類型，并且用法保持不變。

何時使用type與interface

當需要組合或修改現(xiàn)有結(jié)構(gòu)時，請使用interface。如果我們正在使用庫或創(chuàng)建新庫，那么interface是我們的首選。

它們允許我們合并或擴展聲明，從而更輕松地使用現(xiàn)有代碼。當我們考慮面向?qū)ο缶幊虝r，interface也更具可讀性。

當我們需要更強大的功能時，可以選擇type。TypeScript 的類型系統(tǒng)提供了高級工具，例如條件類型、泛型、類型防護等等。

這些功能使我們可以更好地控制類型，幫助我們創(chuàng)建健壯的強類型應(yīng)用程序。interface無法提供這些功能。

我們通?？梢允褂?code>type與interface，具體取決于我們的個人喜好。但是，在以下情況下請使用type：

• 當我們想要為基本數(shù)據(jù)類型創(chuàng)建新名稱（例如“字符串”或“數(shù)字”）時。
• 定義更復(fù)雜的類型（例如聯(lián)合、元組或函數(shù)）時。
• 重載函數(shù)時。
• 使用映射類型、條件類型或類型防護等高級功能時。

type通常更靈活且更具表現(xiàn)力。它們提供了interface無法比擬的更廣泛的高級功能，并且 TypeScript 不斷擴展其功能。

我們使用類型別名來自動生成對象類型的 getter 方法，這是interface無法做到的：

type Client = {name: string;address: string;
}
type Getters<T> = {[K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};
type clientType = Getters<Client>;// {
//     getName: () => string;
//     getAddress: () => string;
// }

通過利用映射類型、模板文字和keyof運算符，我們創(chuàng)建了一個可以自動為任何對象類型生成 getter 方法的類型。

此外，許多開發(fā)人員更喜歡使用type，因為它們與函數(shù)式編程范例非常一致。

TypeScript 中類型表達式的豐富性使我們可以更輕松地使用組合和不變性等函數(shù)概念，同時保持代碼中的類型安全。