接口的概念以及属性类型接口

接口的概念以及属性类型接口

接口的作用：在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作规范，在程序设计里面，接口起到一种限制和规范的作用。接口定义了某一批类所需要遵守的规范，接口不关心这些类的内部状态数据，也不关心这些类里方法的实现细节，它只规定这批类里必须提供某些方法，提供这些方法就可以满足实际需要。typescript中的接口类似于java，同时还增加了更灵活的接口类型，包括属性、函数
可索引和类等。

对批量方法传入参数进行约束
接口：行为和动作的规范、对批量方法进行约束

属性类接口

// 属性接口就是传入对象的约束
interface fullName {
    firstName: string; // 注意以分号结束
    secondName: string
}

function printName (name: fullName) {
    // 必须传入对象：firstName、secondName
    console.log(`${name.firstName}${name.secondName}`)
}

let nameObj = {
    // 传入的参数必须包含：firstName、secondName
    age: 20,
    firstName: '刘',
    secondName: '备'
}

printName(nameObj)

对批量方法进行约束：

// 属性接口就是传入对象的约束
interface fullName {
    firstName: string; // 注意以分号结束
    secondName: string
}

function printName (name: fullName) {
    // 必须传入对象：firstName、secondName
    console.log(`${name.firstName}${name.secondName}`)
}

function printInfo (info: fullName) {
    console.log(`${info.firstName}${info.secondName}考试考了0分，因为他老是不写作业就打王者农药。`)
}
let nameObj = {
    // 传入的参数必须包含：firstName、secondName
    age: 20,
    firstName: '刘',
    secondName: '备'
}

printName(nameObj)
printInfo({firstName: '李', secondName: '宁'})

// 打印结果：刘备
// 打印结果：李宁考试考了0分，因为他老是不写作业就打王者农药。

接口可选属性

// 接口可选属性
interface fullName {
    firstName: string,
    secondName?: string // 可传可不传
}

function printName (name:fullName):void {
    console.log(`${name.firstName}${name.secondName}`)
}

function printFirstName (name:fullName):void {
    console.log(`${name.firstName}`)
}

printName({firstName: '王', secondName: '宝强'})
printFirstName({firstName: '李'})

// 打印结果：王宝强
// 打印结果：李

ts接口完整ajax封装

interface config {
    url: string;
    data?: string;
    type: string;
    dataType: string
}

function ajax (config:config) {
    let xhr = new XMLHttpRequest()
    xhr.open(config.type, config.url, true)
    xhr.send()
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            if (config.dataType == 'json') {
                console.log(JSON.parse(xhr.responseText))
            } else {
                console.log(xhr.responseText)
            }
        }
    }
}

ajax({
    url: 'http://a.itying.com/api/productlist',
    type: 'get',
    dataType: 'json'
})

函数类型接口

函数类型接口：对方法传入的参数，以及返回值进行约束，批量约束

加密的函数类型接口

interface encrypt {
    (key: string, value: string):string
}

let md5:encrypt = function (key:string, value:string):string {
    return key + value
}

let eat:encrypt = function (key:string, value:string):string {
    return '小梦喜欢吃' + key + value
}

console.log(md5('餐厅', '好多食物'))
console.log(eat('杨国福麻辣烫', '炸丸子'))
// 打印结果：餐厅好多食物
// 小梦喜欢吃杨国福麻辣烫炸丸子

可索引接口

数组、对象的约束，不常用

// 定义数组的两种方式
let arr:number[] = [1, 2, 3]
let arr1:Array = ['alex', '2b']

数组约束

interface UserArr {
    [index:number]:string
}

let arr:UserArr = ['sb', '2b']
console.log(arr[0])

对象约束

interface UserObj {
    [index:string]:string
}

let obj:UserObj = {name: '小老虎'}
console.log(obj.name)

类类型接口

对类的约束和抽象类类似

interface Animal {
    name: string;
    eat(food?:string):void;
}

class Dog implements Animal{
    name = ''
    constructor (name:string) {
        this.name = name
    }

    eat (str?:string):void {
        console.log(`${this.name}吃骨头`)
    }
}

class Cat implements Animal{
    name = ''

    constructor(name:string) {
        this.name = name
    }

    eat(food?: string): void {
        console.log(`${this.name}吃${food}`)
    }
}

let d = new Dog('小黄狗')
let c = new Cat('小花猫')
d.eat()
c.eat('鱼')
// 打印结果：小黄狗吃骨头
// 打印结果：小花猫吃鱼

接口扩展