interface和type有什么區別嗎？你知道嗎？
作者：一川
在typescript里，還有很多容易搞混淆的概念，interface和type是最典型的，目的都是實現對象的類型和結構定義，但是又有些許不同。對于使用的建議，在庫或第三方類型定義中的公共API定義，應使用interface來提供聲明合并功能。
1.寫在前面
當我們使用 TypeScript時，就會用到 interface和type去描述對象的形狀和結構，平時感覺他們用法好像是一樣的，有區別又好像沒有的感覺。這兩個概念對于多數人而言還是有點容易混淆，那么這篇文章帶領你去看看他們的異同。
2.interface和type
interface用于描述對象的形狀和結構，可以給數據增加類型，而且方便進行復用。而type是通過別名進行重新定義類型的，類型別名指的是為類型創建新名稱，需要注意的是，我們并沒有定義一個新類型。兩者是對接口定義的兩種不同形式，目的都是在于定義對象的形狀和結構。
但是，兩者還是有些許差別：
- interface和type都能夠被擴展，interface可以拓展type，但是type不能繼承interface
- 類可以以相同的方式實現(implements)接口或類型別名，但類不能實現使用類型別名定義的聯合類型。
- type 可以使用聯合類型和交集，interface 不能使用聯合類型和交集組合
- 類型別名聲明可用于任何基元類型、聯合或交集。在這方面，interface被限制為對象類型和函數簽名。
- interface可以實現聲明合并，type不能實現聲明合并
使用interface和type描述對象的形狀和結構。
interface ISum {
(num1: number, num2: number):number
}
const sum: ISum = (num1,num2)=>{
return num1+num2
}
type TSum = (num1: number, num2: number)=>number
const sum2: TSum = (num1,num2)=>{
return num1+num2
}
如果有聯合類型，就使用type。
interface IUser{
name:string
age:number
}
interface IStudent{
university: string
}
// Error: 不能使用interface進行聯合類型，不存在interface IPerson = IUser | IStudent;
type TPerson = IUser | IStudent;
type 可以使用聯合類型和交集，interface 不能使用聯合類型和交集組合。
type TPersonA = {
name: string
}
type TPersonB = {
age: number
}
// 交集
type PartialPerson = TPersonA & TPersonB;
// 并集 聯合類型
type PartialPerson = TPersonA | TPersonB;
interface的特性
對于接口上沒有定義的屬性，可以使用以下方法進行聲明：
（1）使用類型斷言
interface IPerson{
name:string;
age:number;
}
const pingping: IPerson = {
name:"pingping",
age:18,
address:"北京"
} as IPerson
（2）可以使用繼承
interface IPerson{
name:string;
age:number;
}
interface IUser extends IPerson{
address:string
}
const pingping: IUser = {
name:"pingping",
age:18,
address:"北京"
}
（3）可以使用可選類型
interface IPerson{
name:string;
age:number;
address?: string;
}
const pingping: IPerson = {
name:"pingping",
age:18,
address:"北京"
}
（4）可使用可索引接口
interface IPerson{
name:string;
age:number;
[key: string]: any;
}
const pingping: IPerson = {
name:"pingping",
age:18,
address:"北京"
}
interface和type都能夠被擴展，interface可以拓展type，但是type不能繼承interface，type可以使用&聯合類型來實現類似的功能。
interface IPerson{
name:string
age:number
}
type TPerson = {
name:string
age:number
}
interface IStudent extends IPerson{
university:string
}
interface IStudent extends TPerson{
university:string
}
type TStudent = TPerson & {
university:string
}
type TStudent = IPerson & {
university:string
}
類可以以相同的方式實現(implements)接口或類型別名，但類不能實現使用類型別名定義的聯合類型。
interface IPerson {
name:string
age:number
}
class User implements IPerson {
name = "pingping";
age = 18;
}
type TPerson = {
name:string
age:number
};
class User implements TPerson {
name = "pingping";
age = 18;
}
type PartialPerson = { name: string } | { age: number };
// A class can only implement an object type or
// intersection of object types with statically known members.
class SomePartialPerson implements PartialPerson { // Error
name = "pingping";
age = 18;
}
interface可以實現聲明合并，type不能實現聲明合并。
interface IPerson{
name: string
}
interface IPerson{
age: number
}
const user: IPerson = {
name: "pingping",
age: 18
}
類型別名聲明可用于任何基元類型、聯合或交集。在這方面，interface被限制為對象類型和函數簽名。
type TPerson = [name: string, age: number];
我們沒有辦法使用接口聲明元組。不過，我們可以在接口內部使用元組
interface IPerson{
user: [name: string, age: number]
}
3. 參考文章
- 《使用 TypeScript 常見困惑：interface 和 type 的區別是什么?》
- 《一份不可多得的 TS 學習指南(1.8W字)》
- 《type和interface的區別知多少?》
4. 寫在最后
在typescript里，還有很多容易搞混淆的概念，interface和type是最典型的，目的都是實現對象的類型和結構定義，但是又有些許不同。對于使用的建議，在庫或第三方類型定義中的公共API定義，應使用interface來提供聲明合并功能。除此之外，隨你如何使用，但是在整個代碼庫中應該盡量要保持一致性。
責任編輯：武曉燕
來源：
前端萬有引力
