[学习笔记]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.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.mfbz.cn/a/113328.html

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

相关文章

SIP 系统容器化实践

由于SIP系统相对成熟,目前互联网上的SIP系统方案大多数都是基于虚拟机来实现的。 本文是基于容器化实现SIP系统的方案以及遇到的问题总结。 本文会展示两个系统的SIP实现,分别是智能语音机器人和CTI系统,不会涉及太多的业务,只是对…

XX棋牌添加房间教程

注:任何一款游戏,最多只能添加4个房间。 这里以红中麻将为例,添加房间教程如下: 打开“GameServer.exe”,点击创建房间: 2.在创建房间界面,选择“红中麻将”,然后进入游戏配置选项界…

GoLong的学习之路(十七)基础工具之GORM(操作数据库)(更新)

书接上回,上回写道,GORM的查询和创建(插入数据),这回继续些增删改查的改和删的操作。 文章目录 更新update修改单个列修改多个列修改选定字段批量更新新阻止全局更新 使用 SQL 表达式更新注意 根据子查询进行更新不使用…

Centos7下生成https自签名证书

1、安装openssl yum install openssl2、生成带密码的私有秘钥文件 openssl genrsa -des3 -out server.key 2048使用带密码的私有秘钥文件时需要输入密码,这里直接输入:123456 3、生成不带密码的私有秘钥文件 openssl rsa -in server.key -out serve…

【tensorboard打开失败】No dashboards are active for the current data set.

这里我再跟视频学的时候,找了很多的指令,说是对应版本不一样,但是发现用了很多指令都可以弹出来跳转的url,那应该就不是输入指令的问题 直到我想把logs里面的文件删掉重新跑的时候,我突然注意到这里有中文字符&#xf…

【向生活低头】win7打印机共享给win11使用,win11无法连接问题的解决

打印机是跟win7的电脑连接的,然后试了很多方法,win11都没法添加该打印机去使用。 网上的方法乱七八糟啥都有,但试了以后,发现基本没什么用。 刚刚发现知乎上的一个回答是有用的,这里做记录以备后用。 1.打开控制面板的…

在Linux上通过NTLM认证连接到AD服务器(未完结)

这篇文章目前还没有实现具体的功能,只实现了明文登录,因为我缺少一些数据,比如通过密码生成hash,以及通过challenge生成response,我不知道怎么实现,因此这篇文章也是一个交流的文章,希望大佬看见…

Hydra(九头蛇海德拉)教程

Hydra 参数 hydra <参数> <IP地址> <服务名> 参数案例说明-l-l root登录账号-L-L userName.txt用户文件-p-l 123456登录密码-P-P passwd.txt密码文件-e-e nsrn 空密码 s 用户名即密码 r 用户名和密码相反&#xff08;如root的密码为toor&#xff09;-s-s 21指…

人工智能基础_机器学习011_梯度下降概念_梯度下降步骤_函数与导函数求解最优解---人工智能工作笔记0051

然后我们来看一下梯度下降,这里先看一个叫 无约束最优化问题,,值得是从一个问题的所有可能的备选方案中选最优的方案, 我们的知道,我们的正态分布这里,正规的一个正态分布,还有我们的正规方程,他的这个x,是正规的,比如上面画的这个曲线,他的这个x,就是大于0的对吧,而现实生活…

QT基础学习笔记

文章目录 1 概述1.1 优点1.2 QT成功使用案例1.3 安装教程1.3.1 在线安装流程1.3.2 离线安装流程 2 创建工程2.1 快捷键2.1.1 常用快捷键2.1.2 修改快捷键 2.2 proj文件 3 对象树4 信号和槽4.1 自定义信号和槽4.1.1 信号连接信号4.1.2 一个信号连接多个槽函数4.1.3 多个信号连接…

Jenkins中解决下载maven包巨慢的问题

