接口是一种规范的定义,定义行为和动作的规范,定义了某一批类所需要遵守的规范,只规定这批类必须提供某些方法,类似于java,同时还增加了更灵活的接口类型,包括属性,函数,可索引和类,接口扩展等。
属性类型接口
ts中自定义方法传入参数对json进行约束:行为和动作的规范
function printLabel(labelInfo:{label:string}):void{
console.log("printLabel")
}
printLabel({label:'张三'})
- interface-对批量方法传入参数进行约束
// 传入对象的约束,属性接口
interface FullName{
firstName:string;
second:string;
}
function printName(name:FullName){
// 必须传入对象 :firstName secondName :string类型
console.log(name.firstName + name.secondName)
}
printName({ // 必须有FullName中的属性
firstName:'张',
secondName:'三'
})
// 或
// 含有FullName中的属性
var obj = {
age:20,
firstName:'张',
secondName:'三'
}
printName(obj)
- 可选属性:参数的顺序可以不一样
interface FullName{
flirstName:string;
secondName?:string;
}
- request接口
// 如:request请求接口
$.ajax({
type:"GET",
url:"test.json",
data:{username:$("#username").val(),content:$("#content").val()},
dataType:"json"
})
// 属性类型接口举例:原生js封装
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) // true:异步
xhr.send(config.data)
xhr.onreadyStatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
console.log("success")
if(config.dataType == 'json'){
JSON.parse(xhr.responseText)
}else{
console.log(xhr.responseText)
}
}
}
}
ajax({
type:'get',
url:'http://www.baidu.com',
data:'name = zhangsan'
dataType:'json'
})
函数类型接口
对方法传入的参数和返回值以及返回值进行约束(批量约束)
加密的函数类型接口
interface encrypt{
(key:string,value:string):string;
}
var md5:encrypt = function(key:string,value:string):string{
return key+value; // 模拟操作
}
console.log(md5('name','zhangsan'))
var sha1:encrypt = function(key:string,value:string):string{
return key+'--'+value;
}
console.log(sha1('name','zhangsan'))
可索引接口
数组、对象的约束,不常用
- 对
数组
的约束
var arr:number[] = [22342,2313]
var arr1:Array<string>=['111','222']
interface UserArr{
[index:number]:string
}
var arr:UserArr = ['aaaa','bbbb']
console.log(arr[0])
2.对对象
的约束
interface UserObj{
[index:string]:string
}
var arr:UserObj = { name:'20'}
类类型接口
对类的约束,和抽象类有点相似,也有点像多态
父定义标准,子类按照标准输出对应的属性方法
interface Animal{
name:string;
eat(str:string):void;
}
// 不是继承;implements实现上面的接口
class Dog implements Animal{
name:string;
constructor(name:string){
this.name = name;
}
eat(){
console.log(this.name + '吃')
}
}
var d = new Dog("小黑");
d.eat()
class Cat implements Animal{
name:string;
constructor(name:string){
this.name = name;
}
eat(food:string){
console.log(this.name + food)
}
}
var c = new Cat('小花')
c.eat('吃猫粮')
接口扩展
- 接口可以继承接口
interface Animal{
eat():void;
}
// 扩展接口,接口继承
interafce Person extends Animal{
work():void;
}
class Web implements Person{
public name:string;
constructor(name:string){
this.name = name
}
eat(){
console.log(....)
}
work(){
console.log(...)
}
}
var w =new Web()
w.work()
- 类接口并继承接口
// 在以上代码的基础上改造
class Programmer{
public name:string;
constructor(name:string){
this.name = name;
}
coding(code:string){
console.log(this.name + code)
}
}
class Web extends Programmer implements Person{
public name:string;
constructor(name:string){
super(name)
}
eat(){
console.log(....)
}
work(){
console.log(...)
}
}
var w =new Web("人物")
w.coding("写代码")