在java中,接口是用来定义一些规范,使用这些接口,就必须实现接口中的方法,而且接口中的属性必须是常量。
javascript中是没有接口的概念的。所以TypeScript在编译成 JavaScript 的时候,所有的接口都会被擦除掉。 
而TypeScript的核心之一就是类型检查。 在TypeScript里,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约并让代码看起来更好理解。

接口的简单使用 
如下代码所示,我们需要给add函数中传入一个对象,如果不使用接口,我们传入的对象可以有其他属性。

function add(num:{x:number,y:number}){ console.log(num.x+num.y); } let n={x:1,y:2,z:3};//这里我们的对象只要包含必要属相且值类型正确即可,允许存在其他属性 add(n);//不报错 // add({x:1,y:2,z:2})//报错,会提示z不存在 add({x:1,y:2});//不报错

用接口来表示,可以看到,我们先定义个接口,然后把符合接口定义的对象传进去,这样能提高代码可读性。 
需要注意的是: 
如果我们不给传进去的对象指定是接口类型的数据,那么传入的对象参数可以包含其他属性,编译器只会检查那些必需的属性是否存在,并且其类型是否匹配。 
如果我们给对象指定是接口类型的数据,那么,对象的属性必须和定义好的接口的必要属性一致。必要属性不能多也不能少。

/*** Created by yzq on 2017/1/12.*/
interface num{x:number;y:number;
}
function add(n:num){console.log(n.x+n.y);
}
let n={x:1,y:2,z:3};
let n1:num={x:1,y:2};//如果我们将n1指定为num类型的数据,那么,该对象所包含的属性必须跟定义好的接口完全一致。不能多也不能少。 // let n2:num={x:1};//错误,缺少y属性 // let n3:num={x:1,y:2,z:3};//错误,没有找到z属性,当我们将对象字面量赋值给变量或作为参数传递的时候。TypeScript会进行额外属性检查。如果一个对象字面量存在任何“目标类型”不包含的属性时,就会报错。 add(n);//不报错 add(n1);//不报错 add(n2); add(n3); // add({x:1,y:2,z:2})//报错,会提示z不存在,额外的属性检查 add({x:1,y:2});//不报错

接口的可选属性 
在实际应用中,接口里的属性不全都是必需的。 有些是只在某些条件下存在,或者根本不存在。在这种个情况下可以是用接口的可选属性去定义。 
如下代码所示,name和age被定义为可选属性,那么在传对象的时候name和age就可有可无。

interface Person{name?:string;age?:number
}function getInfo(p:Person){console.log(p.name);console.log(p.age);
}
let student={} // let student={name:"yzq"} // let student={name:"yzq",age:23} getInfo(student);

接口的只读属性 
如果我们希望对象属性只能在对象刚刚创建的时候修改其值。 我们可以在属性名前用 readonly来指定只读属性。

interface Point{readonly x:number;readonly y:number;
}function getPoint(p:Point){ console.log(p.x); console.log(p.y); } let point:Point={x:1,y:2}; // point.x=2;//错误 这里不能再子修改值 getPoint(point);

定义只读数组 
只读数组也一样,一旦定义后不能再修改数组

let a:ReadonlyArray<number> =[1,2,3,4,5]; // a[0]=2;//不能再修改该数组 // a.length=20;

接口的函数类型 
接口可以描述javascript的任何对象,不仅能描述对象的属性类型,当然也能描述对象的函数类型。 
如下代码所示,接口描述了这个函数的参数类型和返回值类型

interface getStr {/*在这里我们描述了这个接口有个函数 这个函数传进去2个number类型的参数  然后返回一个string类型的数据*/(x: number, y: number): string;
}
let myStr : getStr;
myStr = function (gradeNum: number, classNum: number) { return `${gradeNum}年级${classNum}班`; } console.log(myStr(2,8));//2年级8班

接口的数组类型(可索引的类型) 
跟接口描述函数类型差不多,我们也可以描述那些能够“通过索引得到”的类型,比如通过下标获取数组中的值 a[2];需要注意的是,索引器的类型只能为 number 或者 string。


interface stringArr{/*描述的一个数组 这个数组里面的元素是string类型 并且只能通过number类型来索引  [index:number]是索引器  string是该数组元素类型*/[index:number]:string;// age:number;//需要注意的是,当我们将这个接口是数组类型时,那么,接口中定义的其它属性的类型都必须是该数组的元素类型。  这里的number类型是报错的
}
let strArr:stringArr; strArr=["1","2"]; // strArr.name="3"; let str:string=strArr[0]; console.log(str);//打印1

接口的类类型 
所谓类类型,就是一个类去实现接口,而不是直接把接口拿来用,这更符合我们的使用习惯。

interface IClock{/*定义了一个接口  这个接口中有一个属性和一个方法*/currentTime:Date;getTime(d:Date);
}
/*Time类实现IClock接口*/ class Time implements IClock{ currentTime:Date; getTime(d:Date){ this.currentTime=d; } }

扩展接口 
在TypeScript中,接口跟类一样是可以相互继承的, 这让我们能够从一个接口里复制成员到另一个接口里,可以更灵活地将接口分割到可重用的模块里。

/*接口可以继承接口  并且可以多继承*/interface shape{color:string;
}
interface pen extends shape{ width:number; } let circle=<pen>{};//注意这里的写法,创建一个对象并指定泛型 circle.color="red";//这里可以获取color属性 circle.width=2;//有width属性

