当前位置: 首页 > 编程日记 > 正文

TypeScript学习笔记之 接口(Interface)

在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;

相关文章:

【组队学习】【33期】数据可视化(Matplotlib)

数据可视化&#xff08;Matplotlib&#xff09; 航路开辟者&#xff1a;杨剑砺、杨煜、耿远昊、李运佳、居凤霞领航员&#xff1a;王森航海士&#xff1a;肖明远、郭棉昇 基本信息 开源内容&#xff1a;https://github.com/datawhalechina/fantastic-matplotlib开源内容&…

布尔定理及证明(完整版)

这篇文章的目的是以布尔代数公理证明定理。 对偶原理&#xff1a;0with1, with 互换以后&#xff0c;公理&#xff08;定理&#xff09;任然成立。 布尔代数的公理如下 单变量的布尔代数定理如下 单变量的布尔代数定理很容易用真值表证明。 多变量的布尔定理如下 交换律&…

创建DLL动态链接库——声明导出法

DLL声明导出法&#xff1a;是通过使用__declspec(dllexport)&#xff0c;添加到需要导出的函数前&#xff0c;进行声明。 头文件定义如下(OPdll.h)&#xff1a; 源文件定义如下(OPdll.cpp)&#xff1a; 通过以上两个文件&#xff0c;编译过后即可生成OPdll.lib和OPdll.dll两个库…

【组队学习】【33期】Scratch(一级)

Scratch一级 航路开辟者&#xff1a;王思齐、马燕鹏领航员&#xff1a;马燕鹏航海士&#xff1a;马燕鹏 基本信息 开源内容&#xff1a;https://github.com/datawhalechina/team-learning-program/tree/master/Scratch内容属性&#xff1a;公测课程内容说明&#xff1a;抽取…

Bzoj2780: [Spoj]8093 Sevenk Love Oimaster

题目 传送门 Sol 就是广义\(sam\) 然后记录下每个状态属于哪些串&#xff0c;开\(set\)维护\(parent\)树上启发式合并一下就好了 # include <bits/stdc.h> # define RG register # define IL inline # define Fill(a, b) memset(a, b, sizeof(a)) using namespace std; t…

LR分析法从理解到运用

1、 LR分析器 解释&#xff1a; 分析栈包括符号栈和相应状态栈 分析表包括ACTION表和GOTO表 Ⅰ动作表元素action[Si,aj] 表示当前栈顶状态为S&#xff0c;输入符号为a时所执行的动作。有四种情况&#xff1a;S(移进)&#xff0c;r(归约)&#xff0c;acc(接受)&#xff0c;erro…

Android 判断SD卡是否存在及容量查询

转载&#xff1a;http://blog.csdn.net/xinzheng_wang/article/details/7827775 Android 判断SD卡是否存在及容量查询的简单方法如下&#xff1a;首先要在AndroidManifest.xml中增加SD卡访问权限 [html] view plaincopy <!-- 在SDCard中创建与删除文件权限 --> <uses…

Spring Boot 教程(三): Spring Boot 整合Mybatis

教程简介 本项目内容为Spring Boot教程样例。目的是通过学习本系列教程&#xff0c;读者可以从0到1掌握spring boot的知识&#xff0c;并且可以运用到项目中。如您觉得该项目对您有用&#xff0c;欢迎点击收藏和点赞按钮&#xff0c;给予支持&#xff01;&#xff01;教程连载中…

电子学会 软件编程(图形化)一级训练营

「青少年编程竞赛交流群」已成立&#xff08;适合6至18周岁的青少年&#xff09;&#xff0c;公众号后台回复【Scratch】或【Python】&#xff0c;即可进入。如果加入了之前的社群不需要重复加入。 电子学会 软件编程&#xff08;图形化&#xff09;一级训练营 试题来源 青少…

win10 安装 python报错-已安装这个产品的另一版本

