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

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

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

1. 語法差異
2.聲明合并(Merging)的能力
3.可擴展性
4.兼容性
5.類型注解和類型別名
6.訪問修飾符
7.聯(lián)合類型與交叉類型
8.實現(xiàn)接口和類型別名
9.映射類型
10.范型參數(shù)位置
11.擴展對象類型
12.調(diào)用簽名和構(gòu)造函數(shù)

總結(jié)

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’繼承另一個接口，實現(xiàn)接口的復用和擴展。
'type’可以使用交叉類型（Intersection Types）進行復用和擴展，但不能使用extends關鍵字繼承。

4.兼容性

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

5.類型注解和類型別名

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

6.訪問修飾符

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

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

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

8.實現(xiàn)接口和類型別名

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

9.映射類型

'type’可以使用映射類型來根據(jù)已有類型生成新的類型。
'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.范型參數(shù)位置

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

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’需要使用交叉類型來實現(xiàn)對象類型的擴展。

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.調(diào)用簽名和構(gòu)造函數(shù)

'interface’可以定義調(diào)用簽名來描述函數(shù)類型，也可以定義構(gòu)造函數(shù)簽名來描述類的構(gòu)造函數(shù)。
'type’可以使用函數(shù)類型和構(gòu)造函數(shù)類型別名來描述函數(shù)類型和類的構(gòu)造函數(shù)。

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

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

// 定義調(diào)用簽名和構(gòu)造函數(shù)簽名
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}.`);
  }
}