一个接口可以继承多个接口,创建出多个接口的合成接口。

/*接口可以继承接口  并且可以多继承*/interface shape{color:string;
}
interface pen extends shape{ width:number; } interface Circle extends shape,pen{ point:number[]; } let c=<Circle>{};//注意这里的写法,创建一个对象并指定泛型 c.point=[1,2]; c.color="red"; c.width=1;

混合类型 
所谓的混合类型就是在一个接口中定义多种类型,比如属性,函数,数组等。

interface Counter {(start: number): string;interval: number;reset(): void;
}function getCounter(): Counter { let counter = <Counter>function (start: number) { }; counter.interval = 123; counter.reset = function () { }; return counter; } let c = getCounter(); c(10); c.reset(); c.interval = 5.0;

TypeScript学习笔记之 接口(Interface)相关推荐

  1. typescript学习笔记1 —— 接口(interface)

    typescript是微软出品的,javascript的超集.让javascript的写法很类似java,核心功能是让JavaScript这个弱类型的语言,增加类型检查,更适合编写企业级应用.之前的a ...

  2. Typescript 学习笔记七:泛型

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  3. Typescript 学习笔记一:介绍、安装、编译

    前言 整理了一下 Typescript 的学习笔记,方便后期遗忘某个知识点的时候,快速回忆. 为了避免凌乱,用 gitbook 结合 marketdown 整理的. github地址是:ts-gitb ...

  4. TypeScript学习笔记3:运算符

    TS 和 JS 相对比的优势 TypeScript的安装步骤.运行问题及代码的简单运行 TypeScript学习笔记1:变量赋值及书写方式 TypeScript学习笔记2:数据类型 文章目录 运算符 ...

  5. TypeScript学习笔记2:数据类型

    TS 和 JS 相对比的优势 TypeScript的安装步骤.运行问题及代码的简单运行 TypeScript学习笔记1:变量赋值及书写方式 TypeScript学习笔记2:数据类型 文章目录 数据类型 ...

  6. TypeScript学习笔记1:变量赋值及书写方式

    TS 和 JS 相对比的优势 TypeScript的安装步骤.运行问题及代码的简单运行 TypeScript学习笔记1:变量赋值及书写方式 TypeScript学习笔记2:数据类型 文章目录 变量赋值 ...

  7. typeScript学习笔记day01——小肉包

    typeScript学习笔记 class1: 一.javaScript(js)的优缺点 javaScript是在微软公司和网景公司之间爆发的浏览器大战期间,由网景公司的Brendan Eich(布兰登 ...

  8. typeScript学习笔记day02——小肉包

    typeScript学习笔记 class3 : 2021.02.24 一.TS编译选项 自动编译文件 编译文件时,使用-w指令后,YS编译器会自动监视文件变化,并在文件发生变化时对文件进行重新编译. ...

  9. EJB3.0学习笔记---多接口的时,实现类处理方法:

    EJB学习笔记--- 1.胖客户端:指的是定义的接口太多了,接口做的工作太多; 胖接口: 2.EJB实现类型的定义,用注解的方式,当一个EJBbean,实现了多个接口的时候, 需要用注解的方式指明哪一 ...

最新文章

  1. Linux .bin安装文件制作
  2. 生物医学图片处理——怎样才算不当操作?
  3. ffmpeg 配置与编译
  4. hdu 4560 拆点最大流 ***
  5. 问题:gateway Invalid host lb://dabing_goods
  6. 水文勘测工比赛计算机基本应用,第四届全国水文勘测工大赛内业操作试题A卷.doc...
  7. 开发Adobe AIR的原生扩展
  8. Django网站管理--ModelAdmin
  9. ZeroClipboard插件——复制到剪切板
  10. hbm.xml支持的类型
  11. wps画图工具 如何将网页快速转换为WPS与WORD文档
  12. (附源码)计算机毕业设计ssm基于JAVA宠物店管理系统
  13. 【EasyAR学习】平面追踪、表面跟踪和运动跟踪、稀疏空间地图
  14. IoT -- 物联网平台架构设计分析
  15. 腾讯云学生服务器更换系统,腾讯云学生轻量服务器免费升配攻略(60G SSD系统盘不支持升级)...
  16. 谷歌浏览器一直无法上网,其他浏览器可以正常上网
  17. 服务器系统tcpip.sys,win7系统tcpip.sys文件引起蓝屏的解决方法
  18. 究竟什么是嵌入式? 嵌入式开发是什么意思?
  19. chromecast 断电重启后时间错误
  20. PXC pxc_strict_mode

热门文章

  1. CCF系列之画图(201409-2)
  2. hdu 2087 剪花布条
  3. Git学习记录(一)
  4. 20种看asp源码的方法及工具
  5. 海思3559A上编译GDB源码操作步骤及简单使用
  6. C++中#error/assert/static_assert的区别及使用
  7. window7系统中64位安装matalbR2009b后出现乱码的解决方案
  8. 【TX2】TX2开发板系统默认串口有ttyS0(调试口)、ttyTHS1、ttyTHS2、ttyTHS3,通过修改设备树文件,可以新增三个串口
  9. 【opencv】ubuntu14.04上编译opencv2.4
  10. 系统dsn oracle,linux平台配置oracle odbc dsn的方法.docx