轉(zhuǎn)載地址

TypeScript基礎(chǔ)入門(mén) - 接口 - 可索引的類(lèi)型

項(xiàng)目實(shí)踐倉(cāng)庫(kù)

https://github.com/durban89/typescript_demo.git tag: 1.0.11

為了保證后面的學(xué)習(xí)演示需要安裝下ts-node，這樣后面的每個(gè)操作都能直接運(yùn)行看到輸出的結(jié)果。

npm install -D ts-node

后面自己在練習(xí)的時(shí)候可以這樣使用

npx ts-node src/learn_basic_types.ts npx ts-node 腳本路徑

接口

TypeScript的核心原則之一是對(duì)值所具有的結(jié)構(gòu)進(jìn)行類(lèi)型檢查。 它有時(shí)被稱(chēng)做“鴨式辨型法”或“結(jié)構(gòu)性子類(lèi)型化”。 在TypeScript里，接口的作用就是為這些類(lèi)型命名和為你的代碼或第三方代碼定義契約。

可索引的類(lèi)型

與使用接口描述函數(shù)類(lèi)型差不多，我們也可以描述那些能夠“通過(guò)索引得到”的類(lèi)型，比如a[10]或ageMap["daniel"]。 可索引類(lèi)型具有一個(gè) 索引簽名，它描述了對(duì)象索引的類(lèi)型，還有相應(yīng)的索引返回值類(lèi)型。 讓我們看一個(gè)例子：

interface SomeArray {[index: number]: string; }let someArray: SomeArray; someArray = ["string1", "string2"];let str: string = someArray[0]; console.log(str);

運(yùn)行后結(jié)果如下

string1

上面例子里，我們定義了SomeArray接口，它具有索引簽名。 這個(gè)索引簽名表示了當(dāng)用 number去索引SomeArray時(shí)會(huì)得到string類(lèi)型的返回值。共有支持兩種索引簽名：字符串和數(shù)字。 可以同時(shí)使用兩種類(lèi)型的索引，但是數(shù)字索引的返回值必須是字符串索引返回值類(lèi)型的子類(lèi)型。 這是因?yàn)楫?dāng)使用 number來(lái)索引時(shí)，JavaScript會(huì)將它轉(zhuǎn)換成string然后再去索引對(duì)象。 也就是說(shuō)用 100（一個(gè)number）去索引等同于使用"100"（一個(gè)string）去索引，因此兩者需要保持一致。

class Person {name: string; } class Student extends Person {className: string; }// 錯(cuò)誤：使用數(shù)值型的字符串索引，有時(shí)會(huì)得到完全不同的Person! interface NotOkay {// [x: number]: Person; // 數(shù)字索引類(lèi)型“Person”不能賦給字符串索引類(lèi)型“Student”[x: string]: Student; }

字符串索引簽名能夠很好的描述dictionary模式，并且它們也會(huì)確保所有屬性與其返回值類(lèi)型相匹配。 因?yàn)樽址饕暶髁?obj.property和obj["property"]兩種形式都可以。 下面的例子里， name的類(lèi)型與字符串索引類(lèi)型不匹配，所以類(lèi)型檢查器給出一個(gè)錯(cuò)誤提示：

interface SomeInterface {[index: string]: string// length: number ? ?// 錯(cuò)誤，`length`的類(lèi)型與索引類(lèi)型返回值的類(lèi)型不匹配name: string ? ? ? // 可以，name是string類(lèi)型 }

最后，你可以將索引簽名設(shè)置為只讀，這樣就防止了給索引賦值：

interface SomeInterface {[index: string]: string// length: number ? ?// 錯(cuò)誤，`length`的類(lèi)型與索引類(lèi)型返回值的類(lèi)型不匹配name: string ? ? ? // 可以，name是string類(lèi)型 }interface ReadonlySomeArray {readonly [index: number]: string; } let readonlyArray: ReadonlySomeArray = ["string1", "string2"]; readonlyArray[2] = "string3"; // error!

運(yùn)行后會(huì)得到如下錯(cuò)誤提示

src/interface_6.ts(36,1): error TS2542: Index signature in type 'ReadonlySomeArray' only permits reading.

你不能設(shè)置readonlyArray[2]，因?yàn)樗饕灻侵蛔x的。

本實(shí)例結(jié)束實(shí)踐項(xiàng)目地址

https://github.com/durban89/typescript_demo.git tag: 1.0.12

?

總結(jié)

以上是生活随笔為你收集整理的TypeScript基础入门 - 接口 - 可索引的类型的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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