TS类型注解(下)

news2024/11/11 4:45:08

文章目录

  • 前言
  • 三、TypeScript类型约束
    • (5)对象
    • (6)接口(TS中对象类型的专属约束)
    • (7)TS中的扩展类型


前言

提示:这里可以添加本文要记录的大概内容:

例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。


提示:以下是本篇文章正文内容,下面案例可供参考

三、TypeScript类型约束

(5)对象

1.概念
对象其实和数组类似,不是限制对象本身的类型,而是对对象属性类型进行限制。
在这里插入图片描述
2.对对象做类型限制的好处:
通过对象类型限制就可以让编辑器很方便的提示你当前对象的属性有哪些。在这里插入图片描述

3.对象函数类型限制的另一种写法:

在这里插入图片描述
4.对象中的可选属性如何定制
对象中的可选属性定制跟函数一样,使用“?”完成
在这里插入图片描述
注意如果调用可选属性去完成需求,必须使用?.操作符,因为可选属性可能不存在,当不存在的时候就会出现致命错误,TS的优势就是在编程阶段解决掉错误,所以,必须使用?.操作符。
5.对象中的自定义属性如何定制
对象中的虽然可以定制可选属性,但也是约束好某个属性可有可无,如在这里插入图片描述
果想在对象中定义一个自定义属性,可以使用对象的任意属性

[propNmae:string]:any

  • propName就是一个占位符,换成其他的变量名字也可以
  • :string是当前属性,是一个字符串类型
  • any表示任意类型的意思,因为TS规定:一旦定义了任意属性,那么确定属性和可选属性的类型都必须是任意属性的类型的子集

(6)接口(TS中对象类型的专属约束)

1.什么是接口类型
在TS中,一般会用接口(interface)对对象类型做专属约束
在面向对象语言中,接口(interface)是一个很重要的概念,他是对行为的抽象,而具体如何行动需要由类(classes)去实现(implement)
TypeScript中的接口是一个非常灵活的概念,除了可用于对类的一部分行为进行抽象以外,也用于对【对象的形状(shape)】进行描述
2.如何通过接口(interface)约束对象类型
接口如何定义
interface 接口名称{ 属性1:类型; 属性2:类型; }
建议:接口前面加上I关键词

在这里插入图片描述
总结

  1. 定义接口虽然也是花括号,但是接口不是对象,所以属性之间不需要通过逗号分隔!
  2. 接口大家看起来是不是和之前学习的类型别名差不多,但是他们有区别,等学完接口的基础知识点之后,在总结区别
    3.接口可以单独用来约束函数的形状
    在这里插入图片描述4.接口的多次声明
    在这里插入图片描述
    5.接口(interface)的继承

如果定义了一个 IPerson 接口,他具有人类的所有属性约束,现在想定义一个学生对象,那么学生对象中肯定有人类属性,并且还有一些自己独有的属性,当碰到这种情况的时候,就可以利用接口的继承,让学生的接口继承人类的接口,这样就不用在学生接口中重复定义人类信息了。
在这里插入图片描述

6.类型别名模拟接口(interface)的继承
在这里插入图片描述

7.类型别名模拟继承的功能扩展
能使用 & 符合链接多个约束,也可以使用 | 符号链接多个约束,表示必须要完全符合某一个约束,而另一个约束可以满足或者部分满足也可以
在这里插入图片描述
8.接口(interface)中的只读属性
如果你需要某个对象的属性只在第一次声明时生效,之后不允许修改,那么,可以通过关键词 readonly 实现。

在这里插入图片描述
9. 接口(interface)与类型别名约束对象的区别

  • 命名规范
    类型别名使用type关键词声明,并且名称唯一,不可重复
    接口使用interface关键词声明,可以重复
    类型别名中使用逗号分隔属性约束,接口中使用分号(或者不写)分隔约束。

  • 使用范围
    类型别名除了可以约束对象以外,还可以给他其他类型定义约束
    接口只可以约束对象

  • 继承
    接口支持继承
    类型别名虽然可以通过其他方式实现继承效果,但那不是继承

