在TypeScript中,为了能够约束对象定义,提供了两个新的特性,接口和类型别名。javascript
在强类型语言中,都有接口的概念,那么TypeScript中的接口是如何使用的呢?html
接口定义形式以下:java
interface test { name: string, value: number }
上述接口,定义了一个test接口,该接口能够约束两个字段的数据类型,分别是name和value。而接口的使用主要有三个方面:实现、继承和约束。函数
经过用类来实现接口,就实现了接口约束类中必须定义的字段,实现接口的关键字是implements,接下来,咱们定义一个类来实现上述接口:es5
class TestClass implements test { name: string; value: number; }
若是类中缺乏了属性name和value,就会报错,咱们就能够用test接口来约束实现接口类中的属性。spa
接口之间,还能够进行继承,用来使得该接口拥有被继承接口的属性和方法。好比有以下两个接口:code
interface ColorInterface { color: string; } interface LineInterface { width: number; }
在上面咱们定义了两个接口,分别表示颜色和线条的宽度,若是咱们想要定义一条直线的类别,那么咱们能够定义以下接口继承:htm
interface StrightLineInterface extends ColorInterface, LineInterface { height: number }
此时此刻,接口StrightLineInterface便拥有了color和width属性,TypeScript中类只能实现一个接口,可是接口能够经过继承实现多态。对象
除了被实现和继承,接口还能够用来约束对象或者函数类型。blog
好比咱们后台获取的数据须要遵循特定类型,咱们才能使用,咱们就能够用接口来约束咱们获取的数据类型。
好比,咱们获取的数据是一个包含id,name的对象数据,那么咱们能够定义以下接口:
interface List { id: number, name: string, age?: number, // 可选属性表示list中,无关紧要的属性 } interface Result { data: List }
咱们在使用result的时候,就能够用Result接口来约束它的格式:
function use(result: Result) { result.data.map(x => { // 操做代码 }) }
接口还能够约束可变参数的对象,可变参数就是咱们不知道对象中有多少个属性,可是咱们知道属性的类别,能够用以下方式约束:
interface NameArray { [x: number]: string }
该接口表示咱们接受约束的对象必须是数字下标,而值必须是string类型的value对象。
除此以外,接口还能够约束函数:
interface Add { (x: number, y: number): number } let add: Add = (a, b) => a + b;
接口约束Props和State
接口还能够约束React中的Props和State的类型,以下所示:
interface Props { name: string, data: string[] } interface State { [x: string]: string } class Comp extends React.Component<Props, State> { // 第一个表示props的类型约束,第二个表示state的类型约束,若是没有props,咱们能够设置为{} }
上面提到的接口能够作的一些事情,而类型别名,主要就是对对象或者函数起到约束做用,特性没有接口多。
type Add = (x: number, y: number) => number; let add: Add = (a, b) => a + b;
而类型别名是早起TypeScript作类型约束的主要形式,后来引入接口以后,TypeScript推荐咱们尽量的使用接口来规范咱们的代码。
而二者也都是TSC编译器作类型断定的时候有做用,咱们能够在playground里面看到,当咱们写一个接口或者是一个类型别名定义一个对象或者方法的时候,并未有任何编译成的es5代码出现。
这一小节主要讲述了类型别名和接口的用法,以及二者的区别。
TypeScript中,若是再相同功能点的顶一下,推荐使用interface去定义数据类型。
个人博客地址:http://www.gaoyunjiao.fun/?p=138
原文出处:https://www.cnblogs.com/qixingduanyan/p/11479192.html