[学习笔记]TypeScript查缺补漏(二):类型与控制流分析

news2025/2/25 3:18:05

文章目录

  • 类型约束
    • 基本类型
    • 联合类型
  • 控制流分析
    • instanceof和typeof
    • 类型守卫和窄化
      • typeof判断
      • instanceof判断
      • in判断
      • 内建函数,或自定义函数
      • 赋值
      • 布尔运算
    • 保留共同属性
  • 字面量类型(literal type)
    • as const 作用

类型约束

TypeScript中的类型是一种用于描述变量、函数参数和函数返回值的特征的方式。

代码中定义类型的部分不会在原生JavaScript环境中编译

在这里插入图片描述

基本类型

包括number、string、boolean、null、undefined和symbol。

联合类型

联合类型(Union Types)是指用“|”符号将多个类型组合成一个的类型。这意味着一个变量可以存储多种类型的值

let value: number | string = 42;

控制流分析

TypeScript 本身是一种静态类型语言,它在编译时进行类型检查,因此控制流分析在编译阶段就已经开始了

比如:

function getUserInput():string|number{
  if(new Date() != new Date("2023-11-01")){
    return "yes";
  }
  else {
    return 0;
  }
}

此时Typescript的控制流分析将data类型视为 string | number

在这里插入图片描述

instanceof和typeof

typeof操作符用于获取一个值的类型。它返回一个字符串,表示值的类型

instanceof操作符用于判断一个对象是否属于某个类的实例

使用typeof input === “string” 和 input instanceof String 这两个判断有什么区别:

typeof只能用于判断基本类型,instanceof可以用于判断自定义的类型,例如类,接口,数组等
instanceof 可以用于判断一个对象是否是某个类的实例,包括继承自该类的子类。

类型守卫和窄化

类型守卫用于获取变量类型信息,通常使用在条件块语句中。类型守卫是返回布尔值的常规函数,接受一个类型并告诉 TypeScript 是否可以缩小到更具体的类型。

缩小到更具体的类型的过程称之为“窄化(Narrowing)”,它能根据代码中的逻辑减少联合中的类型数量。大多数窄化来自if语句中的表达式,其中不同的类型操作符在新的范围内窄化。

typeof判断

var input = getUserInput()
input  // string |number
if (typeof input === "string") {
  input  // string
}

instanceof判断

var input = getUserInput()
input  // number | number[]
if (input instanceof Array)) {
  input  // number[]
}

in判断

var input = getUserInput()
input  // string | {error: ...}
if ("error" in input) {
  input  // {error: ...}
}

内建函数,或自定义函数


var input = getUserInput()
input  // number | number[]
if (Array.isArray(input)) {
  input  // number[]
}


// 验证是否是number类型
function isNumber(x: any): x is number {
  return typeof x === "number";
}

// 验证是否是string类型
function isString(x: any): x is string {
  return typeof x === "string";
}


var input=getUserInput(); //string | number
if (isNumber(input)){
  input // number
}

赋值

赋值过后的变量,也将发生“窄化”

let data: string | number = ..
data // string | number
data ="Hello"
data // string

布尔运算

执行布尔运算时在一行代码里也会发生窄化

var input = getUserInput()
input  // number | string
const inputLength = (typeof input ==="string" && input.length) || input //string

保留共同属性

当联合类型的所有成员都有相同的属性名称时,这些属性会被保留

type Responses =
|{ status: 200, data: any }
|{status :301, to: string }
|{status: 400,error: Error }

const response = getResponse()
response // Responses
switch(response.status) {
  case 200: return response.data
  case 301: return redirect(response.to)
  case 400: return response.error
}

字面量类型(literal type)

字面量类型指的是使用字面量语法来定义的类型。字面量类型是一种特殊的类型,它允许你使用字面量值来定义类型的约束。

字面量类型包括以下几种:

  1. 数字字面量类型:使用数字字面量来定义数字类型的约束。例如,0、1、2 等。
  2. 字符串字面量类型:使用字符串字面量来定义字符串类型的约束。例如,“hello”、“world” 等。
  3. 布尔字面量类型:使用布尔字面量 true 和 false 来定义布尔类型的约束。
  4. 元组字面量类型:使用元组字面量 [item1, item2, …] 来定义元组类型的约束。例如,[1, “hello”] 表示一个包含一个数字和一个字符串的元组。
  5. null 和 undefined 字面量类型:使用 null 和 undefined 字面量来表示 null 和 undefined 类型的约束。
  6. 空类型字面量:使用 {} 来定义一个空类型的约束,表示该类型没有任何属性或方法。
  7. 任意值字面量类型:使用 any 关键字来定义任意值的约束,表示该类型可以接受任何类型的值。

