TypeScript系列之-深度理解基本类型画图讲解

JS的类型(8)null undefined string number boolean

bigint symbol

object(含 Array, Function,Date.....)

TS的类型(8+7): 以上所有,加上

void, never, enum, unknown, any

再加上自定义类型 type interface

上一节我们说到用集合的思路理解TS中的类型,下面就用一张图表示基础类型之间的关系:

any和unknown类型

  • any就是个开挂的(type any = noErrorType----但有些情况any也不能赋值)
  • unknown安全类型,使用 unknown 做任何事情都是不合法的(unknown是所有类型的联合类型--推荐使用)

const a:unknown = 1
const b = a as string
b.splict('')

function divide(param: unknown) {  return param / 2;} // Error
function divide(param: unknown) {  return param as number / 2;} //ok

never类型

never类型表示的是那些永不存在的值的类型(其实就是空集,用于类型推断)

type A =  string & number
const a:A  = //×

//类型推断
type B  = string | number
const a:B = ('hahah' as any);
if(typeof a ==== 'string'){
  a.splice('')
}else if(typeof a ==== 'number'){
  a.tofixed(2)
}else{
  a //  这里a就只能是never(要不然说不过去)
}

enum枚举

在任何项目开发中,我们都会遇到定义常量的情况,常量就是指不会被改变的值。

TS 中我们使用 const 来声明常量,但是有些取值是在一定范围内的一系列常量,比如一周有七天,比如方向分为上下左右四个方向。

这时就可以使用枚举(Enum)来定义。

数字枚举基本使用:

enum Direction {    Up,    Down,    Left,    Right}

枚举成员会被赋值为从 `0` 开始递增的数字
console.log(Direction.Up) //0    
console.log(Direction.Down) //1   
console.log(Direction.Left) //2   
console.log(Direction.Right) //3

枚举会对枚举值到枚举名进行反向映射
console.log(Direction[0]) // Up
console.log(Direction[1]) // Down
console.log(Direction[2]) // Left
console.log(Direction[3]) // Right

如果枚举第一个元素赋有初始值,就会从初始值开始递增
enum Direction {    Up = 6,    Down,    Left,    Right}
console.log(Direction.Up)    //6     
console.log(Direction.Down)  //7
console.log(Direction.Left)  //8 
console.log(Direction.Right) //9

结论:数字枚举有两个特点

  1. 数字递增
  2. 反向映射

反向映射的原理:

枚举是如何做到反向映射的呢,我们不妨来看一下被编译后的代码


var Direction;(function (Direction) {  
  Direction[Direction["Up"] = 6] = "Up";   
  Direction[Direction["Down"] = 7] = "Down";  
  Direction[Direction["Left"] = 8] = "Left"; 
  Direction[Direction["Right"] = 9] = "Right";
  })(Direction || (Direction = {}));

//主体代码是被包裹在一个自执行函数里,封装了自己独特的作用域。
Direction["Up"] = 6
//会将 Direction 这个对象的 Up 属性赋值为 6,JS 的赋值运算符返回的值是被赋予的值。
Direction["Up"] = 6 返回 6
执行 Direction[Direction["Up"] = 6] = "Up";
相当于执行Direction["Up"] = 6 =Direction[6] = "Up"

这样就实现了枚举的反向映射

手动赋值:

定义一个枚举来管理外卖状态,分别有已下单,配送中,已接收三个状态。

enum ItemStatus {    Buy = 1,    Send,    Receive}
console.log(ItemStatus['Buy'])      // 1
console.log(ItemStatus['Send'])     // 2
console.log(ItemStatus['Receive'])  // 3

//但有时候后端给你返回的数据状态是乱的,就需要我们手动赋值。
//比如后端说 Buy 是 100,Send 是 20,Receive 是 1,就可以这么写

enum ItemStatus {    Buy = 100,    Send = 20,    Receive = 1}
console.log(ItemStatus['Buy'])      // 100
console.log(ItemStatus['Send'])     // 20
console.log(ItemStatus['Receive'])  // 1

计算成员

枚举中的成员可以被计算,比如经典的使用位运算合并权限,可以这么写

enum FileAccess {  
Read    = 1 << 1,  
Write   = 1 << 2,  
ReadWrite  = Read | Write,
  }
console.log(FileAccess.Read)       // 2  -> 010
console.log(FileAccess.Write)  // 4   -> 100
console.log(FileAccess.ReadWrite)  // 6   -> 110


