ts接口的高级用法

索引类型

我们可以通过接口描述索引的类型和通过索引得到的值的类型。例如一个简单数组

['1']

通过索引0得到的就应该是字符串1

interface MyArr {
	[index: number]: string
}
let arr1: MyArr = ['1', '2']
let arr2: MyArr = {0: '1'}  //对象也满足该条件
           

你也可以给索引设定只读属性

interface MyArr {
	readonly readonly [index: number]: string
}
let arr1: MyArr = ['1', '2']
arr1[0] = '3' // Error
           

注意这里的索引你定义为数字，但是属性写为可以转换为数字的字符串也是可以的，如’0’, ‘1’，但是写’a’则会报错。如果你设定为所有类型为字符串，那么写出数字是都不会报错的。

继承

接口说穿了就是我们自己定义了一个数据结构或是限制了部分属性的类型，若是多个接口都有相同特性则可以使用继承的方式实现。

//这是不使用继承的方式
interface A {
  name: string
}
interface B {
  name: string,
  age: number
}
interface C {
  name: string,
  love: string
}
//这是使用了继承的方式
interface A {
  name: string
}
interface B extends A{
  age: number
}
interface C extends A{
  love: string
}
           

一个接口可以被多个接口继承，同样，一个接口也可以继承多个接口，多个接口用逗号隔开。

interface A {
  name: string
}
interface B {
  age: number
}
interface C extends A, extends B{
  age: number
}
           

混合类型接口

在js里面，我们可以直接定义一个函数，并且可以直接函数上面创建自己的属性，因为函数也是对象的一种。在ts里面一样可以。(注意：ts3.1之前是不能这么操作的。)

interface Counter {
  (start: number): string;
  interval: number;
  reset(): void;
}

function getCounter(): Counter {
  let counter = function (start: number) { } as Counter;
  counter.interval = 123;
  counter.reset = function () { };
  return counter;
}