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)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。