上面运用的示例:
Vue3 源码中的 patchFlags,用于标识节点更新的属性
// packages/shared/src/patchFlags.tsexport 
const enum PatchFlags { 
TEXT = 1, // 动态文本节点 
CLASS = 1 << 1,   // 动态 class 
STYLE = 1 << 2,    // 动态 style 
PROPS = 1 << 3,     // 动态属性 
FULL_PROPS = 1 << 4,   // 具有动态 key 属性,当 key 改变时,需要进行完整的 diff 比较 
HYDRATE_EVENTS = 1 << 5,     // 具有监听事件的节点 
STABLE_FRAGMENT = 1 << 6,    // 子节点顺序不会被改变的 fragment  
KEYED_FRAGMENT = 1 << 7,     // 带有 key 属或部分子节点有 key 的 fragment 
UNKEYED_FRAGMENT = 1 << 8,   // 子节点没有 key 的 fragment 
NEED_PATCH = 1 << 9,         // 非 props 的比较,比如 ref 或指令 
DYNAMIC_SLOTS = 1 << 10,     // 动态插槽 
DEV_ROOT_FRAGMENT = 1 << 11, // 仅供开发时使用,表示将注释放在模板根级别的片段 
HOISTED = -1,                // 静态节点 
BAIL = -2                    // diff 算法要退出优化模式
}

小结:枚举的意义在于,可以定义一些带名字的常量集合,清晰地表达意图和语义,更容易地理解代码和调试。数字枚举可以用,string和other少用(显得很赘)

void类型:

void类型与 any 类型相反,它表示没有任何类型。

function welcome(): void {    console.log('hello')}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

判断IQ水平-第12届蓝桥杯选拔赛Python真题精选

[导读]&#xff1a;超平老师的Scratch蓝桥杯真题解读系列在推出之后&#xff0c;受到了广大老师和家长的好评&#xff0c;非常感谢各位的认可和厚爱。作为回馈&#xff0c;超平老师计划推出《Python蓝桥杯真题解析100讲》&#xff0c;这是解读系列的第50讲。 判断IQ水平&#…

利用栈删除数组中重复元素

先将数据排序&#xff08;降序或升序&#xff09; 建立一个“栈”&#xff0c;三种情况&#xff1a; 1.栈为空&#xff1a;压入一个元素 2.栈不为空 且 栈顶元素不等于将入栈元素&#xff1a;压入一个元素 3.栈不为空 且 栈顶元素等于将入栈元素&#xff1a;删除将压入元素…

SCI 四区(JEI)投稿到录用过程中的经历和心得体会

计算机视觉领域中&#xff0c;包含目标检测、三维重建、语义分割、图像分类等分支。其中&#xff0c;目标检测分支最卷&#xff0c;你知道的&#xff0c;没有背景和资源&#xff0c;发一篇SCI属实不易。本篇博客详细介绍本人投稿到录用过程中的经历和心得。 目录 1. 硬件资源落…

微信云开发小程序的服务器是属于服务商的还是商家的

越来越多的小程序&#xff0c;选择使用微信云开发来进行开发。然而&#xff0c;关于微信云开发小程序的服务器归属权问题&#xff0c;往往会引起一些商家的疑虑。本文将详细解析微信云开发小程序的服务器是属于服务商的还是商家的。 首先&#xff0c;我们需要明确微信云开发的概…

maven引入外部jar包

将jar包放入文件夹lib包中 pom文件 <dependency><groupId>com.jyx</groupId><artifactId>Spring-xxl</artifactId><version>1.0-SNAPSHOT</version><scope>system</scope><systemPath>${project.basedir}/lib/Spr…

1042: 中缀表达式转换为后缀表达式

解法&#xff1a;直接给算法 创建一个栈和一个空的后缀表达式字符串。 遍历中缀表达式中的每个字符。 如果当前字符是操作数&#xff0c;直接将其添加到后缀表达式字符串中。 如果当前字符是操作符&#xff0c;需要将其与栈顶的操作符进行比较&#xff1a; 如果栈为空&#…

动态规划专练( 337.组合总和Ⅳ)

337.组合总和Ⅳ 给你一个由 不同 整数组成的数组 nums &#xff0c;和一个目标整数 target 。请你从 nums 中找出并返回总和为 target 的元素组合的个数。 题目数据保证答案符合 32 位整数范围。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,3], target 4 输出&#x…

2022年蓝桥杯省赛软件类C/C++B组----积木画

想借着这一个题回顾一下动态规划问题的基本解法&#xff0c;让解题方法清晰有条理&#xff0c;希望更多的人可以更轻松的理解动态规划&#xff01; 目录 【题目】 【本题解题思路】 【DP模版】 总体方针&#xff1a; 具体解题时的套路&#xff1a; 【题目】 【本题解题思…

Python判断节假日的几种方式,你学废了吗?