编译器在编译期间进行类型检查,提高代码的可读性和可维护性。

通常字面量类型不会单独出现,而是配合联合类型,用于约束类型的值

declare function handleRequest(url: string, method: "GET" | "POST"): void;

handleRequest(req.url, "GET");  //编译通过

handleRequest(req.url, "MYGET");  //编译不通过,值不合法

as const 作用

使用“as const”将类型锁定为其字面量版本

在 TypeScript 中,as const 用来明确告诉 TypeScript 编译器这个变量是只读的(const),并且它的类型是字面量类型

还是刚刚的例子

declare function handleRequest(url: string, method: "GET" | "POST"): void;
const req = { url: "https://example.com", method: "GET" };
handleRequest(req.url, req.method);

编译器会报错

在这里插入图片描述

原因是req类型被识别为

在这里插入图片描述

const req = { url: "https://example.com", method: "GET" } as const;

当加上“as const”识别为字面量版本的类型

在这里插入图片描述

-本章完-

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

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

相关文章

产品经理一定要学会的原型交互规范设计

一、主级按钮 序号1、序号2:主级按钮 一个按钮区最多一个主级按钮,也可以没有 二、线框按钮 序号3:如果不是非常为了突出“完成”、“推荐”的操作,可以多采用线框按钮 三、红色按钮 序号4:红色按钮不需要选中颜色这…

Vue3.0插槽:VOA模式

用法&#xff1a; 父组件App.vue <template><div><!--将html代码插入到子组件中带默认名称的插槽中--><AChild><!--这段html会插入到AChild组件中<slot></slot>插槽中--><!-- 注意&#xff1a;写在父组件中的html代码只能在父组…

Redis之持久化(RDB和AOF)

文章目录 前言一、RDB1.介绍2.redis.config有关配置3.触发4.恢复5.优缺点 二、AOF1.介绍2.redis.config配置3.启动4.恢复5.重写6.优缺点 总结 前言 Redis 是内存数据库&#xff0c;即数据存储在内存。 如果不将内存中的数据保存到磁盘&#xff0c;一旦服务器进程退出&#xff…

uniapp js-sdk插件之js实用工具包

插件介绍 插件为uniapp前端js工具包&#xff0c;工具包包含了众多模块&#xff0c;数组、颜色、日期、加解密、函数、数字、对象、请求、字符串、验证等模块&#xff0c;可以让您的开发得心应手&#xff0c;不需要为了一个功能需要花费大量的时间从网上再去搜索&#xff0c;本…

什么是覆盖索引?

覆盖索引是指一个索引包含了查询语句所需的所有数据&#xff0c;不仅能够提供索引的搜索能力&#xff0c;还可以完全覆盖查询需求&#xff0c;避免了回表操作&#xff08;即根据索引查找到主键&#xff0c;再根据主键获取数据的额外操作&#xff09;&#xff0c;从而提高查询性…

【AI数学】三维视觉中的四种坐标系

三维视觉中&#xff0c;需要掌握四种坐标系&#xff1a;世界坐标系、相机视角坐标系、NDC坐标系、屏幕坐标系。 世界坐标系&#xff08;World coordinate system&#xff09; 物体或者场景在真实世界中的位置。 相机视角坐标系&#xff08;Camera view coordinate system&…

数字孪生技术:强化紧急响应与决策

随着科技的不断进步&#xff0c;数字孪生技术已经逐渐渗透到了各个行业&#xff0c;其中包括了灾害管理领域。在灾害管理中&#xff0c;数字孪生提供了极大的帮助&#xff0c;使决策者更好地理解和应对各种灾害&#xff0c;包括自然灾害和人为灾害。本文带大家一起探索数字孪生…

WhatsApp Business为什么会被封号?该如何解决

目前&#xff0c;作为全球即时通讯领域的重要平台之一的WhatsApp已成为企业在营销和与客户沟通时的首选工具。但是长时间、高强度的营销行为很容易导致WhatsApp Business账户突然被封禁&#xff0c;无法再使用账号。即使后续再去进行申诉&#xff0c;要求官方解封该账户&#x…

LeetCode----124. 二叉树中的最大路径和

题目 二叉树中的 路径 被定义为一条节点序列,序列中每对相邻节点之间都存在一条边。同一个节点在一条路径序列中 至多出现一次 。该路径 至少包含一个 节点,且不一定经过根节点。 路径和 是路径中各节点值的总和。 给你一个二叉树的根节点 root ,返回其 最大路径和 。 示…

