typeScript中的接口（五）

属性类型接口

ts中自定义传入参数，对json进行约束

function printLabel(labelInfo2:{label:string}){

    console.log(labelInfo2)

}

printLabel({'label':'ABC'}) //{label: "ABC"}

//printLabel({label1:'ABC'})   //报错，传入参数必须是包含有label属性的对象

interface FullName{ //就是传入参数的约束 属性接口

    Name1:string;

    Name2:string;

    Name3:string;

}

function getInfo(name:FullName):void{

    console.log(name)

}

var obj={ //传入参数必须与接口参数格式、类型保持一致

    Name1:'zhangsan',

    Name2:'lisi',

    Name3:'wangwu'

}

getInfo(obj)

任意属性

interface Person {
    name: string;
    age?: number;
    [propName: string]: any;
}
   
let myinfo: Person = {
    name: 'xiaoming',
    age:20,
    sex: '男',
};
console.log(myinfo)

//一旦定义了任意属性，那么确定属性和可选属性都必须是它的子属性
interface Person {
    name: string;
    age?: number;
    [propName: string]:string;    //报错，这里任意属性的值设置为string，但age的值是number,number不是string 的子属性
  }
  let info: Person = {
    name: '小明',
    age: 25,
    address: '深圳深南大道21号一楼',
  };

只读属性

interface Person {

    readonly id: number;

    name: string;

    age?: number;

    [propName: string]: any;

}

let info: Person = {

    id: 250100,

    name: '小明',

    school_url: 'https://www.baidu.com',

};

//info.id=123 // Cannot assign to 'id' because it is a constant or a read-only property.



interface Person {

    readonly id?: number;

    name: string;

    age?: number;

    [propName: string]: any;

}

let info: Person = {

    name: '小明',

    school_url: 'https://www.baidu.com',

};

//info.id = 89757; //只读的约束存在于第一次给对象赋值的时候，而不是第一次给只读属性赋值的时候

接口对批量方法 传入参数进行约束

interface studentinfo{
    name:string;
    age:number;
    sex:string;
    score?:number;   //接口可选属性
}
function getInfo(info:studentinfo):void{
    console.log(`姓名：${info.name}，年龄：${info.age}`)
}
function printStudentInfo(info:studentinfo):void{
    alert(`姓名：${info.name}，年龄：${info.age}，性别${info.sex}，总分：${info.score}`)
}
getInfo({
    name:'阿一一',
    age:20,
    sex:'男'
})
printStudentInfo({
    name:'阿一一',
    age:20,
    sex:'男',
    score:540
})

interface Config{
    type:string;
    url:string;
    data?:any;
    dataType:string;
}

//例如这里用原生js封装的ajax 
function ajax(config:Config){
   var 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));
            }else{
                console.log(xhr.responseText)
            }
        }else{
            console.log('fail')
        }
   }
}


ajax({
    type:'get',
    data:{},
    url:'http://XXX',
    dataType:'json'
})

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

加密函数类型接口

interface encrypt{
    (key:string,val:string):string;
}

var md5:encrypt=function(key:string,val:string):string{
    return key+'**'+val
}

var hash:encrypt=function(key:string,val:string):string{
    return val+'&&&--'+key
}

hash('姓名','mariah')

可索引接口：对数组和对象的约束

interface userInfo{
    [index:number]:string;
}
var arr:userInfo = ['a','0']
console.log(arr)

interface userobj{
    [index:string]:string
}
var obj:userobj={'name':'lili'}
//var obj:userobj={'name':'lili','age':20}   //报错

类类型接口:对类的约束

interface Animal{
    name:string;
    run(name:string):void;
}

class Pig implements Animal{
    name:string;
    constructor(name:string){
        this.name=name
    }
    run(){
        alert(this.name+'爱唱歌')
    }
}
var d = new Pig('白居居')
d.run();

class Cat implements Animal{
    name:string;
    constructor(name:string){
        this.name=name
    }
    run(){
        alert(this.name+'喜欢毛线团')
    }
}
var c = new Cat('喵喵')
c.run();

接口的扩展

//接口可以继承接口,一个接口可以继承多个接口，中间用‘,’分隔
interface foods{
    eat():void;
}
interface Score{
    score():void;

}
interface Person extends foods,Score{  //一个接口可以继承多个接口
    study():void;
}
class Student1 implements Person{
    name:string;
    constructor(name:string){
        this.name=name
    }
    score(){
        console.log(this.name+'期末考试总分423')
    }
    eat(){
        console.log(this.name+'吃火锅')
    }
    study(){
        console.log(this.name+'在学习')
    }
}
var student1 = new Student1('小明');
student1.score();
student1.eat();
student1.study();

interface Food{
    eat():void;
}
interface Score{
    scoreFn():void;
}

interface InfoData extends Food,Score{
    address():void;
}

class StudentAll{
    name:string;
    score:number;
    constructor(name:string,score:number){
        this.name=name;
        this.score=score;
    }
    run(){
       console.log(this.name+'英语考了'+this.score) 
    }
}
class Student1 extends StudentAll implements InfoData{
    constructor(name:string,score:number){
        super(name,score)
    }
    eat(){
        console.log(this.name+'eat')
    }
    scoreFn(){
      console.log(this.name+'score')
    }
    address(){
        console.log(this.name+'address')
    }
}
var s1 = new Student1('小明',100)
s1.eat()
s1.run()
s1.scoreFn()
s1.address()