解讀Typescript中interface和type的用法及區(qū)別

更新時間：2025年02月05日 09:01:12 作者：￠C-TiAmo

在TypeScript中,`interface`和`type`都可以用來定義自定義類型,但它們在語法、聲明合并、可擴展性、兼容性、類型注解和類型別名、訪問修飾符、聯(lián)合類型與交叉類型、實現接口和類型別名、映射類型、泛型參數位置、擴展對象類型以及調用簽名和構造函數等方面存在一些差異

Typescript中interface和type區(qū)別

在typeScript中，“interface”和“type”都是用來定義自定義類型的關鍵字，他們在以下差異，用法上的一些區(qū)別(歡迎大家繼續(xù)補充……)

1. 語法差異

'interface’使用關鍵字’interface’定義，例如：interface Person { name: string; }
'type’使用關鍵字’type’定義，例如：type Person = { name: string; }

2.聲明合并(Merging)的能力

'interface’具有聲明合并的能力，允許多個同名的接口進行合并，通過這樣的方式可以擴展接口的成員定義。
'type’不具備聲明合并的能力，多次定義同一個類型會報錯

3.可擴展性

'interface’可以使用關鍵字’extends’繼承另一個接口，實現接口的復用和擴展。
'type’可以使用交叉類型（Intersection Types）進行復用和擴展，但不能使用extends關鍵字繼承。

4.兼容性

'interface’在進行類型兼容性檢查時，會進行"兼容性遞歸檢查"，只要目標類型滿足源類型的成員要求，就認為類型兼容。
'type’沒有進行"兼容性遞歸檢查"，只有精確匹配才被認為是兼容。

5.類型注解和類型別名

'interface’可以用于定義函數類型、類類型等復雜類型的注解。
'type’可以用于定義任意類型的別名，可以簡化復雜類型的書寫。

6.訪問修飾符

'interface’可以在屬性和方法上使用公共(public)，私有(private)和受保護(protected)等訪問修飾符。
'type’不能指定訪問修飾符，它假定所有成員都是公共的。

7.聯(lián)合類型與交叉類型

'type’可以使用聯(lián)合類型(Union Types)和交叉類型(Intersection Types)來組合多個類型。
'interface’沒有直接支持聯(lián)合類型和交叉類型的語法，但可以通過繼承和聲明合并的方式實現類似的效果。

8.實現接口和類型別名

'interface’可以被類實現(implements)來強制約束類的結構。
'type’不能直接被類實現，它更適合作為類型別名來簡化復雜類型的定義。

9.映射類型

'type’可以使用映射類型來根據已有類型生成新的類型。
'interface’不支持映射類型。

type Options<T> = {
  [K in keyof T]: boolean;
};

interface PersonOptions {
  name: boolean;
  age: boolean;
}

// 使用映射類型
type Result = Options<PersonOptions>;
// Result 的類型為 { name: boolean, age: boolean }

// 不能使用映射類型
// interface ResultInterface extends Options<PersonOptions> {}

10.范型參數位置

在范型參數位置上，'type’可以出現在任意位置，且可以交叉和聯(lián)合多個類型。
在范型參數位置上，'interface’只能出現在類型別名的右側。

type Tuple = [number, string];

type NumberArray = Array<number>;

type Union = number | string;

// 有效的定義
type MyType<T> = { value: T };
type MyType2 = MyType<number>;

// 有效的定義
interface MyInterface<T> {
  value: T;
}
type MyInterface2 = MyInterface<number>;

// 無效的定義
// interface MyInterface<T> {
//   value: T;
// }
// interface MyInterface2 extends MyInterface<number> {}

11.擴展對象類型

'interface’可以通過聲明合并的方式擴展已有的對象類型，從而添加新的屬性或方法。
'type’需要使用交叉類型來實現對象類型的擴展。

interface Person {
  name: string;
}

interface ExtendedPerson extends Person {
  age: number;
}

// 使用聲明合并進行擴展
const person: ExtendedPerson = {
  name: 'John',
  age: 25,
};

type Person = {
  name: string;
};

type ExtendedPerson = Person & {
  age: number;
};

// 使用交叉類型進行擴展
const person: ExtendedPerson = {
  name: 'John',
  age: 25,
};

12.調用簽名和構造函數

'interface’可以定義調用簽名來描述函數類型，也可以定義構造函數簽名來描述類的構造函數。
'type’可以使用函數類型和構造函數類型別名來描述函數類型和類的構造函數。

interface Greeting {
  (name: string): string;
}

interface Person {
  new (name: string): Person;
  name: string;
  sayHello(): void;
}

// 定義調用簽名和構造函數簽名
const greeting: Greeting = (name) => `Hello, ${name}!`;

class PersonClass implements Person {
  constructor(public name: string) {}
  sayHello() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

type Greeting = (name: string) => string;

type Person = {
  new (name: string): Person;
  name: string;
  sayHello(): void;
};

// 使用類型別名
const greeting: Greeting = (name) => `Hello, ${name}!`;

class PersonClass implements Person {
  constructor(public name: string) {}
  sayHello() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}