接口的作用:

在面向对象的编程中,接口是一种规范的定义,它定义了行为和动作的规范,在程序设计里面,接口起到一种限制和规范的作用。接口定义了某一批类所需要遵守的规范,接口不关心这些类的内部状态数据,也不关心这些类里方法的实现细节,它只规定这批类里必须提供某些方法,提供这些方法的类就可以满足实际需要。 typescrip中的接口类似于java,同时还增加了更灵活的接口类型,包括属性、函数、可索引和类等。

定义标准。

属性类接口

先来看一个在TS中定义方法

        function printLabel():void {
console.log('printLabel');
}
printLabel();

ts中定义方法传入参数

       function printLabel(label:string):void {
console.log('printLabel');
} printLabel('hahah');

ts中自定义方法传入参数,对json进行约束

       function printLabel(labelInfo:{label:string}):void {
console.log('printLabel');
} printLabel('hahah'); //错误写法 printLabel({name:'张三'}); //错误的写法 printLabel({label:'张三'}); //正确的写法

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

接口:行为和动作的规范,对批量方法进行约束

interface FullName {
firstName: string; //注意;结束
secondName: string;
} function printName(name: FullName) {
// 必须传入对象 firstName secondName
console.log(name.firstName + '--' + name.secondName);
} function printInfo(info: FullName) { // 必须传入对象 firstName secondName
console.log(info.firstName + info.secondName);
} var obj = { /*传入的参数必须包含 firstName secondName*/
age: 20,
firstName: '张',
secondName: '三'
};
printName(obj); printInfo({
firstName: '李',
secondName: '四'
})

可选属性

    interface FullName{
firstName:string;
secondName?:string;
} function getName(name:FullName){
console.log(name)
}
getName({
firstName:'firstName'
})

函数类型接口

接口能够描述JavaScript中对象拥有的各种各样的外形。 除了描述带有属性的普通对象外,接口也可以描述函数类型。

为了使用接口表示函数类型,我们需要给接口定义一个调用签名。 它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型。

interface encrypt{
(key:string,value:string):string;
} var md5:encrypt=function(key1:string,value1:string):string{
//模拟操作
return key1+value1;
} console.log(md5('name','zhangsan'));

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

可索引接口

数组、对象的约束 (不常用)

数组约束

interface UserArr{
[index:number]:string
} // var arr:UserArr=['aaa','bbb']; //正确 // console.log(arr[0]); var arr:UserArr=[123,'bbb']; /*错误*/ console.log(arr[0]);

对象约束

interface UserObj {

    [index: string]: 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(){ 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;
} 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)
}
eat(){ console.log(this.name+'喜欢吃馒头')
}
work(){ console.log(this.name+'写代码');
} } var w=new Web('小李'); // w.eat(); w.coding('写ts代码');

最新文章

  1. JSON总结(java篇)
  2. DP专辑
  3. linux 维护常见场景小命令 (未完待续)
  4. C#的类,构造函数以及Array阵列的数据填充与绑定
  5. 编写高质量代码改善C#程序的157个建议[为泛型指定初始值、使用委托声明、使用Lambda替代方法和匿名方法]
  6. Path对象
  7. 如何垂直居中<img>?
  8. EBS开发之环境迁移
  9. 基于VirtualBox虚拟机安装Ubuntu教程
  10. 在Java中,关于.Class()与.getCalss与.getClass().getName()的区别
  11. Codeforces Round #317 (div 2)
  12. redmine增加文本输入框默认格式
  13. Fibonacci (hdu1568)数学公式
  14. Mongodb集群与分片 1
  15. Android Http 下载
  16. 怎么上传自己的代码/项目到自己的github仓库上
  17. 关于Cocos2d-x中字体的使用
  18. 关于CSS中的元素定位
  19. USB驱动程序之USB设备驱动程序2鼠标用作键盘学习笔记
  20. redis主从持久化讨论

热门文章

  1. C#中多集合组合实现
  2. python(练习题)
  3. 五、Linux_ping命令
  4. springboot+mybatis +yml文件配置多数据源
  5. Fuel
  6. spring cloud (八) Config client 和项目公共配置
  7. 微信小程序和APP优劣势大对比
  8. Python常用标准库函数
  9. c++中关联容器map的使用
  10. fastjson<=1.2.47反序列化RCE漏洞