interface和type有什么區(qū)別嗎？你知道嗎？
作者：一川
在typescript里，還有很多容易搞混淆的概念，interface和type是最典型的，目的都是實(shí)現(xiàn)對象的類型和結(jié)構(gòu)定義，但是又有些許不同。對于使用的建議，在庫或第三方類型定義中的公共API定義，應(yīng)使用interface來提供聲明合并功能。
1.寫在前面
當(dāng)我們使用 TypeScript時(shí)，就會用到 interface和type去描述對象的形狀和結(jié)構(gòu)，平時(shí)感覺他們用法好像是一樣的，有區(qū)別又好像沒有的感覺。這兩個(gè)概念對于多數(shù)人而言還是有點(diǎn)容易混淆，那么這篇文章帶領(lǐng)你去看看他們的異同。
2.interface和type
interface用于描述對象的形狀和結(jié)構(gòu)，可以給數(shù)據(jù)增加類型，而且方便進(jìn)行復(fù)用。而type是通過別名進(jìn)行重新定義類型的，類型別名指的是為類型創(chuàng)建新名稱，需要注意的是，我們并沒有定義一個(gè)新類型。兩者是對接口定義的兩種不同形式，目的都是在于定義對象的形狀和結(jié)構(gòu)。
但是，兩者還是有些許差別：
- interface和type都能夠被擴(kuò)展，interface可以拓展type，但是type不能繼承interface
- 類可以以相同的方式實(shí)現(xiàn)(implements)接口或類型別名，但類不能實(shí)現(xiàn)使用類型別名定義的聯(lián)合類型。
- type 可以使用聯(lián)合類型和交集，interface 不能使用聯(lián)合類型和交集組合
- 類型別名聲明可用于任何基元類型、聯(lián)合或交集。在這方面，interface被限制為對象類型和函數(shù)簽名。
- interface可以實(shí)現(xiàn)聲明合并，type不能實(shí)現(xiàn)聲明合并
使用interface和type描述對象的形狀和結(jié)構(gòu)。
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進(jìn)行聯(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的特性
對于接口上沒有定義的屬性，可以使用以下方法進(jìn)行聲明：
（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都能夠被擴(kuò)展，interface可以拓展type，但是type不能繼承interface，type可以使用&聯(lián)合類型來實(shí)現(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
}
類可以以相同的方式實(shí)現(xiàn)(implements)接口或類型別名，但類不能實(shí)現(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可以實(shí)現(xiàn)聲明合并，type不能實(shí)現(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];
我們沒有辦法使用接口聲明元組。不過，我們可以在接口內(nèi)部使用元組
interface IPerson{
user: [name: string, age: number]
}
3. 參考文章
- 《使用 TypeScript 常見困惑：interface 和 type 的區(qū)別是什么?》
- 《一份不可多得的 TS 學(xué)習(xí)指南(1.8W字)》
- 《type和interface的區(qū)別知多少?》
4. 寫在最后
在typescript里，還有很多容易搞混淆的概念，interface和type是最典型的，目的都是實(shí)現(xiàn)對象的類型和結(jié)構(gòu)定義，但是又有些許不同。對于使用的建議，在庫或第三方類型定義中的公共API定義，應(yīng)使用interface來提供聲明合并功能。除此之外，隨你如何使用，但是在整個(gè)代碼庫中應(yīng)該盡量要保持一致性。
責(zé)任編輯：武曉燕
來源：
前端萬有引力
