一、用法舉例
interface Person {name: stringage: number
}const person: Person = {name: 'Kite',age: 24
}
type Person = {name: stringage: number
}const person: Person = {name: 'Kite',age: 24
}
二、翻閱 ts 的官方文檔:
1、interface 接口
TypeScript的核心原則之一是對值所具有的結構進行類型檢查。 它有時被稱做“鴨式辨型法”或“結構性子類型化”。 在TypeScript里,接口的作用就是為這些類型命名和為你的代碼或第三方代碼定義契約。
interface LabelledValue {label: string;
}function printLabel(labelledObj: LabelledValue) {console.log(labelledObj.label);
}let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);
2、type 類型別名
類型別名會給一個類型起個新名字。 類型別名有時和接口很像,但是可以作用于原始值,聯合類型,元組以及其它任何你需要手寫的類型。
類型別名只是給類型起一個新名字。它并不是一個類型,只是一個別名而已, 就像通常我們 在 alias 下給 src 目錄配置 @ 別名。
type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {if (typeof n === 'string') {return n;}else {return n();}
}
// 調用getName 時傳字符串和函數都可以,如果傳的格式有問題,就會提示
getName('Kite')
getName(() => 'Kite')
即 interface
叫 接口 和 type
叫類型別名,只是有時候兩者都能實現同樣的功能,才會經常被混淆。
三、兩者相同點
1、都可以定義一個對象或函數
定義對象前面已經說了,我們來看一下如何定義函數。
type addType = (num1:number,num2:number) => numberinterface addType {(num1:number,num2:number):number
}
這兩種寫法都可以定義函數類型
const add:addType = (num1, num2) => {return num1 + num2
}
2、都允許繼承(extends)
我們定義一個 Person 類型和 Student 類型,Student 繼承自 Person,可以有下面四種方式
- interface 繼承 interface
interface Person { name: string
}
interface Student extends Person { grade: number
}const person:Student = {name: 'lin',grade: 100
}
- type 繼承 type
type Person = { name: string
}
type Student = Person & { grade: number } // 用交叉類型
- interface 繼承 type
type Person = { name: string
}
interface Student extends Person { grade: number
}
- type 繼承 interface
interface Person { name: string
}type Student = Person & { grade: number } // 用交叉類型
interface 使用 extends 實現繼承, type 使用交叉類型實現繼承
四、兩者不同點
1、type 可以,interface 不行
類型別名會給一個類型起個新名字。 類型別名有時和接口很像,但是可以作用于原始值,聯合類型,元組以及其它任何你需要手寫的類型。
聲明基本類型、聯合類型、交叉類型、元組
type Name = string // 基本類型type arrItem = number | string // 聯合類型const arr: arrItem[] = [1,'2', 3]type Person = { name: Name
}type Student = Person & { grade: number } // 交叉類型type Teacher = Person & { major: string } type StudentAndTeacherList = [Student, Teacher] // 元組類型const list:StudentAndTeacherList = [{ name: 'lin', grade: 100 }, { name: 'liu', major: 'Chinese' }
]
2、interface可以,type 不行
合并重復聲明
interface Person {name: string
}interface Person { // 重復聲明 interface,就合并了age: number
}const person: Person = {name: 'lin',age: 18
}
重復聲明 type ,就報錯了
type Person = {name: string
}type Person = { // Duplicate identifier 'Person'age: number
}const person: Person = {name: 'lin',age: 18
}
五、小結
- interface 和 type 被 TS 設計出來,是完全不同的東西,有各自的職責。
- interface 是接口,用于描述一個對象。type 是類型別名,用于給各種類型定義別名,讓 TS 寫起來更簡潔、清晰。
- 使用場景: 一般使用組合或者交叉類型的時候,用 type ; 一般要用類的 extends 或 implements 時,用 interface。