TypeScript接口,属性类接口、函数类型接口、可索引接口、类类型接口、扩展接口

接口: 行为和动作的规范,对批量方法进行约束(interface)
属性接口
interface FullName{
    firstName:string;   //注意;结束
    secondName:string;
}
function printName(name:FullName){
    // 必须传入对象  firstName  secondName
    console.log(name.firstName+'--'+name.secondName);
}
// printName('1213');  //错误

var obj={   /*传入的参数必须包含 firstName  secondName*/
    firstName:'张',
    secondName:'三'
};
printName(obj)
可选接口
interface FullName{
    firstName:string;
    secondName?:string; // 属性可选(可传可不传)
}
function getName(name:FullName){
    console.log(name)
}  
getName({               
    firstName:'firstName'
})

函数类型接口:对方法传入的参数 以及返回值进行约束
// 加密的函数类型接口
interface encrypt{
    (key:string,value:string):string;
}
var md5:encrypt=function(key:string,value:string):string{
    //模拟操作
    return key+value;
}
console.log(md5('name','zhangsan'));

可索引接口: 数组、对象的约束(不常用)
  1. 可索引接口对数组约束
interface UserArr{
    [index:number]:string // 数组索引为number类型,值为string类型
}
var arr:UserArr=['aaa','bbb'];
// var arr:UserArr=[123,'bbb'];  /*错误*/
  1. 可索引接口对对象约束
interface UserObj{
    [index:string]:string // 对象key为string类型,value为string类型
}
var arr:UserObj={name:'张三'};

类类型接口:对类的约束和抽象类抽象有点相似
interface Animal{
    name:string;
    eat(str:string):void;
}
class Dog implements Animal{
    name:string;
    constructor(name:string){
        this.name=name;
    }
    eat(){ // 参数可选,但必须实现eat方法
        console.log(this.name+'吃粮食')
    }
}
var d=new Dog('小黑');
d.eat();
接口扩展:接口可以继承接口
 interface Animal{
        eat():void;
    }
    interface Person extends Animal{
        work():void;
    }
    class Web implements Person{
        public name:string;
        constructor(name:string){
            this.name=name;
        }
        // 实例必须实现父类指定方法
        eat(){
            console.log(this.name+'喜欢吃馒头')
        }
        work(){
            console.log(this.name+'写代码');
        }
        
    }
    var w=new Web('小李');
    w.eat();
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值