TypeScript是JavaScript的超集

在看TypeScript官方文檔的接口一節(jié)的時候?qū)τ陬惖撵o態(tài)部分與實(shí)例部分產(chǎn)生了疑問，通過努力得到自認(rèn)為相對合理的解釋，寫下此文以記所得，如有謬誤感謝指正。

文中大部分代碼示例來自TypeScript官網(wǎng)

TS中的接口

我的理解中TS中的接口就是描述一個對象中應(yīng)該有那些屬性，這些屬性對應(yīng)值得類型，有哪些方法，這些方法的參數(shù)和返回值等信息。

interface LabelledValue {label: string; }let myObj: LabelledValue = {label: "Size 10 Object"}; // OKlet myObj1: LabelledValue = {labe: "Size 10 Object"}; // 報錯，因為沒有l(wèi)abel屬性

上面的報錯并不只是因為沒有l(wèi)abel屬性，即使

加上一個label屬性變成{label: “Size 20 Object”, label: “aaa”}也還是會報錯。因為TS會檢查額外屬性，這個對象中有額外屬性label。

接口也可以描述函數(shù)

interface SearchFunc {(source: string, subString: string): boolean;n: number; }

當(dāng)前接口描述了一個函數(shù)，這個函數(shù)需要傳入兩個string類型的參數(shù)并且返回boolean類型的值，并且這個函數(shù)自身應(yīng)該有一個屬性名為n值為number的屬性。

如果一個函數(shù)需要實(shí)現(xiàn)這個接口會報錯，可能因為TS認(rèn)為函數(shù)并不應(yīng)該有自己的屬性，類可以有自身的屬性（靜態(tài)屬性）。雖然對于JS來說類和函數(shù)是一個東西，但這個是TS。

注意：圓括號前面不能有標(biāo)識符，否則變成了描述一個對象具有某個屬性而不是一個函數(shù)本身。

類的靜態(tài)部分和實(shí)例部分指的到底是啥

JS中并不存在類構(gòu)造函數(shù)這樣的東西，有一句話叫做沒有構(gòu)造函數(shù)，只有構(gòu)造調(diào)用，所以一個類對于JS來說就是一個函數(shù)。

TS中類的靜態(tài)部分指的是這個類（函數(shù)）本身

實(shí)例部分指的是類實(shí)例化出來的對象

官網(wǎng)的例子（有些許修改）

interface ClockConstructor {new (hour: number, minute: number): ClockInterface; // 這個前面有一個new，不是一個普通的函數(shù)a?: number; // 函數(shù)本身應(yīng)該具有的屬性 例如：function A(){} A.a = 1 } interface ClockInterface {tick(); }// 看第一個參數(shù)ctor的類型是接口 ClockConstructor，在這里就為類的靜態(tài)部分指定需要實(shí)現(xiàn)的接口 function createClock(ctor: ClockConstructor, hour: number, minute: number): ClockInterface {return new ctor(hour, minute); }// 看這里 implements ColocInterface 這個意思--->不是DiaitalClock本身（類的靜態(tài)部分）應(yīng)該符合接口規(guī)則<--- // 而是 --->類 DigitalClock 實(shí)例化出來的對象（類的實(shí)例部分）應(yīng)該滿足這個接口的規(guī)則<--- // 那么怎么要求這個類（函數(shù)）符合某個接口的規(guī)則？ class DigitalClock implements ClockInterface {constructor(h: number, m: number) { }static a: number = 1; // static屬性會加在類的自身而不是類的實(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）描述类（静态部分与实例部分）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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