TypeScript学习笔记三 接口 可索引的类型

官方教程：https://www.tslang.cn/docs/handbook/interfaces.html

 

用来描述可以通过索引得到值的类型。

interface StringArray {
  [index: number]: string;
}

let myArray: StringArray;
myArray = ["Bob", "Fred"];

let myStr: string = myArray[0];

1、接口名叫StringArray，描述了一个可以通过索引index，索引是一个number，通过索引可以得到string的类型。

interface StringArray {
    [test: string]: string
  }
  
  let myArray: StringArray
  myArray = {aa:"aaaa的值",bb:"bbbb的值"}
  
  let myStr: string = myArray["aa"]

  console.log(myStr)

 2、还是这个接口，描述了一个可以通过索引test,索引是一个string，通过索引可以得到string的类型。

---

要是这个接口里再写其他属性呢？？

interface StringArray {
    [test: string]: any
    name: string
  }
  
  let myArray: StringArray
  myArray = {name:"测试",aa:"aaaa的值",bb:"bbbb的值"}
  
  let myStr: string = myArray["bb"]
  let myName: string = myArray["name"]

  console.log(myStr)
  console.log(myName)

---

要是string类型索引和number类型索引同时存在呢？？

 可以同时使用两种类型的索引，但是数字索引的返回值必须是字符串索引返回值类型的子类型。

 

class Animal {
    name: string;
}
class Dog extends Animal {
    breed: string;
}

interface isOkay {
    [x: number]: Dog;
    [x: string]: Animal;
}

那么用这个isOkay描述出来的变量是啥呢？

应该是一个可以通过字符串索引，得到Animal实例的变量

class Animal {
    name: string;
}
class Dog extends Animal {
    breed: string;
}

interface isOkay {
  //  [x: number]: Dog;
    [x: string]: Animal;
}

let animalOne = new Animal()
animalOne.name = "cat"
let obj = {cat:animalOne}


let okValue:isOkay = obj

console.log(okValue["cat"].name)

这里[x: number]: Dog;其实没有卵用

---

只有[x: number]: Dog;的话就是

应该是一个可以通过数字索引，得到Dog实例的变量

class Animal {
    name: string;
}
class Dog extends Animal {
    breed: string;
}

interface isOkay {
    [x: number]: Dog;
    // [x: string]: Animal;
}


let dogOne = new Dog()
dogOne.name = "er-ha"
dogOne.breed = "一天生一窝"


let dogTwo = new Dog()
dogTwo.name = "tai-di"
dogTwo.breed = "一天生八窝"

let dogArray = [dogOne,dogTwo]

let okValueTwo:isOkay = dogArray

console.log("狗的名字是：  " + okValueTwo[1].name + "瞎扯的繁殖能力是：  " + okValueTwo[1].breed)

---

如果这两个都 存在呢？

[x: number]: Dog;

[x: string]: Animal;

描述的应该是，通过字符串索引，可以得到Animal实例，同时通过数字索引可以得到Dog实例

这样的数据结构是啥样的呢？？？不知道了，好尴尬！！！ 

---

按上面的道理，解释一下，下面代码出错的原因。

interface NumberDictionary {
  [index: string]: number;
  length: number;    // 可以，length是number类型
  name: string       // 错误，`name`的类型不是索引类型的子类型
}

 大白话解释：

 

这个接口描述了一个变量，可以通过字符串索引，获得一个数字。

其中，有length和name,也就是，你可以以length和name作为索引获取值

但是：length作为索引获取的是number，可是name作为索引获取的是string字符串

所以与索引描述冲突了，这个接口就是描述错误的了

改正：

1、

interface NumberDictionary {
    [index: string]: number;
    length: number;    
    name: number       // name获取的也是number
  }

2、

interface NumberDictionary {
    [index: string]: any;   // 任何类型
    length: number;    
    name: string       
  }