【TypeScript】TS接口interface类型(三)

【TypeScript】TS接口interface类型(三)



在这里插入图片描述

    • 【TypeScript】TS接口interface类型(三)
        • 一、接口类型
        • 二、实践使用
          • 2.1 常规类型
          • 2.2 设置属性只读 readonly
          • 2.3 设置索引签名
          • 2.4 设置可选属性
          • 2.5 函数类型接口

一、接口类型

TypeScript中的接口是一种定义对象类型的方式。接口定义了一个对象应该具有哪些属性和方法,但并不实现它们。

我们经常说的接口比如后端写了一个接口给前端调用,接口包括地址、参数、请求方式等等,参数规定了传参的类型。

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

二、实践使用


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

  • interface声明的类的首字母大写,这是tslint规范,当然不使用时tslint规范,写成小写是不会报错,建议大写
  • 在声明变量时,变量的形状必须跟接口的形状保持一致,即变量的属性值的类型必须和声明的类的属性的类型保持一致,否则会报错,少写、多写都会报错。
  • 可对属性设置联合类型
  • 接口中声明的属性类型以分号隔开
2.1 常规类型

也就是类类型接口,用于定义对象的结构,例如:

interface Class {name: string;time: number;
}
let info: Class = {name: 'typescript',time: 2
}

联合类型:顾名思义,也就是一个属性由几个类型联合起来,如下面time属性,既可以是数字类型也可以时字符串类型。

interface Class {name: string;time: numberstring;
}
let info: Class = {name: 'typescript',time: 2
}

对于接口interface规定的类型,不能够出现多余的属性,也不能缺少部分属性,同时也不能与声明的类的属性的类型不一致

  • 多写属性

    interface Class {name: string;time: numberstring;
    }
    let info: Class = {name: 'typescript',time: 2,age: 18
    }

    在这里插入图片描述

  • 缺少部分属性

    interface Class {name: string;time: number | string;
    }let info: Class = {name: 'typescript',
    }
    

    请添加图片描述

  • 与声明的类的属性的类型不一致

    interface Class {name: string;time: number | string;
    }
    let info: Class = {name: 'typescript',time:{},
    }
    

    请添加图片描述

另外除了以上基础用法外,还可以设置接口属性只读索引签名可选属性函数类型接口,具体如下:

2.2 设置属性只读 readonly

在接口中属性前加readonly,表示该属性为只读,如果修改该属性的值话就会报错

interface Class {readonly name: string;time: number;
}
let info: Class = {name: 'typescript',time: 2
}
info.name = 'zhangsan';
// Argument of type 'string' is not assignable to parameter of type 'number'.

在这里插入图片描述

2.3 设置索引签名