尝试清理干净电脑上关于之前安装的Python3&#xff0c;在 输入winR 输入cmd 回车 输入 python 回车 却看到 C:\Users\86136>python ‘python’ 不是内部或外部命令&#xff0c;也不是可运行的程序 或批处理文件。 但是再安装&#xff0c;又报出严重错误。 最终解决方案&am…

POJ1276Cash Machine

http://poj.org/problem?id1276 题意 &#xff1a; 给你一个目标钱数&#xff0c;再给你钱币的种数和钱币的面值&#xff0c;让你用这些钱凑出不大于目标钱数的钱然后输出这个最接近且不大于目标钱数的钱。 思路 &#xff1a; 背包问题&#xff0c;还是多重背包&#xff0c;就…

Python中处理时间 —— time模块

time模块 逝去的秒数 逝去的秒数表示从某个时间&#xff08;Python中是“Thu Jan 1 07:00:00 1970”&#xff09;开始到现在所经过的秒数。 使用 time.time() 函数可以获得逝去的秒数&#xff1a; >>time.time() 1388330058.8643time.time()返回一个浮点数&#xff0c;可…

学编程必看:逻辑思维测试

2021.09 电子学会图形化一级考试有这样的一个题目&#xff1a; 如下图所示&#xff0c;井深7米&#xff0c;有个蜗牛从井底往上爬&#xff0c;白天爬3米&#xff0c;晚上往下坠2米&#xff0c;问蜗牛几天能从井里爬出来&#xff1f;&#xff08; &#xff09; A. 4B. 5C. 6D. …

explicit specialization of ‘Race‘ after instantiation ,implicit instantiation first required here。

报错1&#xff1a; E:\project\qt\Pokemon3\PokemonServer\pokemon.cpp:470: error: specialization of ‘Race::Race() [with int N 0]’ after instantiation Race<0>::Race() : PokemonBase(ATK) ^ 报错2&#xff1a; explicit specialization of ‘Race’ after ins…

(转载)Linux usbtouchscreen驱动分析

在Linux内核中自带USB触摸屏驱动&#xff0c;以linux-2.6.33.3\drivers\input\touchscreen.c为例&#xff0c;进行解析&#xff1a; 1.驱动加载&#xff1a; static int __init usbtouch_init(void){return usb_register(&usbtouch_driver); //驱动注册} 其中usbtouch_dr…

关于事务隔离级别

2019独角兽企业重金招聘Python工程师标准>>> 第一种 read uncommitted 此状态下脏读&#xff0c;不可重复读&#xff0c;虚读都有可能发生。此状态下两个人同时操作一个数据库表一边开启事务没有提交&#xff0c;另一边也开启事物开始更改数据但是也没有提交&#x…

Datawhale组队学习周报(第047周)

本周报总结了从 2021年01月03日至2022年01月09日&#xff0c;Datawhale组队学习的运行情况&#xff0c;我们一直秉承“与学习者一起成长的理念”&#xff0c;希望这个活动能够让更多的学习者受益。 第 32 期组队学习一共 11 门开源课程&#xff0c;共组建了 11 个学习群&#…

讲座记录:从码农到架构师(精简版)

1.框架学习 不要过于在乎细节 学封装思想 不追新 否则太累 每个框架的设计理念不同 spring 比structs 优秀在哪&#xff1f; 关注增量而非全量 2.如何快速学习一门新技术 “新框架的产生速度远大于个人的学习速度” 先快速学习:了解模板&#xff0c;套路-重复出现的代码 类似做…

Enterprise Library 4 数据访问应用程序块

Enterprise Library 数据访问应用程序块简化了实现常规数据访问功能的开发任务。应用程序可以在各种场景中使用此应用程序块&#xff0c;例如为显示而读取数据、传递数据穿过应用程序层( application layers)、以及将修改的数据提交回数据库系统。应用程序块包含对存储过程和内…

虚拟货币市值回调到4100亿整数关口,EOS逆势站上100关口

虚拟货币虚拟货币市值在过去24小时中&#xff0c;虚拟货币整体回调&#xff0c;市值为4100亿美元。只有EOS逆势上扬&#xff0c;已经站上了100元&#xff08;17.5美元&#xff09;上方。虚拟货币市场距离12月份最高点几乎只有一步之遥。EOS走势EOS这种疯狂的势头是很多人预料未…