(7)TS中的扩展类型

1.元组(Tuple)
在TS中,数组类型只能约束类型,而元组则是一个可以约束类型和数量的类型

  • 语法
    let 变量: [类型1,类型2] = [值1,值2]
    在这里插入图片描述

  • 使用
    元组类型不仅能够约束类型和能约束个数,这在某些数据初始化时十分有用,比如你要一个存储这经纬度的数组,那么,元组就非常合适了
    在这里插入图片描述

  • 扩展
    元组也可以添加“越界元素”,但是必须是约束类型之一:
    在这里插入图片描述
    2. TS类型推论
    类型推论就是:TypeScript 会在没有明确的指定类型的时候推测出一个类型,这就是类型推论。
    类型推论会发生在两个位置:

  • 声明变量时

  • 在这里插入图片描述

  • 函数的返回值
    在这里插入图片描述
    3.字面量类型

  • 什么是字面量类型
    字面量类型就是将一个自定义内容当做类型使用。
    在这里插入图片描述

  • 字面量类型的特点
    字面量类型要求你对某一个变量做类型约束时,值必须和字面量类型是一致的
    在这里插入图片描述

  • 字面量类型的使用场景
    字面量类型经常和联合类型一起使用,起到约束值的取值范围的作用
    在这里插入图片描述
    4.枚举
    不仅起到了分类说明的作用,还能起到限制取值范围的作用。

  • 语法格式
    enum types { Mon, Tue, Wed, Thu }
    不仅可以作为类型约束使用,他还可以作为值去使用

枚举类型的值:console.log(types)
在这里插入图片描述
分类
(1)数字枚举
当值为数字时,此枚举类型可以成为数字枚举。
在这里插入图片描述
(2)字符串枚举
当值为字符串时,此枚举类型就是字符窜枚举
在这里插入图片描述
(3)异构枚举
异构枚举就是枚举类型的值有数字有字符串,不过这种枚举类型大家知道就好,异构枚举出现的情况非常的少
(4)常量枚举
常量枚举是枚举类型的一种定义方式,是在定义枚举类型的时候使用 const 关键词声明
在这里插入图片描述
常量枚举跟数字枚举或者字符串枚举使用方式一样,和他们的区别是:常量枚举会在编译阶段被删除.
枚举类型与字面量类型的一些区别
想要知道枚举类型与字面类型的一些区别,那么就要知道字面量类型存在的一些问题。
(1)使用字面量类型定义一些选项时,如果值的内容需要修改,字面量类型需要修改大量内容。
(2)从编译结果来看,字面量类型不会进入到编译结果,而枚举类型会进入到编译结果
5.any类型
any类型就相当于是没有类型约束,因为any类型的数据可以是任意数据类型的数据!所以,在项目中,除非迫不得已,否则不推荐使用any类型去定制类型约束
6.类型断言

  • 什么是类型断言
    类型断言就是手动指定一个值的类型!

  • 语法
    值 as 类型

  • 类型断言的用途
    1> 将一个联合类型断言为其中一个类型
    2> 将一个父类断言为更加具体的子类
    3> 将任何一个类型断言为 any
    4> 将 any 断言为一个具体的类型
    7.泛型

  • 什么是泛型
    泛型(Generics)是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性。

  • 泛型的基本使用
    先来看一种情况,比如我定义函数,要求输入什么就输出什么:
    在这里插入图片描述
    解释一下这个案例中的知识点:
    1> 在函数名与小括号之间的表示定义了一个泛型T,这里泛型的名字可以随意定义,不是非要叫T。
    2> val:T 表示使用泛型T
    3> (val:T):T 也表示使用泛型T
    4> 调用函数时的 表示在给泛型赋值

总结:在调用函数时,给泛型赋值,那么使用泛型的位置就会以此值为准,不是非要写,可以省略;TS 会自动推断参数的类型。
泛型也是可以定义多个的,主要是应对多类型的情况

