Typescript 中的 interface 和 type 到底有什么區(qū)別詳解
interface VS type
大家使用 typescript 總會(huì)使用到 interface 和 type，官方規(guī)范 稍微說(shuō)了下兩者的區(qū)別
- An interface can be named in an extends or implements clause, but a type alias for an object type literal cannot.
- An interface can have multiple merged declarations, but a type alias for an object type literal cannot.
但是沒(méi)有太具體的例子。
明人不說(shuō)暗話，直接上區(qū)別。
相同點(diǎn)
都可以描述一個(gè)對(duì)象或者函數(shù)
interface
interface User {
name: string
age: number
}
interface SetUser {
(name: string, age: number): void;
}
type
type User = {
name: string
age: number
};
type SetUser = (name: string, age: number): void;
都允許拓展（extends）
interface 和 type 都可以拓展，并且兩者并不是相互獨(dú)立的，也就是說(shuō) interface 可以 extends type, type 也可以 extends interface 。 雖然效果差不多，但是兩者語(yǔ)法不同。
interface extends interface
interface Name {
name: string;
}
interface User extends Name {
age: number;
}
type extends type
type Name = {
name: string;
}
type User = Name & { age: number };
interface extends type
type Name = {
name: string;
}
interface User extends Name {
age: number;
}
type extends interface
interface Name {
name: string;
}
type User = Name & {
age: number;
}
不同點(diǎn)
type 可以而 interface 不行
type 可以聲明基本類(lèi)型別名，聯(lián)合類(lèi)型，元組等類(lèi)型
// 基本類(lèi)型別名
type Name = string
// 聯(lián)合類(lèi)型
interface Dog {
wong();
}
interface Cat {
miao();
}
type Pet = Dog | Cat
// 具體定義數(shù)組每個(gè)位置的類(lèi)型
type PetList = [Dog, Pet]
type 語(yǔ)句中還可以使用 typeof 獲取實(shí)例的 類(lèi)型進(jìn)行賦值
// 當(dāng)你想獲取一個(gè)變量的類(lèi)型時(shí)，使用 typeof
let div = document.createElement('div');
type B = typeof div
其他騷操作
type StringOrNumber = string | number;
type Text = string | { text: string };
type NameLookup = Dictionary<string, Person>;
type Callback<T> = (data: T) => void;
type Pair<T> = [T, T];
type Coordinates = Pair<number>;
type Tree<T> = T | { left: Tree<T>, right: Tree<T> };
interface 可以而 type 不行
interface 能夠聲明合并
interface User {
name: string
age: number
}
interface User {
sex: string
}
/*
User 接口為 {
name: string
age: number
sex: string
}
*/
總結(jié)
一般來(lái)說(shuō)，如果不清楚什么時(shí)候用interface/type，能用 interface 實(shí)現(xiàn)，就用 interface , 如果不能就用 type 。其他更多詳情參看 官方規(guī)范文檔
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JS異步堆棧追蹤之為什么await勝過(guò)Promise
與直接使用Promise相比，使用async/await不僅可以使代碼更具可讀性，而且還可以在JavaScript引擎中實(shí)現(xiàn)一些有趣的優(yōu)化。這篇文章是關(guān)于一個(gè)這樣的優(yōu)化，涉及異步代碼的堆棧追蹤。2021-04-04
這篇文章主要為大家詳細(xì)介紹了JS原生上傳大文件顯示進(jìn)度條，php上傳文件關(guān)鍵代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
JavaScript數(shù)組常用方法解析及數(shù)組扁平化
這篇文章主要介紹了JavaScript數(shù)組常用方法解析及數(shù)組扁平化，數(shù)組作為在開(kāi)發(fā)中常用的集合，除了for循環(huán)遍歷以外，還有很多內(nèi)置對(duì)象的方法，包括map，以及數(shù)組篩選元素filter等2022-07-07
詳解JavaScript中的強(qiáng)制類(lèi)型轉(zhuǎn)換
這篇文章主要介紹了JavaScript中的強(qiáng)制類(lèi)型轉(zhuǎn)換，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
基于javascript制作經(jīng)典傳統(tǒng)的拼圖游戲
這篇文章主要為大家詳細(xì)介紹了基于javascript制作拼圖游戲的相關(guān)內(nèi)容，經(jīng)典傳統(tǒng)的拼圖游戲是大家最喜愛(ài)的游戲之一，具有挑戰(zhàn)性，感興趣的小伙伴們可以參考一下2016-03-03
javascript實(shí)現(xiàn)禁止右鍵和F12查看源代碼
這篇文章主要介紹了javascript實(shí)現(xiàn)禁止右鍵和F12查看源代碼的代碼,需要的朋友可以參考下2014-12-12
JS與jQuery實(shí)現(xiàn)ListBox上移,下移,左移,右移操作功能示例
這篇文章主要介紹了JS與jQuery實(shí)現(xiàn)ListBox上移,下移,左移,右移操作功能,涉及javascript與jQuery的事件響應(yīng)、頁(yè)面元素動(dòng)態(tài)操作等相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-05-05
找到一點(diǎn)可憐的關(guān)于dojo資料，謝謝作者！
找到一點(diǎn)可憐的關(guān)于dojo資料，謝謝作者！...2006-12-12
關(guān)于TypeScript開(kāi)發(fā)的6六個(gè)實(shí)用小技巧分享
TypeScript是Javascrip t超集,支持靜態(tài)類(lèi)型檢測(cè),可以在編譯期提前暴露問(wèn)題,節(jié)省debug時(shí)間,下面這篇文章主要給大家介紹了關(guān)于TypeScript開(kāi)發(fā)的6六個(gè)實(shí)用小技巧,需要的朋友可以參考下2021-09-09
JS實(shí)現(xiàn)table表格數(shù)據(jù)排序功能(可支持動(dòng)態(tài)數(shù)據(jù)+分頁(yè)效果)
這篇文章主要介紹了JS實(shí)現(xiàn)table表格數(shù)據(jù)排序功能(可支持動(dòng)態(tài)數(shù)據(jù)+分頁(yè)效果) 的相關(guān)資料，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友一起看看吧2016-05-05