typeScript?核心基礎(chǔ)之接口interface
前言:
在面向?qū)ο笳Z(yǔ)言中,接口是一個(gè)很重要的概念,它是對(duì)行為的抽象。接口也叫 interface 。
在 js 中沒(méi)有接口這個(gè)概念,它是新增的。該如何定義呢?下面來(lái)一起學(xué)習(xí)吧
1、接口定義
接口的作用:
- 在面向?qū)ο缶幊讨?,接口是一種規(guī)范的定義,它定義了行為和動(dòng)作規(guī)范;
- 在程序設(shè)計(jì)內(nèi),接口起到一種限制和規(guī)范的作用;
接口一般使用 interface
關(guān)鍵字來(lái)定義,名字首字母需要大寫(xiě)。在項(xiàng)目中定義接口的時(shí)候,一般在名字前加一個(gè)大寫(xiě) I 字母,能夠快速識(shí)別該類(lèi)型是接口。如:
interface IPerson{ ?name: string ?age: number ?sex: string }
接口的主要作用就是用來(lái)進(jìn)行約束對(duì)象的規(guī)范,如:
interface IPerson{ ?name: string ?age: number ?sex: string } let webPerson: IPerson = { ?name:"倩倩", ?age:18, ?sex:'girl' }
使用上述 IPerson
定義對(duì)象的時(shí)候,上述三個(gè)屬性都是必加的,如果漏掉一個(gè)就會(huì)有錯(cuò)誤提示。那如果某些屬性有些對(duì)象有,有些對(duì)象沒(méi)有呢?比如職業(yè)。
接口成員也可以是缺省的,定義的時(shí)候使用 "?" ,如:
interface IPerson{ ?name: string ?age: number ?sex: string ?work?: string }
但是在特殊情況下,有些人有飲食忌諱,大多數(shù)沒(méi)有,有些人有特殊愛(ài)好,大多數(shù)也沒(méi)有,此時(shí)這個(gè)屬性不能具體,此時(shí)就可以添加任意屬性,使用 propName
來(lái)定義,如:
interface IPerson{ ?name: string ?age: number ?sex: string ?work?: string ?[propName:string]: any } let webPerson: IPerson = { ?name:"倩倩", ?age:18, ?sex: 'girl', ?hobby: "跳舞", ?refuse:"不吃羊肉" }
添加任意屬性之后,可以添加任意多個(gè)特殊屬性。
2、接口繼承
接口和類(lèi)一樣,接口也可以相互繼承。能夠從一個(gè)接口里復(fù)制成員到另一個(gè)接口里,可以靈活地將接口分割到可重用的模塊里面。繼承的時(shí)候使用 extends
關(guān)鍵字。如:
interface IPerson{ ?name: string ?age: number ?sex: string ?work?: string ?[propName:string]:any } interface IAdult extends IPerson{ ?isHaveChildren: boolean ?isBoss: boolean } let Tom: IAdult = { ?isBoss: false, ?isHaveChildren: false, ?name: '倩倩', ?age: 20, ?sex: "girl" }
一個(gè)接口可以繼承一個(gè)或多個(gè)接口,多個(gè)接口之間使用逗號(hào) "," 分割。如:
interface IPerson{ ?name: string ?age: number ?sex: string } interface IAdult extends IPerson{ ?isBoss: boolean } interface elderly extends IPerson, IAdult{ ?isRetire:boolean? }
接口的繼承也就是接口的擴(kuò)展,接口擴(kuò)展就是多添加了一些約束,一個(gè)接口可以擴(kuò)展多個(gè)接口。
3、類(lèi)實(shí)現(xiàn)接口
在 typeScript 中,接口可以繼承類(lèi),這樣接口就具有了類(lèi)的所有成員,同時(shí)這個(gè)接口只能引用這個(gè)類(lèi)或者它的字類(lèi)的實(shí)例。如:
class Person{ ?name:string; ?age: number ?constructor(name: string, age: number) { ? this.name = name ? this.age = age ?} } interface IAdult extends Person{ ?married:boolean } let Tom: IAdult = { ?name: "Tom", ?age: 20, ?married: true } console.log(Tom);
接口繼承一個(gè)類(lèi)類(lèi)型時(shí),它會(huì)繼承類(lèi)的成員但不包括其實(shí)現(xiàn)。
到此這篇關(guān)于typeScript 核心基礎(chǔ)之接口interface的文章就介紹到這了,更多相關(guān)typeScript 接口interface內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS技巧動(dòng)手實(shí)現(xiàn)紅包兔子雨效果示例詳解
這篇文章主要為大家介紹了JS技巧動(dòng)手實(shí)現(xiàn)紅包兔子雨效果示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01微信小程序 自定義彈窗實(shí)現(xiàn)過(guò)程(附代碼)
這篇文章主要介紹了微信小程序 自定義彈窗實(shí)現(xiàn)過(guò)程(附代碼),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12JS在一定時(shí)間內(nèi)跳轉(zhuǎn)頁(yè)面及各種刷新頁(yè)面的實(shí)現(xiàn)方法
這篇文章主要介紹了JS在一定時(shí)間內(nèi)跳轉(zhuǎn)頁(yè)面及各種刷新頁(yè)面的實(shí)現(xiàn)方法的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-05-05pc加載更多功能和移動(dòng)端下拉刷新加載數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了pc加載更多功能和移動(dòng)端下拉刷新加載數(shù)據(jù),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11經(jīng)典面試題之JavaScript?for循環(huán)(var?let)
如果你也在面試找工作,那么也一定遇到過(guò)這道for循環(huán)打印結(jié)果的題,下面我們來(lái)探討下,對(duì)經(jīng)典面試題之js?for循環(huán)相關(guān)知識(shí)感興趣的朋友跟隨小編一起看看吧2023-10-10簡(jiǎn)單了解JavaScript中常見(jiàn)的反模式
這篇文章主要介紹了簡(jiǎn)單了解JavaScript中常見(jiàn)的反模式,反模式 是指對(duì)反復(fù)出現(xiàn)的設(shè)計(jì)問(wèn)題的常見(jiàn)的無(wú)力而低效的設(shè)計(jì)模式,俗話說(shuō)就是重蹈覆轍。 這篇文章描述了 JavaScript 中常見(jiàn)的一些反模式,以及避免它們的辦法。,需要的朋友可以參考下2019-06-06小程序?qū)崿F(xiàn)瀑布流動(dòng)態(tài)加載列表
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)瀑布流動(dòng)態(tài)加載列表,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07