一、接口的作用
在面向对象编程中，接口是一种规范的定义，它定义了行为和动作的规范；在程序设计里面，接口起到一种限制和规范的作用。
接口定义了某一批类所需要遵守的规范，接口并不关心这些类的内部状态数据，也不关心这些类里方法的实现细节，它只规定这批类里必须提供某些方法，提供这些方法的类就可以满足实际需要。
typescript 中的接口类似于 java，同时还增加了更灵活的接口类型，包括属性、函数、可索引和类等。
二、属性类型接口
1、了解，函数参数类型约束
typescript 中 函数的参数类型约束，只能对单个函数生效
// ts 中定义方法传入参数，约束类型必须为 string
function print(label: string): void {
console.log(label)
}
print('hahah') // hahah
// ts 中定义方法传入参数，对 json 进行约束
function printObj(labelInfo: {
label: string }): void {
console.log(labelInfo.label)
}
printObj({
label: 'hahah' }) // hahah
2、属性类型接口对方法入参批量约束
属性接口用来对 json 进行约束，对批量方法传入参数进行约束。 通过 interface 关键字来定义接口。
// 定义属性接口，对传入对象进行约束
interface FullName {
firstName: string; // 注意，以 ; 结束，可省略
lastName: string
}
// 定义方法 getName
function getName(name: FullName): void {
console.log(`${
name.firstName}${
name.lastName}`)
}
// 定义方法 returnName
function returnName(name: FullName): string {
return `${
name.firstName}${
name.lastName}`
}
// 传入参数必须包含 firstName、lastName；参数的顺序可以不一样
getName({
firstName: '林', lastName: '一'})
returnName({
firstName: '佟', lastName: '年'})
3、属性类型接口的可选属性
typescript 中 通过【 属性名称?: 数据类型 】形式来定义可选属性，代表该属性在当前 json 对象可以不传。
// 接口：可选属性
interface FullName {
firstName?: string // 可选属性
lastName: string
}
// 定义方法 getName
function getName(name: FullName): void {
console.log(`${
name.firstName}${
name.lastName}`)
}
getName({
lastName: '一'}) // undefined一
4、属性类型接口案例
jquery ajax请求 封装，仅为示例
interface Config {
type: string // 请求方式
url: string // 请求地址
data?: string // 请求参数
dataType: string // 参数类型
}
function ajax(config: Config) {
let xhr = new XMLHttpRequest()
xhr.open(config.type, config.url, true)
xhr.send(config.data)
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
if (config.dataType =='json') {
console.log(JSON.parse(xhr.responseText))
}
}
}
}
ajax({
type: 'get',
url: 'http://a.itying.com/api/productlist', // api
data:'name=zhangsan',
dataType: 'json'
})
三、函数类型接口
对方法传入的参数，以及返回值进行约束
// 定义加密的函数类型接口
interface encrypt {
(key: string, value: string): string
}
const md5: encrypt = function(key:string, value: string): string {
// 模拟操作，加密算法
return `${
key}+${
value}`
}
const sha1: encrypt = function(key:string, value: string): string {
// 模拟操作，加密算法
return `${
key}-${
value}`
}
console.log(md5('md5', '加密字符串')) // md5+加密字符串
console.log(sha1('sha1', '加密字符串')) // sha1-加密字符串
四、可索引类型接口
对数组、对象进行约束，不常用
1、约束数组
// ts中定义数组
const arr: number[] = [1, 2]
const arr2: Array<string> = ['1', '2']
// 定义可索引类型接口
interface UseArr {
// 索引值为number，value为string
[index: number]: string
}
const arr3: UseArr = ['1', '2']
2、约束对象
interface UseObj {
// 索引值为string，value为string
[index: string]: string
}
const obj: UseObj = {
name: 'lily',
sex: '女'
}
五、类类型接口
类类型接口用来对类进行约束，和抽象类相似。通过关键字 interface 定义接口，在类中通过关键字 implements 来实现接口。
// 定义 类类型接口（标准）
interface Animal {
name: string
eat(str: string): void
}
// 实现接口
class Dog implements Animal {
public name: string
constructor(name: string) {
this.name = name
}
// 类中必须要有 eat 方法，没有 ts 编译保存；参数可以没有
eat(str: string): void {
console.log(`${
this.name}吃${
str}`)
}
}
// 实例化 Dog 类
const dog = new Dog('小黑')
dog.eat('粮食') // 小黑吃粮食
六、接口扩展
接口可以继承接口，接口之前通过关键字 extends 进行继承。
interface Animal {
eat(): void
}
// Person接口 继承 Animal接口
interface Person extends Animal {
work(): void
}
// People类 使用 Person接口
class People implements Person {
public name: string
constructor(name: string) {
this.name = name
}
eat(): void {
console.log(this.name, 'People类必须有eat方法')
}
work(): void {
console.log(this.name, 'People类必须有work方法')
}
}
const people = new People('某个人')
people.eat() // 某个人 People类必须有eat方法
people.work() // 某个人 People类必须有work方法
复杂应用示例，类继承父类并实现接口
interface Animal {
eat(): void
}
interface Person extends Animal {
work(): void
}
class Programmer {
public name: string
constructor(name: string) {
this.name = name
}
coding(code: string): void {
console.log(this.name + code)
}
}
// People类 继承Programmer类 使用Person接口
class People extends Programmer implements Person {
constructor(name: string) {
super(name)
}
eat(): void {
console.log(this.name, 'People类必须有eat方法')
}
work(): void {
console.log(this.name, 'People类必须有work方法')
}
}
const people = new People('某个人')
people.eat() // 某个人 People类必须有eat方法
people.work() // 某个人 People类必须有work方法
people.coding('在工作') // 某个人在工作