在这里插入图片描述
类型约束配合一个关键词 keyof 使用
在这里插入图片描述
让U继承与T中某一项,这样就可以不仅可以解决之前的错误,还可以在使用函数时,让函数具有属性提示功能

  • 泛型接口
    泛型接口就是在定义接口时,可以配合泛型,定制更具约束功能的接口
    在这里插入图片描述

  • 比如使用接口约束函数的形状

  • 在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

台式机CPU温度90℃以上-排查思路

虽然现在台式机不值钱。 但是对于穷苦老百姓来说,还是害怕它坏掉,坏掉就又需要花钱买了。 ①风扇清理所有灰尘(风扇的散热网是可以拆下来的), 主板清理所有灰尘(用画笔或者干燥的牙刷,注意是…

LeetCode - 11 盛最多水的容器

题目来源 11. 盛最多水的容器 - 力扣(LeetCode) 题目描述 给定一个长度为 n 的整数数组 height 。有 n 条垂线,第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线,使得它们与 x 轴共同构成的容器可以容纳最…

小型集群分析

目录 介绍步骤 介绍 etcd是CoreOS基于Raft协议开发的分布式key-value存储,可用于服务发现、共享配置以及一致性保障(如数据库选主、分布式锁等)。 在分布式系统中,如何管理节点间的状态一直是一个难题,etcd像是专门为…

从关键新闻和最新技术看AI行业发展(第三十期2024.8.12-8.25) |【WeThinkIn老实人报】

写在前面 【WeThinkIn老实人报】旨在整理&挖掘AI行业的关键新闻和最新技术,同时Rocky会对这些关键信息进行解读,力求让读者们能从容跟随AI科技潮流。也欢迎大家提出宝贵的优化建议,一起交流学习💪 欢迎大家关注Rocky的公众号&…

java利用JXL操作excel

通过JXL操作Excel JXL是韩国人所著,目前停止更新,只支持xls格式,即2007之前的版本 import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.IOException; import java.io.InputStream; import java.net.URL; import java…

【论文解读】SAM模型超级进化:面向移动端的轻量级SAM,比FastSAM快4倍!(附论文地址)

论文地址:https://arxiv.org/pdf/2306.14289.pdf 这篇论文的标题是《FASTER SEGMENT ANYTHING: TOWARDS LIGHTWEIGHT SAM FOR MOBILE APPLICATIONS》,由Chaoning Zhang等人撰写,发表于2023年。 文章主要探讨了如何将Segment Anything Model&…

Docker构建镜像时本地NuGet不存在的解决方式

在打包镜像时,由于程序中使用了本地的NuGet包,发现怎么打包都是失败,错误如下 我的dockerfile 文件如下 FROM mcr.microsoft.com/dotnet/aspnet:8.0 AS base WORKDIR /app EXPOSE 80# 此阶段用于生成服务项目 FROM mcr.microsoft.com/dotnet/sdk:8.0 A…

战略设计(Strategic Design)

战略设计(strategic design)——一种针对系统整体的建模和设计决策。这样的决策影响整个项目,而且必须由团队来制定。 随着系统的增长,它会变得越来越复杂,当我们无法通过分析对象来理解系统的时候,就需要掌握一些操纵和理解大的模…

Docker简介及部署方法

什么是 docker ? Docker是一个开源的应用容器引擎,它允许开发者将应用及其依赖打包到一个轻量级、可移植的容器中,并几乎可以在任何支持的平台上运行。Docker利用Linux内核的功能(如Cgroups和namespaces)来实现对进程的…

《JavaEE进阶》----7.<SpringMVC实践项目:【登录页面的验证】>

这篇文章详细的讲解了一个 简单的登录网页的前端代码和后端代码的构造 使用了JavaScript中的ajax来进行前后端的交互 一、前端代码 登录页面代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><title>登录…

从0开始深度学习(2)——自动微分

1 微积分 1.1 导数和微分 略 1.2 偏导数 略 1.3 梯度&#xff08;gradient&#xff09; 1.3.1 定义 对于一个多变量函数 f ( x 1 , x 2 , … , x n ) f\left(x_{1}, x_{2}, \ldots, x_{n}\right) f(x1​,x2​,…,xn​)其中点 a ( a 1 , a 2 , … , a n ) \mathbf{a}(a_…

【栈经典问题剖析】上

1.1进制转换 1.1.2思路图解&#xff1a; 每次将得到的余数存入栈中&#xff0c;直到商为0时&#xff0c;停止入栈。依次将栈中元素出栈并进行打印操作&#xff08;注意负数的符号情况&#xff09; //进制转换&#xff1a;10进制整数转换成8进制整数 #include <stdio.h>…

Google的MapReduce和Hadoop的MapReduce基本原理

Google的MapReduce和Hadoop的MapReduce基本原理 MapReduce框架的执行过程可以概述为以下几个关键步骤&#xff1a; 输入分割&#xff1a;用户程序中的MapReduce库首先将输入文件分割成M个片段&#xff0c;每个片段通常大小在16MB到64MB之间&#xff0c;用户可以通过可选参数控制…

【leetcode413周赛】——前两题python

3274. 检查棋盘方格颜色是否相同 给你两个字符串 coordinate1 和 coordinate2&#xff0c;代表 8 x 8 国际象棋棋盘上的两个方格的坐标。 以下是棋盘的参考图。 如果这两个方格颜色相同&#xff0c;返回 true&#xff0c;否则返回 false。 坐标总是表示有效的棋盘方格。坐标…

【indirect 函数 ★二级下拉菜单】

Indirect 函数 &#x1f33c;indirect函数参数&#x1f33c;应用&#xff1a;&#x1f33c;跨表引用同一单元格&#x1f33c;二级下拉列表 &#x1f33c;indirect函数参数 返回⬅️【文本字符串所指定的引用】 INDIRECT(ref_text,[a1]) 其中【ref_text】是引用的文本 [a1] 是…

大数据之数据湖Apache Hudi

一、Hudi框架概述 Apahe Hudi (Hadoop Upserts delete and Incrementals) 是Uber主导开发的开源数据湖框架&#xff0c;为了解决大数据生态系统中需要插入更新及增量消费原语的摄取管道和ETL管道的低效问题&#xff0c;该项目在2016年开始开发&#xff0c;并于2017年开源&#…

Mysql基础练习题 1084.销售分析3 (力扣)

编写解决方案&#xff0c;报告 2019年春季 才售出的产品。即 仅 在 2019-01-01 &#xff08;含&#xff09;至 2019-03-31 &#xff08;含&#xff09;之间出售的商品 题目链接&#xff1a; https://leetcode.cn/problems/sales-analysis-iii/description/ 建表插入数据&…

学习指纹浏览器 处理美团mtgsig1.2 环境检测

声明: 本文章中所有内容仅供学习交流使用&#xff0c;不用于其他任何目的&#xff0c;抓包内容、敏感网址、数据接口等均已做脱敏处理&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的一切后果均与作者无关&#xff01; 有相关问题请第一时间头像私信联系我…

恭喜各位天命人!2024年国自然基金放榜了!优青654项、杰青433项,附个人查询攻略

公众号&#xff1a;生信漫谈&#xff0c;获取最新科研信息&#xff01; 恭喜各位天命人&#xff01;2024年国自然基金放榜了&#xff01;优青654项、杰青433项&#xff0c;附个人查询攻略https://mp.weixin.qq.com/s?__bizMzkwNjQyNTUwMw&mid2247487048&idx1&sn1…

Webfunny前端监控如何搭建高并发使用场景

Webfunny可以支持千万级别PV的日活量了。但是&#xff0c;我们默认的部署配置&#xff0c;是无法支持这么高的日活量的&#xff0c;需要我们做一些支持高并发的配置和操作&#xff0c;下面让我们一起看下如何让webfunny支持更高的并发量吧&#xff0c;下图为webfunny高并发架构…