【NCEPU】韩绘锦:图信号处理与图卷积神经网络

韩绘锦是华北电力大学数理系大四的学生&#xff0c;LSGO软件技术团队&#xff08;Dreamtech算法组&#xff09;/Datawhale成员&#xff0c;也在天池比赛中取得了不错的成绩&#xff0c;现保送大连理工大学软件工程学院深造。 希望参与我们线下组队学习的同学&#xff0c;可以在…

什么是python第三方库

Python计算生态 标准库 第三方库 标准库&#xff1a;随解释器直接安装到操作系统中的功能模块 第三方库&#xff1a;需要经过安装才能使用的功能模块 模块的概念&#xff1a;库Library、包Package、模块Module 出处&#xff1a;北理工Python慕课

Task01:青少年软件编程(Scratch)等级考试模拟卷(二级)

试题来源 青少年软件编程&#xff08;Scratch&#xff09;等级考试试卷&#xff08;二级&#xff09;【2019.09】青少年软件编程&#xff08;Scratch&#xff09;等级考试试卷&#xff08;二级&#xff09;【2019.12】青少年软件编程&#xff08;Scratch&#xff09;等级考试试…

App功能测试的注意点

好几个月没有写博客记录学习心得了&#xff0c;这次回老家深夜闲来无事写一篇记录下这段时间的面试心得&#xff0c;这次面试过程很多面试官都问APP的有关测试&#xff0c;下面我就自己的认识和工作中的经验来谈谈自己对APP测试的认识&#xff1a; 1.push消息推送测试 检查push…

编程以外积累: 如何给项目生成类似VS2008的说明文档

1&#xff1a;【下载】 目前微软提供的官方开源工具 Sandcastle 结果跑到项目中一看&#xff0c;抬头就来了这么一段&#xff1a; The Sandcastle CodePlex project is no longer under active development by Microsoft and as such, there will be no future releases to t…

python的turtle绘图体系入门必看(一)

1 设置窗体 turtle.setup(width,height,startx,starty) 说明&#xff1a; setup()函数不是必须的前两个参数代表窗体的横向宽与纵向长后两个参数可选&#xff0c;表示窗体距离屏幕的横向距离和纵向距离&#xff08;也可以理解为窗体左上角距离屏幕左上角的横向和纵向距离&…

交换两个变量的值不使用第三个变量(Java)

关于这个问题网上有好多答案&#xff0c;最近有人说这是个奇葩问题 个人测试了一把&#xff0c;如果是普通的数字的话&#xff0c;基本上没有问题 public static void main(String[] args) {int a 2147483647;int b 2147483646;// aab;// ba-b;// aa-b;// b a (a b) * 0; …

Task02:青少年软件编程(Scratch)等级考试模拟卷(二级)

电子学会 软件编程&#xff08;图形化&#xff09;二级训练营 试题来源 青少年软件编程&#xff08;Scratch&#xff09;等级考试试卷&#xff08;二级&#xff09;【2019.09】青少年软件编程&#xff08;Scratch&#xff09;等级考试试卷&#xff08;二级&#xff09;【2019…

Visual Studio 15.7预览版4改进Git、C++支持

\看新闻很累&#xff1f;看技术新闻更累&#xff1f;试试下载InfoQ手机客户端&#xff0c;每天上下班路上听新闻&#xff0c;有趣还有料&#xff01;\\\对于即将到来的Visual Studio 2017 15.7&#xff0c;微软已经发布了多个新的预览版本。这些版本的变更很有限&#xff0c;似…

python库引用的3种方式比较

方法一 import 库名 使用方式&#xff1a; <库名>.<函数名>(<函数参数>) 方法二 from 库名 import 函数名/* 使用方式&#xff1a; <函数名>(<函数参数>) 第一种方法可以避免第三方库函数和自定义函数重名 第二种更简洁&#xff0c;适用于引用…