本文已参与「新人创作礼」活动,一起开启掘金创作之路。
3.7对象类型
JS中的对象是由属性和方法构成的,而TS中对象的类型就是再描述对象的结构(有什么类型的属性和方法)。
对象类型的写法:
let person:{name:string;age:number;sayHi():void;greet(name:string):void}={
name:'jack',
age:19,
sayHi(){},
green(name){}
}
let person:{//多行的话可以省略;(分号)
name:string
age:number
sayHi():void
sayHi1:()=>void //箭头函数的写法
greet(name:string):void
}={
name:'jack',
age:19,
sayHi(){},
sayHi1(){},
green(name){}
}
解释:
- 直接使用{}来描述对象结构。属性采用属性名:类型的形式;方法采用方法名():返回值类型的形式。
- 如果方法有参数,就在方法名后面的小括号中指定参数类型(比如:greet(name:string):void)。
- 在一行代码中指定对象的对个属性类型时,使用;(分号)来分隔。
- 如果一行代码只指定一个属性类型(通过换行来分隔多个属性类型),可以去掉;(分号)。
- 方法的类型也可以使用箭头函数形式(比如:{sayHi:()=>void})。
对象的属性或方法,也可以是可选的,此时就用到可选属性了
比如,我们再使用axios({...})时,如果发送GET请求,method属性就可以省略。
**
function myAxios(config:{url:string;method?:string}){
console.log(config)
}
可选属性的语法与函数可选参数的语法一致,都使用?(问号)来表示。
3.8接口
当一个对象类型被多次使用时,一般会使用接口(interface)来描述对象的类型,达到服用的目的。
interface IPerson{
name:string
age:number
sayHi():void
}
let person:IPerson={
name:'jack',
age:19,
sayHi(){}
}
解释:
1.使用interface关键词来声明接口。
2.接口名称(比如,此处的IPerson),可以是任意合法的变量名称。
3.声明接口后,直接使用接口名称作为变量的类型。
4.因为每一行只有一个属性类型,因此,属性类型后没有;(分号)。
interface(接口)和type(类型别名)的对比:
- 相同点:都可以给对象指定类型。
- 不同点:1.接口,只能为对象指定类型。2.类型别名,不仅可以为对象指定类型,实际上可以为任意类型指定别名。
interface IPerson {
name:string
age:number
sayHi():void
}
type IPerson = {
name:string
age:number
sayHi():void
}
type NumStr = number | string
接口之间的继承
如果两个接口之间有相同的属性或方法,可以将公共的属性或方法抽离出来,通过继承来实现复用。
比如,这两个接口都有x、y两个属性,重复写两次,可以,但是很繁琐。
interface Point2D{x:number;y:number}
interface Point3D{x:number;y:number;z:number}
更好的方式:
interface Point2D{x:number;y:number}
interface Point3D extends Point2D {z:number}
解释:
- 使用extends(继承)关键字实现接口Point3D继承Point2D。
- 继承后,Point3D就有了Point2D的所有属性和方法(此时,Point3D同时有x、y、z三个属性)。
3.9元组
场景:在地图中,使用经纬度坐标来标记位置信息。
可以使用数组来记录坐标,那么,该数组中只有两个元素,并且这两个元素都是数值类型。
let position: number[] = [39.5427, 116.2317]
使用number[]的缺点:不严谨,因为该类型的数组中可以出现任意多个数字。
更改的方式:元组(Tuple)。
元组类型是另一种类型的数组。它确切地知道包含多少元素,以及特定索引对应的类型。
let position: [number, number] = [39.5427, 116.2317]
解释:
- 元组类型可以确切地标记处有多少元素,以及每个元素的类型。
- 该示例中,元素有两个元素,每个元素的类型都是number