接口的高阶用法

索引类型

比如一个接口索引是数字的话,就不能在改变索引的类型

interface RoleDic{
  [id:number]:string
}
const role1:RoleDic={
  0:"super_admin",
  1:"admin"
}
const role2:RoleDic{
  s:"super_admin", //error 不能将类型{s:string}分配给RoleDic
  a:"admin"
}
const role3:RoleDic = ["super_admin","admin"]

上面的例子中 role3 定义了一个数组,索引为数值类型,值为字符串类型

当然了也可以给索引设置 readonly,从而防止索引返回值被修改

interface RoleDic{
  readonly [id:number]:string
}
const role:RoleDic = {
  0:"super_admin"
}
role[0] = "admin"; //error错误,因为签名只允许读

这里要特别注意的就是索引序号值绝对不能相等,否则后面的会把前面的覆盖掉比如

const obj = {
  123: 'a', //这里定义了一个数值类型的123这个属性
  '123': 'b' //这里定义了一个字符串类型的123属性,标识符123重复
}
console.log(obj) // {"123","b"}

继承接口

接口可以继承,这和类一样，提高接口复用性

举个例子:我们定义 Vegetables 接口,他会对 color 属性进行限制。再定义两个接口,一个为 Tomato,一个为 Carrot,这两个类都对 color 进行限制

interface Vegetables {
  color: string;
}
interface Tomato {
  color: string;
  radius: number;
}
interface Carrot {
  color: string;
  length: number;
}

三个接口都对 color 有定义,但这样很繁琐,所以我们可以改为继承

interface Vegetables{
  color:string;
}
interface Tomato extends Vegetables{
  radius:number;
}
interface Carrot extends Vegetables{
  length:number;
}
const tomato:Tomato{
  radius:1.2; //error colormissing
}
const carrot:Carrot={
  color:"orange",
  length:20
}

一个接口可以被多个接口继承,同样一个接口可以继承了多个接口,多个接口用逗号隔开,比如我们在定义一个 Food 接口,Tomato 继承 Food

interface Vegetables {
  color: string;
}
interface Food {
  type: string;
}
interface Tomato extends Food, Vegetabls {
  radius: number;
}
const tomato: Tomato = {
  type: 'vegetables',
  color: 'red',
  radius: 1.2
} //在定义tomato变量时将继承过来的color和type属性共同声明