延时摄影视频制作工具 LRTimelapse mac中文版特点介绍

lrTimelapse mac是一款适用于 Windows 和 macOS 系统的延时摄影视频制作软件&#xff0c;可以帮助用户创建高质量的延时摄影视频。该软件提供了直观的界面和丰富的功能&#xff0c;支持多种时间轴摄影工具和文件格式&#xff0c;并具有高度的可定制性和扩展性。 lrTimelapse ma…

计算机从内存中读取数组元素

在计算机中&#xff0c;我们可以把内存看成是一些排列好的格子&#xff0c;每个格子对应一个内存地址&#xff0c;那么数据会分散的存储在不同的格子中&#xff1a; 对于数组&#xff0c;计算机会在内存中为其申请一段连续的空间&#xff0c;并且会记下索引为0处的内存地址&…

HTML和CSS的基础-前端扫盲

想要写出一个网页&#xff0c;就需要学习前端开发&#xff08;写网页代码&#xff09;和后端开发&#xff08;服务器代码&#xff09;。 对于前端的要求&#xff0c;我们不需要了解很深&#xff0c;仅仅需要做到扫盲的程度就可以了。 写前端&#xff0c;主要用到的有&#xf…

大厂面试题-网络四元组

四元组&#xff0c;简单理解就是在TCP协议中&#xff0c;去确定一个客户端连接的组成要素&#xff0c;它包括源 IP地址、目标IP地址、源端口号、目标端口号。 正常情况下&#xff0c;我们对于网络通信的认识可能是这样(如图)。 服务端通过Server Socket建立一个对指定端口号…

WebDAV之π-Disk派盘 + 记得倒数日

推荐一款帮你记录一生中重要日子的倒计时App记得倒数日,帮您记录纪念日、生日、倒数日、正数日、传统节日、倒数拾光等,成为你生活小帮手,及时提醒你日子的到来,还支持连接葫芦儿派盘服务。 【记得倒数日特色】 1.一款实用的生活工具,记得日子致力于做优秀的倒数日。 2.结…

Python笔记——pyChram连接linux子系统,使用linux下的Python进行编译

Python笔记——pyChram连接linux子系统&#xff0c;使用linux下的Python进行编译 Linux子系统安装与配置安装前准备安装Linux子系统安装Python3.8配置pyCharm 最近要跑的实验里&#xff0c;python有个机器学习的库windows环境下是没有的&#xff0c;在linux环境下有。虚拟机又不…

C#编程中字符串公式的计算

在一个程序开发当中&#xff0c;有很多涉及到公式的定义与计算&#xff0c;在用户给定的文档中&#xff0c;公式采用字符串形式定义&#xff0c;包含了一些变量名和各种运算符号&#xff0c;程序需要先进行字符变量的值替换后再进行计算&#xff0c;取得结果后再进行后续的操作…

【EI会议征稿】第七届先进算法与控制工程国际学术会议(ICAACE 2024)

第七届先进算法与控制工程国际学术会议&#xff08;ICAACE 2024&#xff09; 2024 7th International Conference on Advanced Algorithms and Control Engineering 第七届先进算法与控制工程国际学术会议&#xff08;ICAACE 2024&#xff09;定于2024年1月26-28日在中国上海…

CPLEX获取模型的解池中的解方案

文章目录 1、前序2、解池中的解方案获取3、CPLEX求解模型的时间THE END 1、前序 \qquad CPLEX求解模型CAPI继续解读。最近在进行Bender decompostion的实验时&#xff0c;需要获取到CPLEX求解的所有的解方案信息&#xff0c;所以又头大翻了一通“gou pi不通”的CPLEX API官方文…

DDACO

算法 alternative set包括备用路径和禁忌表&#xff0c;roulette体现所占比例越大被选中概率越高的思想。在图2中&#xff0c;节点表示与图1中的边相同的路径&#xff0c;边表示邻接关系&#xff08;AND关系&#xff09; 所有的帕累托最优解构成帕累托最优解集 作者未提供代码…

数据通信——应用层(DHCP的原理与配置)

引言 假如我们的网络中有N台设备&#xff0c;它们都要设置IP地址&#xff0c;如果人工去一个个配置不仅不方便管理还很麻烦。因此我们用DHCP来自动分配地址。 一&#xff0c;系统的启动流程 不仅是计算机、很多网络设备的启动流程如下&#xff1a; 设备上电后&#xff0c;硬件…