Typescript中interface和type區(qū)別

在typeScript中，“interface”和“type”都是用來(lái)定義自定義類型的關(guān)鍵字，他們?cè)谝韵虏町?，用法上的一些區(qū)別(歡迎大家繼續(xù)補(bǔ)充……)

1. 語(yǔ)法差異

• 'interface’使用關(guān)鍵字’interface’定義，例如：interface Person { name: string; }
• 'type’使用關(guān)鍵字’type’定義，例如：type Person = { name: string; }

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

• 'interface’具有聲明合并的能力，允許多個(gè)同名的接口進(jìn)行合并，通過(guò)這樣的方式可以擴(kuò)展接口的成員定義。
• 'type’不具備聲明合并的能力，多次定義同一個(gè)類型會(huì)報(bào)錯(cuò)

3.可擴(kuò)展性

• 'interface’可以使用關(guān)鍵字’extends’繼承另一個(gè)接口，實(shí)現(xiàn)接口的復(fù)用和擴(kuò)展。
• 'type’可以使用交叉類型（Intersection Types）進(jìn)行復(fù)用和擴(kuò)展，但不能使用extends關(guān)鍵字繼承。

4.兼容性

• 'interface’在進(jìn)行類型兼容性檢查時(shí)，會(huì)進(jìn)行"兼容性遞歸檢查"，只要目標(biāo)類型滿足源類型的成員要求，就認(rèn)為類型兼容。
• 'type’沒(méi)有進(jìn)行"兼容性遞歸檢查"，只有精確匹配才被認(rèn)為是兼容。

5.類型注解和類型別名

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

6.訪問(wèn)修飾符

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

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

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

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

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

9.映射類型

• 'type’可以使用映射類型來(lái)根據(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)合多個(gè)類型。
• 在范型參數(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>;

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

11.擴(kuò)展對(duì)象類型

• 'interface’可以通過(guò)聲明合并的方式擴(kuò)展已有的對(duì)象類型，從而添加新的屬性或方法。
• 'type’需要使用交叉類型來(lái)實(shí)現(xiàn)對(duì)象類型的擴(kuò)展。

interface Person {
  name: string;
}

interface ExtendedPerson extends Person {
  age: number;
}

// 使用聲明合并進(jìn)行擴(kuò)展
const person: ExtendedPerson = {
  name: 'John',
  age: 25,
};

type Person = {
  name: string;
};

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

// 使用交叉類型進(jìn)行擴(kuò)展
const person: ExtendedPerson = {
  name: 'John',
  age: 25,
};

12.調(diào)用簽名和構(gòu)造函數(shù)

• 'interface’可以定義調(diào)用簽名來(lái)描述函數(shù)類型，也可以定義構(gòu)造函數(shù)簽名來(lái)描述類的構(gòu)造函數(shù)。
• 'type’可以使用函數(shù)類型和構(gòu)造函數(shù)類型別名來(lái)描述函數(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}.`);
  }
}

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。