用于定义数组或对象的索引类型,设置索引签名后,在对象数据中传入多余的属性,仍能够执行。具体使用是在接口中定义一个 [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
2.4 设置可选属性

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

  • 可选属性没有赋值的时候,则获取到为 undefined
  • 可选方法需要先判断,再调用
       	interface Class {readonly name: string;time: number;age?: number;func?(): void;}let info: Class = {name: 'typescript',time: 2,age: 19,}
    
2.5 函数类型接口

用于定义函数的参数和返回值类型,我们也可以用接口来定义函数的参数和返回值。
例如:

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

在这里插入图片描述




以上就是TypeScript接口类型介绍,希望喜欢的同学点赞加收藏,谢谢。





本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/78881.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Linux操作系统】Vim:提升你的编辑效率

Vim是一款功能强大的文本编辑器,它具有高度可定制性和灵活性,可以帮助程序员和文本编辑者提高编辑效率。本文将介绍Vim的基本使用方法、常用功能和一些实用技巧。 文章目录 1. Vim的基本使用方法:2. 常用功能:2.1 文件操作&#…

linux的目录结构和文件类型

p:同一台主机之间不同程序/进程间通信要用的文件 s:不同主机之间不同程序/进程间通信要用的文件

Vue-组件二次封装

本次对el-input进行简单封装进行演示 封装很简单,就给激活样式的边框(主要是功能) 本次封装主要使用到vue自带的几个对象 $attrs:获取绑定在组件上的所有属性$listeners: 获取绑定在组件上的所有函数方法$slots: 获取应用在组件内的所有插槽 …

微服务——DSL查询文档+搜索结果处理

DSL Query分类 DSL Query的基本语法 全文检索查询 常用场景 match查询 要填一个存在的字段,已经要检索的内容 匹配度越高排名越前,这里all字段包含三个字段在里面。 multi_match查询 精确查询 不分词的查询 查询语法 term查询 range查询 gte是大于等…

Python web实战之 Django 的 MVC 设计模式详解

技术栈:Python、Django、HTML、CSS、JavaScript。 概要 在 Web 开发中,MVC(Model-View-Controller)模式是一种非常常见的设计模式,它可以帮助我们更好地管理代码,提高代码的可维护性。今天就介绍如何使用 …

【Linux】【预】配置网络IP,挂载网络目录

【Linux】【预】配置网络IP,挂载网络目录 1. 配置查看IP2.配置Linux中的IP3. 串口连接开发板,配置 1. 配置查看IP a . 查看ipifconfig如下操作,其中的:192.168.252.140就是它的IP b . 使用xmodem 连接到虚拟机,最后点…

小研究 - MySQL 数据库下存储过程的综合运用研究

信息系统工程领域对数据安全的要求比较高,MySQL 数据库管理系统普遍应用于各种信息系统应用软件的开发之中,而角色与权限设计不仅关乎数据库中数据保密性的性能高低,也关系到用户使用数据库的最低要求。在对数据库的安全性进行设计时&#xf…

C#与C/C++交互(1)——需要了解的基础知识

【前言】 C#中用于实现调用C/C的方案是P/Invoke(Platform Invoke),让托管代码可以调用库中的函数。类似的功能,JAVA中叫JNI,Python中叫Ctypes。 常见的代码用法如下: [DllImport("Test.dll", E…

【笔记】湖仓一体架构演进与发展

https://www.bilibili.com/video/BV1oF411F7rQ/?spm_id_from333.788.recommend_more_video.0&vd_sourcefa36a95b3c3fa4f32dd400f8cabddeaf

小程序的 weiui的使用以及引入

https://wechat-miniprogram.github.io/weui/docs/quickstart.html 网址 1.点进去,在app.json里面配置 在你需要的 页面的 json里面配置,按需引入 然后看文档,再在你的 wxml里面使用就好了

C#,数值计算——堆选择(Heap Select)的计算方法与源程序

1 简述 HeapSelect 是一种用于选择数组中第 K 个最大元素的算法。它是选择问题的变体,涉及在无序或偏序集合中查找特定元素。 算法概要:数组被转换为最大堆,然后反复删除根节点并替换为下一个最大的元素,直到找到第 K 个最大的元…

TCP Socket 基础知识点(实例是以Java进行演示)

本篇根据TCP & Socket 相关知识点和学习所得进行整理所得。 文章目录 前言1. TCP相关知识点1.1 双工/单工1.2 TCP协议的主要特点1.3 TCP的可靠性原理1.4 报文段1.4.1 端口1.4.2 seq序号1.4.3 ack确认号1.4.4 数据偏移1.4.5 保留1.4.6 控制位1.4.7 窗口1.4.8 校验和1.4.9 紧…

Rocky(centos) jar 注册成服务,能开机自启动

概述 涉及:1)sh 无法直接运行java命令,可以软连,此处是直接路径 2)sh脚本报一堆空格换行错误:需将转成unix标准格式; #切换到上传的脚本路径 dos2unix 脚本文件名.sh 2)SELINUX …

日期格式化的最佳实践:如何在Java中处理日期格式化

文章目录 前言一、使用format()方法二、使用注解JsonFormat三、使用消息转换器1.定义用户类2.重写DateSerializer 方法3.定义对象映射器:4.定义消息转换器5.调用测试 总结 前言 当涉及到日期格式化时,了解正确的方式和最佳实践是至关重要的。 日期格式化…

传感器与卡尔曼滤波器融合

一、介绍 自动驾驶汽车配备了多个传感器,如摄像头、雷达、激光雷达等。如下图所示,所有传感器都有一些优点和缺点。但是,如果您融合不同传感器的输出,那么它们在任何天气条件下都不会失效。 以下是有关它们在不同任务和天气条件下…

Docker-Compose编排与部署(lnmp实例)

第四阶段 时 间:2023年8月3日 参加人:全班人员 内 容: Docker-Compose编排与部署 目录 一、Docker Compose (一)概述 (二)Compose适用于所有环境: (三&#xf…

前端页面--视觉差效果

代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><link rel"stylesheet" href"https://un…

Spring中Bean的生命周期

Spring中Bean的生命周期可以分为5个阶段&#xff1a; 对象实例化。 属性赋值。 初始化&#xff0c;看Bean实现了哪些接口&#xff0c;执行相应的方法&#xff0c;去包装对象&#xff0c;使对象的功能增强。 将bean对象放入到容器中。 销毁Bean。

【雕爷学编程】MicroPython动手做(28)——物联网之Yeelight 3

知识点&#xff1a;什么是掌控板&#xff1f; 掌控板是一块普及STEAM创客教育、人工智能教育、机器人编程教育的开源智能硬件。它集成ESP-32高性能双核芯片&#xff0c;支持WiFi和蓝牙双模通信&#xff0c;可作为物联网节点&#xff0c;实现物联网应用。同时掌控板上集成了OLED…

Linux文本处理工具和正则表达式

Linux文本处理工具和正则表达式 一.查看、截取和修改文本的工具 1.查看文本的工具 cat 最常用的文件查看命令&#xff1b;当不指明文件或者文件名为一杠’-时&#xff0c;读取标准输入。 cat [OPTION]... [FILE]... -A&#xff1a;显示所有控制符(tab键:^I;行结束符:$) -…