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

文章目录

  • 类型约束
    • 基本类型
    • 联合类型
  • 控制流分析
    • 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.datacase 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.mzph.cn/news/128382.shtml

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

相关文章

推荐游戏《塞尔达传说:旷野之息》

塞尔达传说:旷野之息 播报编辑讨论32上传视频 2017年任天堂企划制作本部开发的动作冒险游戏 3分钟了解荒野之息 03:59 一分钟了解游戏《塞尔达传说: 旷野之息2》 00:57 旷野之息:20-爬雪山找隐藏神庙获攀爬套装部件,踏上沼泽再…

nodejs express vue 点餐外卖系统源码

开发环境及工具: nodejs,vscode(webstorm),大于mysql5.5 技术说明: nodejs express vue elementui 功能介绍: 用户端: 登录注册 首页显示搜索菜品,轮播图&#xf…

QML WebEngineView 调用 JavaScript

作者: 一去、二三里 个人微信号: iwaleon 微信公众号: 高效程序员 在 QML 与 Web 混合开发时,除了使用 WebEngineView 加载网页之外,我们还可以在 QML 层运行 JavaScript 代码,这样就能更灵活地操作浏览器窗口和网页内容,从而实现丰富的交互功能了。例如:获取网页标题、…

王道计算机网络

一、计算机网络概述 (一)计算机网络基本概念 计算机网络的定义、组成与功能 定义:以能够相互共享资源的方式互连起来的自治计算机系统的集合。 目的:资源共享, 组成单元:自治、互不影响的计算机 网络协议 从不同角度计算机网络…

Cesium:CGCS2000坐标系的xyz坐标转换成WGS84坐标系的经纬高度,再转换到笛卡尔坐标系的xyz坐标

作者:CSDN @ _乐多_ 本文将介绍使用 Vue 、cesium、proj4 框架,实现将CGCS2000坐标系的xyz坐标转换成WGS84坐标系的经纬高度,再将WGS84坐标系的经纬高度转换到笛卡尔坐标系的xyz坐标的代码。并将输入和输出使用 Vue 前端框架展示了出来。代码即插即用。 网页效果如下图所示…

【TES720D】青翼科技基于复旦微的FMQL20S400全国产化ARM核心模

板卡概述 TES720D是一款基于上海复旦微电子FMQL20S400的全国产化核心模块。该核心模块将复旦微的FMQL20S400(兼容FMQL10S400)的最小系统集成在了一个50*70mm的核心板上,可以作为一个核心模块,进行功能性扩展,特别是用…

从0开始搭建一个前端项目的架子

目录 1.概述 2.项目搭建 3.elementUI 4.CSS预处理器 5.重置CSS 6.图标库 7.axios和路由 7.1.axios 7.2.路由 7.3.路由懒加载和异步组件 1.概述 在古早时代,只需要会html、css、js、ajax就能开发一个前端项目,这些技术的上手成本也不高&#x…

数据结构与算法解析(C语言版)--搭建项目环境

本栏目致力于从0开始使用纯C语言将经典算法转换成能够直接上机运行的程序,以项目的形式详细描述数据存储结构、算法实现和程序运行过程。 参考书目如下: 《数据结构C语言版-严蔚敏》 《数据结构算法解析第2版-高一凡》 软件工具: dev-cpp 搭…

一文看懂MySQL 5.7和MySQL 8到底有哪些差异?

目录 ​编辑 引言 1、数据字典和系统表的变化 2、JSON支持的改进 3、新的数据类型 4、安全性增强 5、性能改进 6、InnoDB存储引擎的改进 结论 引言 MySQL作为最常用的开源关系型数据库管理系统之一,一直在不断发展和改进。随着时间的推移,MySQ…

【详细教程】关于如何使用GitGitHub的基本操作汇总GitHub的密钥配置 ->(个人学习记录笔记)

文章目录 1. Git使用篇1.1 下载安装Git1.2 使用Git 2. GitHub使用篇2.1 如何git与GitHub建立联系呢?2.2 配置公钥 1. Git使用篇 1.1 下载安装Git 点击 官网链接 后,进入Git官网,下载安装包 然后根据系统类型进行下载,一般为wind…

