typescipt 接口

TypeScript 的核心原则之一是对值所具有的结构进行类型检查。我们使用接口（Interfaces）来定义对象的类型。接口是对象的状态(属性)和行为(方法)的抽象(描述)

接口初探

// 定义人的接口
interface IPerson {
 id: number
 name: string
 age: number
 sex: string
}

const person1: IPerson = {
 id: 1,
 name: 'tom',
 age: 20,
 sex: '男'
}

类型检查器会查看对象内部的属性是否与IPerson接口描述一致, 如果不一致就会提示类型错误。

可选属性

interface IPerson {
 id: number
 name: string
 age: number
 sex?: string
}

带有可选属性的接口与普通的接口定义差不多，只是在可选属性名字定义的后面加一个 ? 符号。

可选属性的好处之一是可以对可能存在的属性进行预定义，好处之二是可以捕获引用了不存在的属性时的错误。

const person2: IPerson = {
 id: 1,
 name: 'tom',
 age: 20,
 // sex: '男' // 可以没有
}

只读属性

interface IPerson {
 readonly id: number
 name: string
 age: number
 sex?: string
}

一旦赋值后再也不能被改变了。

const person2: IPerson = {
 id: 2,
 name: 'tom',
 age: 20,
 // sex: '男' // 可以没有
 // xxx: 12 // error 没有在接口中定义, 不能有
}
person2.id = 2 // error

readonly vs const

函数类型

interface SearchFunc {
  (source: string, subString: string): boolean
}

这样定义后，我们可以像使用其它接口一样使用这个函数类型的接口。 下例展示了如何创建一个函数类型的变量，并将一个同类型的函数赋值给这个变量。

const mySearch: SearchFunc = function (source: string, 
  sub: string): boolean {
  return source.search(sub) > -1
}

console.log(mySearch('abcd', 'bc'))

类类型、类实现接口

/*
类类型: 实现接口
1. 一个类可以实现多个接口
2. 一个接口可以继承多个接口
*/

interface Alarm {
  alert(): any;
}

interface Light {
  lightOn(): void;
  lightOff(): void;
}

class Car implements Alarm {
  alert() {
    console.log('Car alert');
  }
}

一个类可以实现多个接口

class Car2 implements Alarm, Light {
  alert() {
    console.log('Car alert');
  }
 lightOn() {
   console.log('Car light on');
 }
 lightOff() {
   console.log('Car light off');
 }
}

接口继承接口

interface LightableAlarm extends Alarm, Light {

}

本文章由javascript技术分享原创和收集