轉載地址

TypeScript基礎入門 - 接口 - 可索引的類型

項目實踐倉庫

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

為了保證后面的學習演示需要安裝下ts-node，這樣后面的每個操作都能直接運行看到輸出的結果。

npm install -D ts-node

后面自己在練習的時候可以這樣使用

npx ts-node src/learn_basic_types.ts

npx ts-node 腳本路徑

接口

TypeScript的核心原則之一是對值所具有的結構進行類型檢查。 它有時被稱做“鴨式辨型法”或“結構性子類型化”。 在TypeScript里，接口的作用就是為這些類型命名和為你的代碼或第三方代碼定義契約。

可索引的類型

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

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

運行后結果如下

string1

上面例子里，我們定義了SomeArray接口，它具有索引簽名。 這個索引簽名表示了當用 number去索引SomeArray時會得到string類型的返回值。共有支持兩種索引簽名：字符串和數字。 可以同時使用兩種類型的索引，但是數字索引的返回值必須是字符串索引返回值類型的子類型。 這是因為當使用 number來索引時，JavaScript會將它轉換成string然后再去索引對象。 也就是說用 100（一個number）去索引等同于使用"100"（一個string）去索引，因此兩者需要保持一致。

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

字符串索引簽名能夠很好的描述dictionary模式，并且它們也會確保所有屬性與其返回值類型相匹配。 因為字符串索引聲明了 obj.property和obj["property"]兩種形式都可以。 下面的例子里， name的類型與字符串索引類型不匹配，所以類型檢查器給出一個錯誤提示：

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

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

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

運行后會得到如下錯誤提示

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

你不能設置readonlyArray[2]，因為索引簽名是只讀的。

本實例結束實踐項目地址

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

?