腳本之家服務器常用軟件

快捷導航

詳解TypeScript中type與interface的區(qū)別

更新時間：2022年04月07日 15:06:12 作者：芝士

在寫 ts 相關代碼的過程中，總能看到 interface 和 type 的身影。它們的作用好像都一樣的，相同的功能用哪一個都可以實現(xiàn)，也都很好用，所以也很少去真正的理解它們之間到底有啥區(qū)別，因此本文將詳細講解二者的區(qū)別，需要的可以參考一下

類型別名 type

首先認識一下什么是類型別名？

類型別名用來給一個類型起個新名字，使用 type 創(chuàng)建類型別名，類型別名不僅可以用來表示基本類型，還可以用來表示對象類型、聯(lián)合類型、元組和交集。讓我們看一些例子：

type userName = string; // 基本類型
type userId = string | number; // 聯(lián)合類型
type arr = number[];  
// 對象類型
type Person = {
    id: userId; // 可以使用定義類型
    name: userName;
    age: number;
    gender: string;
    isWebDev: boolean;
};
// 范型
type Tree<T> = { value: T };
const user: Person = {
    id: "901",
    name: "椿",
    age: 22,
    gender: "女",
    isWebDev: false,
};
const numbers: arr = [1, 8, 9];

接口 interface

接口是命名數(shù)據(jù)結(jié)構(gòu)（例如對象）的另一種方式；與type 不同，interface僅限于描述對象類型。

接口的聲明語法也不同于類型別名的聲明語法。讓我們將上面的類型別名 Person 重寫為接口聲明：

interface Person {
    id: userId;
    name: userName;
    age: number;
    gender: string;
    isWebDev: boolean;
}

interface和type的相似之處

在討論二者區(qū)別之前，首先看一下二者的相似之處（為何開發(fā)中，我們覺得用哪個都一樣）

都可以描述 Object和Function

兩者都可以用來描述對象或函數(shù),但語法不同:

Type

type Point = {
  x: number;
  y: number;
};
type SetPoint = (x: number, y: number) => void;

Interface

interface Point {
  x: number;
  y: number;
}
interface SetPoint {
  (x: number, y: number): void;
}

二者都可以被繼承

interface 和 type 都可以繼承。

另一個值得注意的是，接口和類型別名并不互斥。類型別名可以繼承接口，反之亦然。只是在實現(xiàn)形式上，稍微有些差別。

interface 繼承 interface

interface Person{
    name:string
}
interface Student extends Person { stuNo: number }

interface 繼承 type

type Person{
    name:string
}
interface Student extends Person { stuNo: number }

type 繼承 type

type Person{
    name:string
}
type Student = Person & { stuNo: number }

type 繼承 interface

interface Person{
    name:string
}
type Student = Person & { stuNo: number }

實現(xiàn) implements

類可以實現(xiàn)interface 以及 type(除聯(lián)合類型外)

interface ICat{
    setName(name:string): void;
}
class Cat implements ICat{
    setName(name:string):void{
        // todo
    }
}
// type  
type ICat = {
    setName(name:string): void;
}
class Cat implements ICat{
    setName(name:string):void{
        // todo
    }
}

上面提到了特殊情況，類無法實現(xiàn)聯(lián)合類型, 是什么意思呢？

type Person = { name: string; } | { setName(name:string): void };
// 無法對聯(lián)合類型Person進行實現(xiàn)
// error: A class can only implement an object type or intersection of object types with statically known members.
class Student implements Person {
  name= "張三";
  setName(name:string):void{
        // todo
    }
}

上面聊了interface與 type的相似之處，接下來就來看看他們的區(qū)別。

二者區(qū)別

1. 定義基本類型別名

type可以定義基本類型別名, 但是interface無法定義,如：

type userName = string
type stuNo = number
...

2. 聲明聯(lián)合類型

type可以聲明聯(lián)合類型, 例如：

type Student = {stuNo: number} | {classId: number}

3. 聲明元組

type可以聲明元組類型：

type Data = [number, string];

以上都是 type能做到，而interface做不到的，接下來聊聊type做不到的

4. 聲明合并

如果你多次聲明一個同名的接口，TypeScript 會將它們合并到一個聲明中，并將它們視為一個接口。這稱為聲明合并，例如：

interface Person { name: string }
interface Person { age: number }
let user: Person = {
    name: "Tolu",
    age: 0,
};

這種情況下，如果是type的話，重復使用Person是會報錯的：

type Person { name: string };  
// Error: 標識符“Person”重復。ts(2300)
type Person { age: number }

5. 索引簽名問題

如果你經(jīng)常使用TypeScript, 一定遇到過相似的錯誤：

Type 'xxx' is not assignable to type 'yyy'

Index signature is missing in type 'xxx'.

看個例子來理解問題：

interface propType{
    [key: string] : string
}
let props: propType
type dataType = {
    title: string
}
interface dataType1 {
    title: string
}
const data: dataType = {title: "訂單頁面"}
const data1: dataType1 = {title: "訂單頁面"}
props = data
// Error:類型“dataType1”不可分配給類型“propType”; 類型“dataType1”中缺少索引簽名  
props = data1

我們發(fā)現(xiàn)dataType和dataType1對應的類型一樣，但是interface定義的就賦值失敗，是什么原因呢？剛開始百思不解，最后我在 stack overflow上找到了一個相似的問題：

并且很幸運的找到了有效的答案：

翻譯過來的大致意思就是：

Record<string,string>與{[key:string]：string}相同。只有當該類型的所有屬性都已知并且可以對照該索引簽名進行檢查時，才允許將子集分配給該索引簽名類型。在您的例子中，從exampleType到Record<string,string>的所有內(nèi)容都是可分配的。這只能針對對象字面量類型進行檢查，因為一旦聲明了對象字面量類型，就無法更改它們。因此，索引簽名是已知的。

相反，在你使用interface去聲明變量時，它們在那一刻類型并不是最終的類型。由于interfac可以進行聲明合并，所以總有可能將新成員添加到同一個interface定義的類型上。

再結(jié)合:point_up_2:第4點聲明合并的講解, 這樣就很好理解了。就是說interface定義的類型是不確定的，后面再來一個：