TypeScript学习笔记之 接口(Interface)

news/2024/7/5 2:09:30

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

http://lihuaxi.xjx100.cn/news/237023.html

相关文章

Go语言的前景分析

链客&#xff0c;专为开发者而生&#xff0c;有问必答&#xff01; 此文章来自区块链技术社区&#xff0c;未经允许拒绝转载。 抓住时代的趋势 在上篇文章中&#xff0c;也就是那个跨维度的打击&#xff0c;是可以直接秒杀的中&#xff0c;提到这个时代的问题&#xff0c;这次…

swift 语言评价

杂而不精&#xff0c;一团乱麻&#xff01;模式乱套&#xff0c;不适合作为一门学习和研究语言。 谢谢 LZ 介绍&#xff0c;看完之后更不想用 Swift 了。从 C那里抄个 V-Table 来很先进嘛&#xff1f;别跟 C一样搞什么 STL 就好了&#xff0c;整这么复杂&#xff0c;入个门都需…

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…

centos 6.* 修改时间

一、查看Centos的时区和时间 1、使用date命令查看Centos时区 [rootVM_centos ~]# date -R Mon, 26 Mar 2018 19:14:03 0800 2、查看clock系统配置文件 [rootVM_centos ~]# cat /etc/sysconfig/clock ZONE"Asia/Shanghai" 3、查看系统的硬件时间&#xff0c;即BIOS时间…

R语言实现GO分析

链客&#xff0c;专为开发者而生&#xff0c;有问必答&#xff01; 此文章来自区块链技术社区&#xff0c;未经允许拒绝转载。 我们上一期介绍了如何实现GO分析的可视化&#xff0c;运行了GOplot包自带的数据并且很畅通。然而我们如何才能获取那些可以直接输入的数据表格或者…

grep命令

1.grep命令grep命令的名称是来自于全局搜索正则表达式并打印文本行&#xff08;Global Search Regular Expression and Print out the line)的缩写。语法如下grep [options] pattern [file…]options&#xff1a;表示选项。pattern&#xff1a;要匹配的模式。file&#xff1a;表…

以太坊,EOS和其他DApps的总数达到2,432,但没有大规模采用

链客&#xff0c;专为开发者而生&#xff0c;有问必答&#xff01; 此文章来自区块链技术社区&#xff0c;未经允许拒绝转载。 根据分散应用监测网站StateOfTheDApps&#xff0c;每月创建的新DApps数量的最高水平是2018年12月。去年最后一个月共有179个新的DApps上线。 以太…

03-Java的基础语法

一个Java程序可以认为是一系列对象的集合&#xff0c;而这些对象通过调用彼此的方法来协同工作。下面简要介绍下类、对象、方法和实例变量的概念。 对象&#xff1a;对象是类的一个实例&#xff0c;有状态和行为。例如&#xff0c;一条狗是一个对象&#xff0c;它的状态有&…