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

2024-07-05 13:48| 来源: 网络整理| 查看: 265

文章目录接口的概念以及属性类型接口属性类接口函数类型接口可索引接口类类型接口接口扩展

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

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

【本文地址】

公司简介

联系我们