【PWN · 栈迁移|off-by-one|伪随机|爆破】[HDCTF 2023]Makewish

一道精巧、包含很多要点的题目 一、题目 二、思路浅析 通过ctypes酷通过伪随机数检测,没用srand指定随机种子时,默认srand(1)。 通过puts_name的off-by-one来泄露canary 进入vuln时,发现只能刚好填充到rbp前面,但是会将最后一个…

尚硅谷大数据项目《在线教育之实时数仓》笔记005

视频地址:尚硅谷大数据项目《在线教育之实时数仓》_哔哩哔哩_bilibili 目录 第9章 数仓开发之DWD层 P031 P032 P033 P034 P035 P036 P037 P038 P039 P040 第9章 数仓开发之DWD层 P031 DWD层设计要点: (1)DWD层的设计依…

什么是配电室电能监测系统?

为了保证电力系统的安全、稳定、经济运行成为了当务之急。配电室电能监测系统作为一种新兴技术,有效提高了配电室的运行管理水平,降低了电力系统的风险。接下来,小编来为大家介绍下配电室电能监测系统,一起来看下吧! 一…

【Java 进阶篇】Java ServletContext详解:获取MIME类型

MIME(Multipurpose Internet Mail Extensions)类型是一种标识文件类型的文本标签,通常用于指示浏览器如何处理Web服务器返回的文件。在Java Web应用程序中,ServletContext对象提供了一种方便的方法来获取文件的MIME类型。本篇博客…

el-input输入校验插件(正则表达式)

使用方法&#xff1a;在main.js文件中注册插件然后直接在<el-input>加入‘v-插件名’ (1)在main.js文件&#xff1a; // 只能输入数字指令 import onlyNumber from /directive/only-number; Vue.use(onlyNumber); &#xff08;2&#xff09;在src/directive文件夹中 &a…

docker部署elk

目录 前言 一、创建程序工作路径 二、创建私有网络 三、部署elasticsearch 1.先搜速后下载 2.创建一个基础的容器&#xff08;此步骤是为了拷贝容器里的文件&#xff09; 3.拷贝文件到宿主机 3.1进入容器 3.2拷贝并授权 3.3删除基础容器 4.创建容器 5.访问9200测试 …

Redis入门指南学习笔记(2):常用数据类型解析

一.前言 本文主要介绍Redis中包含几种主要数据类型&#xff1a;字符串类型、哈希类型、列表类型、集合类型和有序集合类型。 二.字符串类型 字符串类型是Redis中最基本的数据类型&#xff0c;它是其他4种数据类型的基础&#xff0c;其他数据类型与字符串类型的差别从某种角度…

【Linux学习笔记】进程概念(上)

1. 冯诺依曼体系结构2. 操作系统的作用3. 进程 1. 冯诺依曼体系结构 如图&#xff0c;这是一个冯诺依曼体系结构简图 其中这里的存储器指的是内存&#xff01; 用通俗的话来解释这个图&#xff0c;就是数据从输入设备进入&#xff0c;然后进入到存储器&#xff0c;CPU从存储器…

阿里云OS系统Alibaba Cloud Linux 3系统的安全更新命令

给客户部署的服务&#xff0c;进入运维阶段&#xff0c;但是经常被客户监测到服务器漏洞&#xff0c;现在整理一下&#xff0c;服务器漏洞问题更新命令步骤。 服务器系统&#xff1a; 阿里云linux服务器&#xff1a;Alibaba Cloud Linux 3 漏洞类型和描述&#xff1a; #3214…

新体验:万圣节夜晚的新游戏!--愤怒的南瓜

引言&#xff1a; Chatgpt4.0 所带来的冲击似乎远超出人们想象&#xff0c;网页小游戏《愤怒的南瓜》在昨日&#xff08;万圣节夜晚&#xff09;火爆了外网。一位名为 Javi Lopez 的外国小哥使用 Midjourney、DALL•E 3 和 GPT-4 打开了一个无限可能的世界&#xff0c;重新演绎…