interface和type有什么區(qū)別嗎？你知道嗎？

作者：一川 2022-03-13 18:53:31

在typescript里，還有很多容易搞混淆的概念，interface和type是最典型的，目的都是實現(xiàn)對象的類型和結構定義，但是又有些許不同。對于使用的建議，在庫或第三方類型定義中的公共API定義，應使用interface來提供聲明合并功能。

1.寫在前面

當我們使用 TypeScript時，就會用到 interface和type去描述對象的形狀和結構，平時感覺他們用法好像是一樣的，有區(qū)別又好像沒有的感覺。這兩個概念對于多數(shù)人而言還是有點容易混淆，那么這篇文章帶領你去看看他們的異同。

2.interface和type

interface用于描述對象的形狀和結構，可以給數(shù)據(jù)增加類型，而且方便進行復用。而type是通過別名進行重新定義類型的，類型別名指的是為類型創(chuàng)建新名稱，需要注意的是，我們并沒有定義一個新類型。兩者是對接口定義的兩種不同形式，目的都是在于定義對象的形狀和結構。

但是，兩者還是有些許差別：

interface和type都能夠被擴展，interface可以拓展type，但是type不能繼承interface
類可以以相同的方式實現(xiàn)(implements)接口或類型別名，但類不能實現(xiàn)使用類型別名定義的聯(lián)合類型。
type 可以使用聯(lián)合類型和交集，interface 不能使用聯(lián)合類型和交集組合
類型別名聲明可用于任何基元類型、聯(lián)合或交集。在這方面，interface被限制為對象類型和函數(shù)簽名。
interface可以實現(xiàn)聲明合并，type不能實現(xiàn)聲明合并

使用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
}

如果有聯(lián)合類型，就使用type。

interface IUser{
    name:string
    age:number
}

interface IStudent{
    university: string
}

// Error: 不能使用interface進行聯(lián)合類型，不存在interface IPerson = IUser | IStudent;
type TPerson = IUser | IStudent;

type 可以使用聯(lián)合類型和交集，interface 不能使用聯(lián)合類型和交集組合。

type TPersonA = {
    name: string
}
type TPersonB = {
    age: number
}
// 交集
type PartialPerson = TPersonA & TPersonB;
// 并集 聯(lián)合類型
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可以使用&聯(lián)合類型來實現(xiàn)類似的功能。

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
}

類可以以相同的方式實現(xiàn)(implements)接口或類型別名，但類不能實現(xiàn)使用類型別名定義的聯(lián)合類型。

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可以實現(xiàn)聲明合并，type不能實現(xiàn)聲明合并。

interface IPerson{
    name: string
}
interface IPerson{
    age: number
}
const user: IPerson = {
    name: "pingping",
    age: 18
}

類型別名聲明可用于任何基元類型、聯(lián)合或交集。在這方面，interface被限制為對象類型和函數(shù)簽名。

type TPerson = [name: string, age: number];

我們沒有辦法使用接口聲明元組。不過，我們可以在接口內部使用元組

interface IPerson{
    user: [name: string, age: number]
}

3. 參考文章

《使用 TypeScript 常見困惑：interface 和 type 的區(qū)別是什么?》
《一份不可多得的 TS 學習指南(1.8W字)》
《type和interface的區(qū)別知多少?》

4. 寫在最后

在typescript里，還有很多容易搞混淆的概念，interface和type是最典型的，目的都是實現(xiàn)對象的類型和結構定義，但是又有些許不同。對于使用的建議，在庫或第三方類型定義中的公共API定義，應使用interface來提供聲明合并功能。除此之外，隨你如何使用，但是在整個代碼庫中應該盡量要保持一致性。

責任編輯：武曉燕來源：前端萬有引力