最近在推进信息安全巡检的工作&#xff0c;按公司制度要求和信息安全标准&#xff0c;要求按时对硬件设备、网络、机房、应用系统、数据库等等做巡检工作。为了保证达到信息安全的目标&#xff0c;要求在每周四和节假日的前一天对各类设备和系统进行巡检。 1、使用holidays库判…

zookeeper分布式应用程序协调服务+消息中间件kafka分布式数据处理平台

一、zookeeper基本介绍 1.1 zookeeper的概念 Zookeeper是一个开源的分布式的&#xff0c;为分布式框架提供协调服务的Apache项目。 是Hadoop和Hbase的重要组件。它是一个为分布式应用提供一致性服务的软件&#xff0c;提供的功能包括&#xff1a;配置维护、域名服务、…

python小游戏

这些游戏你玩过几个&#xff1f; 1.贪吃蛇2.吃豆人3.加农炮4.四子棋5. Fly Bird<font color #f3704ab>6.记忆&#xff1a;数字对拼图游戏&#xff08;欢迎挑战&#xff01;用时&#xff1a;2min&#xff09;7.乒乓球8.上课划水必备-井字游戏&#xff08;我敢说100%的人都…

代码随想录算法训练营第二十七天|39.组合总和、40.组合总和II、131.分割回文串

39.组合总和 思路&#xff1a; 本题和77.组合 &#xff0c;216.组合总和III的区别是&#xff1a;本题没有数量要求&#xff0c;可以无限重复&#xff0c;但是有总和的限制&#xff0c;所以间接的也是有个数的限制。 本题搜索的过程抽象成树形结构如下&#xff1a; 注意图中叶…

《HF经理》:二认知误区

一、管理者掌握重要权力&#xff1a; 二、全力来自管理者的职位&#xff1a; 三、管理者必须控制自己的直接下属&#xff1a; 对策&#xff1a;展示自己的品质&#xff0c;能力和影响力 四、管理者必须建立良好的个人关系&#xff1a; 五、管理这必须确保一切运行正常&…

【爬虫开发】爬虫从0到1全知识md笔记第5篇:Selenium课程概要,selenium的其它使用方法【附代码文档】

爬虫开发从0到1全知识教程完整教程&#xff08;附代码资料&#xff09;主要内容讲述&#xff1a;爬虫课程概要&#xff0c;爬虫基础爬虫概述,,http协议复习。requests模块&#xff0c;requests模块1. requests模块介绍,2. response响应对象,3. requests模块发送请求,4. request…

分享2024 golang学习路线

写在前面 Go语言&#xff08;也称为Golang&#xff09;是Google开发的一种静态强类型、编译型语言&#xff0c;它具有简洁、快速、安全、并发等特点&#xff0c;尤其适合构建大型软件、微服务架构和云平台服务。Go的学习曲线相对平缓&#xff0c;社区活跃&#xff0c;是现代编…

韩顺平 | 零基础快速学Python(16) 文件处理

文件 输入与输出 输入&#xff1a;数据从数据源(文件)到程序(内存)&#xff1b; 输出&#xff1a;数据从程序(内存)到数据源(文件)。 #mermaid-svg-06PG6JZq4jJMV1oH {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-sv…

五、LoadBalancer负载均衡服务调用

一、Ribbon目前也进入维护模式 1、是什么 Spring Cloud Ribbon是基于Netflix Ribbon实现的一套客户端负载均衡的工具。 简单的说&#xff0c;Ribbon是Netflix发布的开源项目&#xff0c;主要功能是提供客户端的软件负载均衡算法和服务调用。Ribbon客户端组件提供一系列完善的…

掌握CRM+邮箱技巧:销售速度与客户信任双丰收

在千行百业都在谈提效的今天&#xff0c;如果您的销售团队效率较低&#xff0c;恐怕很难过好2024。销售团队提效是个大话题&#xff0c;总的说来就是销售团队需要在正确的时间做正确的事。如何做到&#xff1f;自然要借助CRM工具。过去我们也讲了不少CRM如何辅助销售团队提效的…

Playwright已经是目前最好的测试自动化工具了吗?

作者观点&#xff1a;很长时间以来&#xff0c;Selenium是QA工程师寻求测试自动化解决方案的首选测试框架。它能够测试任何浏览器&#xff08;这在IE浏览器的统治时期尤其重要&#xff09;和任何平台。然而&#xff0c;现在看来&#xff0c;那个时代已经过去了。 今天&#xf…

Python机器学习实战教程

一、引言 机器学习是人工智能的一个子集&#xff0c;它使用算法来让计算机系统从数据中“学习”并改进其性能&#xff0c;而无需进行明确的编程。Python因其易于学习、强大的库和广泛的应用场景&#xff0c;成为了机器学习的首选语言。本教程旨在帮助读者从零开始学习Python机…