TS 接口类型

2023-06-15
北京
本文字数：1432 字
阅读完需：约 5 分钟

接口类型

我们经常说道的接口比如后端写了一个接口给前端调用，接口包括地址、参数、请求方式等等，参数规定了传参的类型。而在 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:{},}

复制代码

少写属性

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)//undefinedconsole.log(info.func())//Error,不能直接调用//先进行判断，再调用,因为可能未定义funcif(info.func) info.func()

复制代码

（4）函数类型接口

我们也可以用接口来定义函数的参数和返回值。

interface Class {    (numA:number,numB:number):number}let info: Class = (numA,numB)=>numA+numBinfo(1,2)info(1,'2')//Error

复制代码

发布于: 2023-06-15阅读数: 18

原文链接:【http://xie.infoq.cn/article/e29d59ab1956de7f7cc75d3d4】。文章转载请联系作者。

不叫猫先生

关注

还未添加个人签名 2022-10-18 加入

前端领域优质创作者、阿里云专家博主，专注于前端各领域技术，共同学习共同进步，一起加油呀！

发布

暂无评论

创作场景

TS 接口类型

接口类型

使用

（1）设置属性只读

（2）设置索引签名

（3）设置可选属性

（4）函数类型接口

不叫猫先生

评论