背景介绍 我们在使用jenkins构建maven项目时由于依赖很多第三方jar包&#xff0c;默认会从maven中央仓库下载&#xff0c;由于maven中央仓库服务器是国外的&#xff0c;所以下载很慢&#xff0c;甚至会超时 解决办法 增加jenkins maven 源配置 如下图所示&#xff0c;增加m…

vue el-table-column 修改一整列的背景颜色

目录 修改表头以及一整列数据的背景颜色&#xff0c;效果如下&#xff1a; 总结 修改表头以及一整列数据的背景颜色&#xff0c;效果如下&#xff1a; 修改表头背景颜色&#xff1a;在el-table绑定header-cell-style 修改一整列的数据背景颜色&#xff1a;在el-table绑定:cel…

数据结构(四)--队列及面试常考的算法

一、队列介绍 1、定义 与栈相似&#xff0c;队列是另一种顺序存储元素的线性数据结构。栈与队列的最大差别在于栈是LIFO&#xff08;后进先出&#xff09;&#xff0c;而队列是FIFO&#xff0c;即先进先出。 2、优缺点及使用场景 优点&#xff1a;先进先出&#xff08;FIFO&…

Qt PingFang字体在Debian/Ubuntu上安装

1 下载ttf格式的字体库 2 将上图中的ttf文件拷贝到/usr/share/fonts/truetype 3 执行 fc-cache -f -v 4 如果qt程序字体效果未显示&#xff0c;可能与qt的字体路径有关 我这边是这样修改的&#xff1a;

CSS3中的字体和文本样式

CSS3优化了CSS 2.1的字体和文本属性&#xff0c;同时新增了各种文字特效&#xff0c;使网页文字更具表现力和感染力&#xff0c;丰富了网页设计效果&#xff0c;如自定义字体类型、更多的色彩模式、文本阴影、生态生成内容、各种特殊值、函数等。 1、字体样式 字体样式包括类…

生成独立运行的QT程序

前言 使用windeployqt程序生成独立运行的QT程序。 方法 1.在QT Creator使用release构建运行一下代码&#xff0c;不使用debug模式&#xff0c;将release文件夹中生成的***.exe文件复制到一个新的文件夹下。 2.打开 Qt 5.14.2(MinGW 7.3.0 64-bit) 进入exe文件所在的目录执…

2023年11月2日历史上的今天大事件早读

1082年11月02日宋徽宗出生 1861年11月02日辛酉政变 1910年11月02日中国社会学家和人类学家费孝通诞生 1910年11月02日畜生态学科的创始人汤逸人诞生 1917年11月02日《贝尔福宣言》和犹太复国主义 1917年11月02日美日订立“兰辛—石井协定”损害中国利益 1937年11月02日忻…

2022最新版-李宏毅机器学习深度学习课程-P26 自注意力机制

一、应用情境 输入任意长度个向量进行处理。 从输入看 文字处理&#xff08;自然语言处理&#xff09; 将word表示为向量 one-hotword-embedding声音信号处理 每个时间窗口&#xff08;Window, 25ms&#xff09;视为帧&#xff08;Frame&#xff09;,视为向量图 每个节点视为…

Spring Cloud的ElasticSearch的进阶学习

目录 数据聚合 Bucket示例 Metric示例 RestAPI实现聚合 自动补全 使用拼音分词 自定义分词器 实现自动补全 RestAPI实现自动补全功能 数据同步 同步调用 异步通知 监听binlog 数据聚合 聚合可以实现对文档数据的统计、分析、运算。聚合常见的有三类&#xff1a; …

[极客大挑战 2019]LoveSQL 1

题目环境&#xff1a;判断注入类型是否为数字型注入 admin 1 回显结果 否 是否为字符型注入 admin 1 回显结果 是 使用堆叠注入 采用密码参数进行注入 爆数据库1; show database();#回显结果 这里猜测注入语句某字段被过滤&#xff0c;或者是’;被过滤导致不能堆叠注入 爆字段数…