接口的作用

  • 对“对象”进行约束描述
  • 对“类”的一部分进行抽象

属性接口

接口中可定义 确定属性、可选属性、任意属性、只读属性

确定属性:接口中约束的类型,定义变量的时候不能少

interface Vegetable {
  color: string
  type: string
}
let vegetableObj: Vegetable = {
color:'red,
  type: 'tamato'
}

可选属性:接口中的类型可以不定义,在接口属性名后加个?号

interface Vegetable {
  color?: string //这里color就是可选属性,定义变量时有没有都不会报错
  type: string
}

任意属性

一旦定义了任意属性,那么确定属性和可选属性的类型都必须是任意属性类型的子类; 定义了任意属性后可以出现定义的变量属性名多于接口中约束的情况

interface Vegetable {
  color?: string
  type: string
 [prop: string]: any // 索引签名方式
}
let vegetableObj: Vegetable = {
 color:'red,
  type: 'tamato',
length:1
}

只读属性

即接口中约束的属性只能读,不能改写。在属性名前加readonly

interface Vegetable {
  color?: string
  readonly type: string
}

函数接口:对传入函数的参数及返回值进行约束

interface AddFunc {
  (num1: number, num2: number): number
}
// 参数num1,num2为number类型,返回值也为number
const add: AddFunc = (n1, n2) => n1 + n2

// 也可以写成type AddFunc = (num1: number, num2: number) => number

索引接口:可对数组或对象进行约束

interface Role {
  [id: number]: string//这里id如果改为string,那么下面定义roles的0为数字也不会报错,会先将number转为字符串
}
const roles: Role = {
  0: '0'
}

接口继承:类似于class继承

// 接口继承
interface Ball {
  color: string
}

interface Toy extends Ball {//会继承Ball中的属性
  type: string 
}
interface Doll extends Ball {
  length: number
}

const toyBear: Toy = {
  color: 'brown',
  type: 'doll'
}
const baby: Doll = {
  length: 5,
  color: 'blue'
}

 混合类型接口

有时希望一个对象同时具有上面提到多种类型,比如一个对象可以当做函数使用,同时又具有属性和方法。

interface Counter {
  (): void //约束了一个函数
  count: number //约束了count
}
const getCounter = (): Counter => {
  const c = () => {
    c.count++
  }
  c.count = 0
  return c
}
const counter: Counter = getCounter()
counter()
console.log(counter.count)

爬。