TypeScript学习第六篇 － 接口的定义

// 约束传入的对象
interface FullName{
    firstName:string;
    secondName:string;
}

// 传参的类型为约束好的接口对象
function printName (name:FullName){
    console.log(name.firstName+'--'+name.secondName);
}

// 如果直接将参数传入，就只能传入约束过的字段值(firstName,secondName);
printName({
    firstName:'李',
    secondName:'四'
});

// 如果需要添加一些参数，需要将所有参数封装成一个对象传入。
var obj = {
    age:20,
    firstName:'张',
    secondName:'三'
}
printName(obj);

// 约束传入的对象
interface FullName{
    firstName:string;
    // 如果添加了问号，表示参数可传可不传
    secondName?:string;
}

// 传参的类型为约束好的接口对象
function printName (name:FullName){
    console.log(name);
}

// 由于secondName为可传可不传，所以只需要传入一个参数即可。
printName({
    firstName:'李四'
});

// 定义Ajax请求必须要传的参数
interface Config{
    type:string;
    url:string;
    data?:string;
    dataType:string;
}

// 定义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'){
               JSON.parse(xhr.responseText); 
            }else{
                console.log(xhr.responseText);
            }
        }
    }
};
// 调用封装方法
Ajax({
    type:'get',
    url:'http://www.baidu.com',
    dataType:'json'
})

// 定义一个加密的函数类型接口
interface encrypt{
    // 定义参数类型与返回类型
    (key:string,value:string):string
}
// 参数类型与返回类型必须符合接口规范
var MD5:encrypt = function(key:string,value:string):string{
    // 模拟操作
    return key + value;
}
console.log(MD5('username','password'));

// 对数组的约束
interface UserArr{
    // 约束索引为数字类型，数组中的元素为字符类型
    [index:number]:string
}

// var arr:UserArr = [123,456];
// 报错

var arr:UserArr=['Lucy','Augus'];
// OK

// 对象的约束
interface UserObj{
    [index:string]:string
}

// var arr:UserObj={age:20};
// 报错

var arr:UserObj={age:'20'};
// OK

// 定义类的属性与方法 
interface Animal{
    name:string;
    eat(str:string):void;
}
class Dog implements Animal{
    name:string;
    constructor(name:string){
        this.name = name;
    }
    // 可以不传参数，但是必须要定义方法
    eat(food:string){
        console.log(this.name +'吃'+food);
    }
}
var dog = new Dog('小黑');
dog.eat('肉');

// 定义父类接口
interface Animal{
    eat():void;
}

// 定义子类接口
interface Person extends Animal{
    work():void;
}

class Web implements Person{
    public name:string;
    constructor(name:string){
        this.name = name;
    }
    // 必须实现父类接口Animal定义的方法
    eat(){
        console.log(this.name+'吃肉');
    }
    // 必须实现子类接口Person定义的方法
    work(){
        console.log(this.name +'写代码')
    }
}

var boy = new Web('小李');
boy.eat();
// 小李吃肉

// 定义父类接口
interface Animal{
    eat():void;
}
// 定义子类接口
interface Person extends Animal{
    work():void;
}
// 定义一个类
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{
    constructor(name:string){
        super(name)
    }
    // 实现基类Animal定义的方法
    eat(){
        console.log(this.name+'吃肉');
    }
    // 实现Person类定义的方法
    work(){
        console.log(this.name +'工作');
    }
}

var boy = new Web('小李');

boy.eat();
// 小李吃肉

boy.coding('写前端代码');
// 小李写前端代码