中国城乡住房和建设部网站首页,合肥品牌网站,公司邮箱密码忘记了怎么办,企业画册印刷前言
上一篇文章我们主要介绍了TypeScript的基本类型boolean、number、string、void、null和undefine#xff0c;还介绍了任意类型any和联合类型#xff0c;这篇文章我们将会了解对象类型Interface和数组的相关知识。
对象的类型——接口
在TypeScript中#xff0c;我们使…前言
上一篇文章我们主要介绍了TypeScript的基本类型boolean、number、string、void、null和undefine还介绍了任意类型any和联合类型这篇文章我们将会了解对象类型Interface和数组的相关知识。
对象的类型——接口
在TypeScript中我们使用接口Interface来定义对象的类型。
什么是接口
在面向对象的语言中接口是一个非常重要的概念它是对于行为的抽象具体的行为是需要由类去实现的。在TypeScript中接口是一个非常灵活的概念除了可用于对类的一部分行为进行抽象外也可以用于对对象的形状进行描述这里的形状就可以理解为对象的属性。
一个简单的例子如下
interface Person {name: string;age: number;
}let tom: Person {name: Tom,age: 25
}在上面的例子中我们定义来一个接口Person接着定义了一个变量tom它的类型是Person这样就约束了tom的属性必须和接口一致如果少了或者多了属性都会报错。
interface Person {name: string;age: number;
}let tom: Person {name: Tom
}其会报错如下
demo.ts:6:5 - error TS2741: Property age is missing in type { name: string; } but required in type Person.按照规范接口的首字母需要大写在一些编程语言中会建议在接口名称前加上I的前缀。
可选属性
在其他语言中如果我们需要两个属性内容差不多的两个类型可能必须定义两个不同接口但是两个类型的内容很类似会重复定义在TypeScript中通过可选属性可以避免一些重复定义。
interface Person {name: string;age?: number;
}let tom: Person {name: Tom
}let jerry: Person {name: Jerry,age: 24
}从上述例子可以看出可以通过?来设置可选属性如果一个属性设置为可选属性那么该属性可以存在也可以不存在。通过可选属性可以设置属性存不存在但是还是不能添加属性否则回报错
interface Person {name: string;age: number;
}let jerry: Person {name: Jerry,age: 24,gender: male
}报错如下
Object literal may only specify known properties, and gender does not exist in type Person.任意属性
有时候我们会希望一个接口允许有任意的属性可以使用以下方式
interface Person {name: string;age?: number;[propName: string]: any
}let jerry: Person {name: Jerry,gender: male
}上述例子中[propName: string]定义了任意属性取string类型的值其中需要注意的是一旦定义了任意属性那么确定属性和可选属性的类型都必须是它的类型的子集
interface Person {name: string;age?: number;[propName: string]: string
}let jerry: Person {name: Jerry,gender: male
}上述任意属性是string但是age的属性是number则会报错。 Property age of type number is not assignable to string index type string.一个接口中只能定义一个任意属性。如果接口中有多个类型的属性则可以在任意属性中使用联合类型
nterface Person {name: string;age?: number;[propName: string]: string | number
}let jerry: Person {name: Jerry,age: 25,gender: male
}只读属性
有时候我们希望对象中的一些字段只能在创建的时候被赋值那么可以用 readonly 定义只读属性
interface Person {readonly id: number;name: string;age?: number;[propName: string]: string | number
}let jerry: Person {id: 9527,name: Jerry,age: 25,gender: male
}jerry.id 213上例中使用 readonly 定义的属性 id 初始化后又被赋值了所以报错了。 注意只读的约束存在于第一次给对象赋值的时候而不是第一次给只读属性赋值的时候 数组
在TypeScript中数组类型有很多定义方式非常灵活。
类型方括号表示法
最简单的就是使用类型加方括号来表示数组
let numberArray: number[] [1, 1, 2, 3]在这种声明方式中不允许出现其他的类型
数组泛型
我们也可以使用数组泛型来表示数组
let numberArray: Arraynumber [1, 2, 3, 4, 5]用接口表示数组
interface Number {[index: number]: number;
}NumberArray 表示只要索引的类型是数字时那么值的类型必须是数字。虽然接口也可以用来描述数组但是我们一般不会这么做因为这种方式比前两种方式复杂多了。
类数组
类数组不是数组类型比如arguments
function sum() {let args: number[] arguments
}以上回报错如下
Type IArguments is missing the following properties from type number[]: pop, push, concat, join, and 15 more.
上例中arguments 实际上是一个类数组不能用普通的数组的方式来描述而应该用接口
function sum() {let args: {[index: number]: number;length: number;callee: Function;} arguments
}在这个例子中我们除了约束当索引的类型是数字时值的类型必须是数字之外也约束了它还有 length 和 callee 两个属性,事实上常用的类数组都有自己的接口定义如 IArguments, NodeList, HTMLCollection 等
function sum() {let args: IArguments arguments;
}其中 IArguments是 TypeScript 中定义好了的内置对象它实际的定义如下关于内置对象的内容之后会详细介绍。
interface IArguments {[index: number]: any;length: number;callee: Function;
}any在数组中的使用
一个比较常见的做法是用 any 表示数组中允许出现任意类型
let list: any[] [xcatliu, 25, { website: http://xcatliu.com }];最后
这篇文章主要介绍了接口和数组的相关内容更多文章可以关注公众号QStack。
