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

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

接口的作用:在面向对象的编程中,接口是一种规范的定义,它定义了行为和动作规范,在程序设计里面,接口起到一种限制和规范的作用。接口定义了某一批类所需要遵守的规范,接口不关心这些类的内部状态数据,也不关心这些类里方法的实现细节,它只规定这批类里必须提供某些方法,提供这些方法就可以满足实际需要。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<string> = ['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('鱼')
// 打印结果:小黄狗吃骨头
// 打印结果:小花猫吃鱼

接口扩展

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值