跳至主要內容

接口


接口

接口的作用就是为这些类型命名和为代码或第三方代码定义契约

接口可以限制类的结构

// 定义接口类型
interface LabelledValue {
  label: string
}

// 定义函数
function printLabel(labelledObj: LabelledValue) {
  console.log(labelledObj.label)
}

const labelObj = { size: 10, label: 'Size 10 Object' }
printLabel(labelObj)

// 可选属性
interface SquareConfig {
  color?: string
  width?: number
}

// 只读属性
interface Point {
  readonly x: number
  readonly y: number
}

// 接口中的所有属性都不能有实际的值
// 接口只定义对象的结构,不考虑实际的值
// 在接口中,所有的方法都是抽象方法
interface myInter {
  name: string

  sayHello: () => string
}

class Inter implements myInter {
  name: string

  sayHello(): string {
    return ''
  }
}

对于只读,const支持变量的只读,readonly支持属性的只读

  • 抽象类中可以有抽象方法和普通方法,抽象方法就是需要自己实现的方法
  • 接口中只有抽象方法,对方法进行约束定义。使用implements后,实现抽象方法

函数类型

// 接口的函数类型
interface SearchFunc {
  say: (name: string, age: number) => string
  sex: boolean
}

const searchTest: SearchFunc = {
  sex: true,
  say: (name: string, age: number) => {
    return name
  }
}
console.log(searchTest)

// 通过接口来约束函数类型
interface myFunc {
  (name: string): string
}

const func: myFunc = (name: string) => {
  return name
}
console.log(func('储凡'))

可索引类型

指定索引类型,例如,指定对象key的类型

interface StrArray {
// 索引为number类型,值为字符串类型
  [index: number]: string
}

const myArray: StrArray = ['储凡', 'chufan']

const myStr: string = myArray[0]

console.log(myStr)

类类型

// 类类型
interface Plan {
  food: string
  eat: (something: string) => boolean

}

// 通过接口来约束类的属性、方法
class PlanA implements Plan {
  food: string

  eat(something: string): boolean {
    return false
  }
}

继承接口

interface FairyA {
  name: string
}

interface FairyB {
  age: number
}

interface Fairy extends FairyA, FairyB {
  gender: number
}

const fairy: Fairy = {
  name: '储凡',
  age: 18,
  gender: 0
}

console.log(fairy)