【TypeScript】TS接口类型(三)
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |
🐱个人主页不叫猫先生
🙋♂️作者简介前端领域新星创作者、华为云享专家、阿里云专家博主专注于前端各领域技术共同学习共同进步一起加油呀
💫系列专栏vue3从入门到精通、TypeScript从入门到实践
📝个人签名不破不立
📢资料领取前端进阶资料以及文中源码可以找我免费领取文末有我wx
目录
专栏介绍
TypeScript从入门到实践专栏是博主在学习和工作过程中的总结实用性非常强欢迎订阅哦学会TS不迷路。
TS系列 | 标题 |
---|---|
基础篇 | TS入门一 |
基础篇 | TS类型声明二 |
基础篇 | TS接口类型三 |
基础篇 | TS交叉类型&联合类型四 |
基础篇 | TS类型断言五 |
基础篇 | TS类型守卫六 |
进阶篇 | TS函数重载七 |
进阶篇 | TS泛型八 |
进阶篇 | TS装饰器九 |
接口类型
我们经常说道的接口比如后端写了一个接口给前端调用接口包括地址、参数、请求方式等等参数规定了传参的类型。而在TS中的接口的定义是什么呢
顾名思义它也是一种类型和number、string、undefined等一样约束使用者使用主要是用来进一步定义对象中属性的类型。它是对行为模块的抽象具体的行为是用类来实现。
使用
通过interface
来声明类的类型使用时需要注意以下几点
interface
声明的类的首字母大写这是tslint
规范当然不使用时tslint
规范写成小写是不会报错建议大写- 在声明变量时变量的形状必须跟接口的形状保持一致即变量的属性值的类型必须和声明的类的属性的类型保持一致否则会报错少写、多写都会报错。
- 可对属性设置联合类型
- 接口中声明的属性类型以分号隔开
interface Class {
name: string;
time: number;
}
let info: Class = {
name: 'typescript',
time: 2
}
设置联合类型具体如下
interface Class {
name: string;
time: number | string;
}
let info: Class = {
name: 'typescript',
time: '2'
}
错误示范
- 多写属性
let info: Class = {
name: 'typescript',
time: 2,
age:18
}
- 与声明的类的属性的类型不一致
let info: Class = {
name: 'typescript',
time: '2',
}
- 少写属性
let info: Class = {
name: 'typescript',
}
另外除了以上基础用法外还可以设置接口属性只读、索引签名、可选属性、函数类型接口具体如下
1设置属性只读
我们在接口中属性前加readonly表示该属性为只读如果修改该属性的值话就会报错
interface Class {
readonly name: string;
time: number;
}
let info: Class = {
name: 'typescript',
time: 2
}
info.name = 'zhangsan';//Error
2设置索引签名
设置索引签名后在对象数据中传入多余的属性仍能够执行。具体使用是在接口中定义一个 [property:string]:any
意思是定义了一个属性属性的类型是字符串属性值类型为任意。
interface Class {
readonly name: string;
time: number;
[property:string]:any
}
let info: Class = {
name: 'typescript',
time: 2,
age:19,
sex:'男'
}
因为设置了索引签名故而此时并不会报错。
当property设置为number时则该属性就变成了类数组具体如下所示
interface Class {
[property:number]:any
}
let info: Class = ['one','two'];
//可以通过索引进行访问值但是不能使用数组的方法毕竟不是真正的数组
console.log(info[0])//one
3设置可选属性
设置可选只需要在接口中属性后加?
则表示该属性要不要都无所谓
- 可选属性没有赋值的时候则获取到为
undefined
- 可选方法需要先判断再调用
interface Class {
readonly name: string;
time: number;
age?:number;
func?():void;
}
let info: Class = {
name: 'typescript',
time: 2,
age:19,
}
少写age
此时也不会报错因为接口中设置了可选
let info: Class = {
name: 'typescript',
time: 2
}
console.log(info.age)//undefined
console.log(info.func())//Error,不能直接调用
//先进行判断再调用,因为可能未定义func
if(info.func) info.func()
4函数类型接口
我们也可以用接口来定义函数的参数和返回值。
interface Class {
(numA:number,numB:number):number
}
let info: Class = (numA,numB)=>numA+numB
info(1,2)
info(1,'2')//Error