TypeScript中怎么用接口(interface)描述类(静态部分与实例部分)
TypeScript是JavaScript的超集
在看TypeScript官方文檔的接口一節(jié)的時(shí)候?qū)τ陬?lèi)的靜態(tài)部分與實(shí)例部分產(chǎn)生了疑問(wèn),通過(guò)努力得到自認(rèn)為相對(duì)合理的解釋,寫(xiě)下此文以記所得,如有謬誤感謝指正。
文中大部分代碼示例來(lái)自TypeScript官網(wǎng)
TS中的接口
我的理解中TS中的接口就是描述一個(gè)對(duì)象中應(yīng)該有那些屬性,這些屬性對(duì)應(yīng)值得類(lèi)型,有哪些方法,這些方法的參數(shù)和返回值等信息。
interface LabelledValue {label: string; }let myObj: LabelledValue = {label: "Size 10 Object"}; // OKlet myObj1: LabelledValue = {labe: "Size 10 Object"}; // 報(bào)錯(cuò),因?yàn)闆](méi)有l(wèi)abel屬性上面的報(bào)錯(cuò)并不只是因?yàn)闆](méi)有l(wèi)abel屬性,即使
加上一個(gè)label屬性變成{label: “Size 20 Object”, label: “aaa”}也還是會(huì)報(bào)錯(cuò)。因?yàn)門(mén)S會(huì)檢查額外屬性,這個(gè)對(duì)象中有額外屬性label。
接口也可以描述函數(shù)
interface SearchFunc {(source: string, subString: string): boolean;n: number; }當(dāng)前接口描述了一個(gè)函數(shù),這個(gè)函數(shù)需要傳入兩個(gè)string類(lèi)型的參數(shù)并且返回boolean類(lèi)型的值,并且這個(gè)函數(shù)自身應(yīng)該有一個(gè)屬性名為n值為number的屬性。
如果一個(gè)函數(shù)需要實(shí)現(xiàn)這個(gè)接口會(huì)報(bào)錯(cuò),可能因?yàn)門(mén)S認(rèn)為函數(shù)并不應(yīng)該有自己的屬性,類(lèi)可以有自身的屬性(靜態(tài)屬性)。雖然對(duì)于JS來(lái)說(shuō)類(lèi)和函數(shù)是一個(gè)東西,但這個(gè)是TS。
注意:圓括號(hào)前面不能有標(biāo)識(shí)符,否則變成了描述一個(gè)對(duì)象具有某個(gè)屬性而不是一個(gè)函數(shù)本身。
類(lèi)的靜態(tài)部分和實(shí)例部分指的到底是啥
JS中并不存在類(lèi)構(gòu)造函數(shù)這樣的東西,有一句話叫做沒(méi)有構(gòu)造函數(shù),只有構(gòu)造調(diào)用,所以一個(gè)類(lèi)對(duì)于JS來(lái)說(shuō)就是一個(gè)函數(shù)。
TS中類(lèi)的靜態(tài)部分指的是這個(gè)類(lèi)(函數(shù))本身
實(shí)例部分指的是類(lèi)實(shí)例化出來(lái)的對(duì)象
官網(wǎng)的例子(有些許修改)
interface ClockConstructor {new (hour: number, minute: number): ClockInterface; // 這個(gè)前面有一個(gè)new,不是一個(gè)普通的函數(shù)a?: number; // 函數(shù)本身應(yīng)該具有的屬性 例如:function A(){} A.a = 1 } interface ClockInterface {tick(); }// 看第一個(gè)參數(shù)ctor的類(lèi)型是接口 ClockConstructor,在這里就為類(lèi)的靜態(tài)部分指定需要實(shí)現(xiàn)的接口 function createClock(ctor: ClockConstructor, hour: number, minute: number): ClockInterface {return new ctor(hour, minute); }// 看這里 implements ColocInterface 這個(gè)意思--->不是DiaitalClock本身(類(lèi)的靜態(tài)部分)應(yīng)該符合接口規(guī)則<--- // 而是 --->類(lèi) DigitalClock 實(shí)例化出來(lái)的對(duì)象(類(lèi)的實(shí)例部分)應(yīng)該滿足這個(gè)接口的規(guī)則<--- // 那么怎么要求這個(gè)類(lèi)(函數(shù))符合某個(gè)接口的規(guī)則? class DigitalClock implements ClockInterface {constructor(h: number, m: number) { }static a: number = 1; // static屬性會(huì)加在類(lèi)的自身而不是類(lèi)的實(shí)例tick() {console.log("beep beep");} } class AnalogClock implements ClockInterface {constructor(h: number, m: number) { }tick() {console.log("tick tock");} }let digital = createClock(DigitalClock, 12, 17); let analog = createClock(AnalogClock, 7, 32);參考
TypeScript官網(wǎng)
總結(jié)
以上是生活随笔為你收集整理的TypeScript中怎么用接口(interface)描述类(静态部分与实例部分)的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: TS引用JS模块
- 下一篇: 不同设备屏幕尺寸和DPR适配