轉(zhuǎn)載地址

TypeScript基礎(chǔ)入門 - 接口 - 可索引的類型

項(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)行類型檢查。 它有時(shí)被稱做“鴨式辨型法”或“結(jié)構(gòu)性子類型化”。 在TypeScript里，接口的作用就是為這些類型命名和為你的代碼或第三方代碼定義契約。

可索引的類型

與使用接口描述函數(shù)類型差不多，我們也可以描述那些能夠“通過索引得到”的類型，比如a[10]或ageMap["daniel"]。 可索引類型具有一個(gè) 索引簽名，它描述了對(duì)象索引的類型，還有相應(yīng)的索引返回值類型。 讓我們看一個(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類型的返回值。共有支持兩種索引簽名：字符串和數(shù)字。 可以同時(shí)使用兩種類型的索引，但是數(shù)字索引的返回值必須是字符串索引返回值類型的子類型。 這是因?yàn)楫?dāng)使用 number來索引時(shí)，JavaScript會(huì)將它轉(zhuǎn)換成string然后再去索引對(duì)象。 也就是說用 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ù)字索引類型“Person”不能賦給字符串索引類型“Student”
    [x: string]: Student;
}

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

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

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

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

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