TypeScript接口类型

2023-11-20 14:04:04 浏览数 (1)

接口类型

我们经常说道的接口比如后端写了一个接口给前端调用,接口包括地址、参数、请求方式等等,参数规定了传参的类型。而在TS中的接口的定义是什么呢?

顾名思义,它也是一种类型,和number、string、undefined等一样,约束使用者使用,主要是用来进一步定义对象中属性的类型。它是对行为模块的抽象,具体的行为是用类来实现

使用

通过interface来声明类的类型,使用时需要注意以下几点:

  • interface声明的类的首字母大写,这是tslint规范,当然不使用时tslint规范,写成小写是不会报错,建议大写
  • 在声明变量时,变量的形状必须跟接口的形状保持一致,即变量的属性值的类型必须和声明的类的属性的类型保持一致,否则会报错,少写、多写都会报错。
  • 可对属性设置联合类型
  • 接口中声明的属性类型以分号隔开
代码语言:javascript复制
interface Class {
    name: string;
    time: number;
}
let info: Class = {
    name: 'typescript',
    time: 2
}

设置联合类型,具体如下:

代码语言:javascript复制
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:{}, }let info: Class = { name: 'typescript', }另外除了以上基础用法外,还可以设置接口属性只读、索引签名、可选属性、函数类型接口,具体如下:(1)设置属性只读我们在接口中属性前加readonly,表示该属性为只读,如果修改该属性的值话就会报错
  • 与声明的类的属性的类型不一致
  • 少写属性
代码语言:javascript复制
interface Class {
    readonly name: string;
    time: number;
}
let info: Class = {
    name: 'typescript',
    time: 2
}
info.name = 'zhangsan';//Error

(2)设置索引签名

设置索引签名后,在对象数据中传入多余的属性,仍能够执行。具体使用是在接口中定义一个 [property:string]:any,意思是定义了一个属性,属性的类型是字符串,属性值类型为任意。

代码语言:javascript复制
interface Class {
    readonly name: string;
    time: number;
    [property:string]:any
}
let info: Class = {
    name: 'typescript',
    time: 2,
    age:19,
    sex:'男'
}

因为设置了索引签名,故而此时并不会报错。

当property设置为number时,则该属性就变成了类数组,具体如下所示:

代码语言:javascript复制
interface Class {
    [property:number]:any
}
let info: Class = ['one','two'];
//可以通过索引进行访问值,但是不能使用数组的方法,毕竟不是真正的数组
console.log(info[0])//one

(3)设置可选属性

设置可选只需要在接口中属性后加?,则表示该属性要不要都无所谓

  • 可选属性没有赋值的时候,则获取到为undefinedinterface 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
  • 可选方法需要先判断,再调用

我正在参与2023腾讯技术创作特训营第三期有奖征文,组队打卡瓜分大奖!

0 人点赞