TypeScript基础知识:类型守卫和类型推断

        在 TypeScript 中,类型守卫和类型推断是两个重要的概念,它们可以帮助我们更好地理解和利用类型系统的优势。本文将详细介绍这两个概念,并提供示例代码来说明它们的用法和优势。

一、类型守卫

        类型守卫是一种在 TypeScript 中用于缩小变量类型范围的技术。当我们使用条件语句或特定的语法结构时,TypeScript 可以根据这些条件自动推断出变量的具体类型。这样,我们就可以在不同的代码块中使用不同的类型方法和属性,而无需手动进行类型断言。下面是一个简单的示例,展示了如何使用类型守卫:

function printLength(value: string | string[]) {if (Array.isArray(value)) {console.log("数组长度:" + value.length);} else {console.log("字符串长度:" + value.length);}
}printLength("Hello"); // 输出:字符串长度:5
printLength(["Hello", "World"]); // 输出:数组长度:2

在上面的代码中,printLength 函数接受一个参数 value,它可以是字符串或字符串数组。通过使用 Array.isArray 方法对 value 进行判断,我们可以在不同的条件分支中使用不同的属性和方法,而不会引发类型错误。

        除了使用 typeof  instanceof 进行类型守卫外,我们还可以使用自定义的类型谓词来实现更复杂的类型守卫逻辑。例如:

function isNumber(value: any): value is number {return typeof value === "number";
}function multiply(value: number | string, factor: number) {if (isNumber(value)) {return value * factor;} else {return value.repeat(factor);}
}console.log(multiply(5, 3)); // 输出:15
console.log(multiply("Hello", 3)); // 输出:HelloHelloHello

在上面的代码中,我们定义了一个名为 isNumber 的类型谓词函数,用于判断变量是否为数字类型。通过使用 value is number 的语法,我们可以在条件分支中确保 value 是一个数字类型,从而避免潜在的类型错误。类型守卫是 TypeScript 中非常有用的特性,它可以提供更强大的类型检查和更安全的代码编写体验。

二、类型推断

类型推断是 TypeScript 中另一个重要的特性,它允许编译器根据上下文自动推断变量的类型。这样,我们就可以省略显式地注解变量类型,让 TypeScript 自动为我们推断出正确的类型。

下面是一个简单的示例,展示了类型推断的用法:

let message = "Hello TypeScript"; // 推断为字符串类型
let count = 10; // 推断为数字类型function add(a: number, b: number) {return a + b; // 推断返回值类型为数字类型
}let result = add(5, 3); // 推断 result 的类型为数字类型

在上面的代码中,我们没有显式地注解变量 messagecount 和函数 add 的参数和返回值类型,但 TypeScript 编译器可以根据赋值和函数体的内容自动推断出正确的类型。

除了基本类型推断外,TypeScript 还支持上下文推断、最佳通用类型推断和函数返回值推断等更高级的推断技巧。这些推断规则使得我们在编写代码时可以更加简洁和灵活,同时不失去类型安全性。

总结

        通过本文的介绍,我们了解了 TypeScript 中的两个重要概念:类型守卫和类型推断。类型守卫允许我们根据条件缩小变量的类型范围,从而在不同的代码块中使用不同的类型方法和属性。而类型推断则可以根据上下文自动推断变量的类型,使得我们可以省略显式地注解变量类型,让 TypeScript 自动为我们推断出正确的类型。

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

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

相关文章

U盘安装XP纯净版系统教程软件安装教程(附软件下载地址)

软件简介: 软件【下载地址】获取方式见文末。注:推荐使用,更贴合此安装方法! U盘安装XP纯净版系统是一种便捷且快速的方式,以实现系统重装或升级的需求。这篇教程将为您详细介绍如何使用U盘来安装XP纯净版系统。XP纯…

代码随想录Day 17 | 110 平衡二叉树 257 二叉树的所有路径 404 左叶子之和

代码随想录Day 17 | 110 平衡二叉树 257 二叉树的所有路径 404 左叶子之和 平衡二叉树二叉树的所有路径左叶子之和 平衡二叉树 文档讲解:代码随想录 视频讲解: 后序遍历求高度,高度判断是否平衡 | LeetCode:110.平衡二叉树 状态 …

DEJA_VU3D - Cesium功能集 之 117-雷达扫描(圆环效果)

前言 编写这个专栏主要目的是对工作之中基于Cesium实现过的功能进行整合,有自己琢磨实现的,也有参考其他大神后整理实现的,初步算了算现在有差不多实现小140个左右的功能,后续也会不断的追加,所以暂时打算一周2-3更的样子来更新本专栏(每篇博文都会奉上完整demo的源代码…

C++知识点总结(13):函数

一、定义 函数,指可以实现某个功能,可以重复使用的一段代码。不同的函数之间相互独立,即函数之间的功能互不影响(互相的代码)。 二、结构 1. 定义 返回值类型 函数名(形参1, 形参2, 形参3...形参n) {...return 值; }2…

Java初学习

Java代码示例: public class helloworld {public static void main(String[] args){System.out.println("hello world");} } Java程序的名字需要和文件名字一致,就是那个helloworld Java程序需要对类有深度的认识: 对象是类的…

2023年全国职业院校技能大赛软件测试赛题—单元测试卷②

单元测试 一、任务要求 题目1&#xff1a;任意输入2个正整数值分别存入x、y中&#xff0c;据此完成下述分析&#xff1a;若x≤0或y≤0&#xff0c;则提示&#xff1a;“输入不符合要求。”&#xff1b;若2值相同&#xff0c;则提示“可以构建圆形或正方形”&#xff1b;若2<…

ipad协议逆向分析实战篇-1

请使用dnspy环境进行学习研究&#xff0c;切勿用于非法操作 1.首先拿到得到的部署包进行逆向分析 2.解压部署包并找到bin这个文件夹 3.找到Wechat.Api.dll这个文件 4.这两个是协议的核心文件&#xff0c;破解了这个核心文件就可以得出逻辑源码 5.首先把Wechat.Api.dll这个…

Pandas实战100例 | 案例 23: 处理空值

案例 23: 处理空值 知识点讲解 处理空值是数据清洗过程中的一个关键步骤。Pandas 提供了多种方法来检测、填充和删除空值。 检测空值: 使用 isnull 方法可以检测 DataFrame 中的空值。填充空值: 使用 fillna 方法可以填充空值。删除包含空值的行或列: 使用 dropna 方法可以删…

C++ (MFC) 单程序运行(防止多开程序)

C (MFC) 单程序运行&#xff08;防止多开程序) 项目文件名:MFCAppTest 在 C*****App.cpp 文件中 CMFCAppTestApp::InitInstance 函数中 添加以下代码 //避免程序的多开 xxxx为信号量的名字 可随意CreateMutex(NULL, TRUE, TEXT("MFCAppTest")); if (GetLastError…

oracle—IMU机制

正常的情况下&#xff0c;当事务需要回滚块的时候&#xff0c;是去undo表空间找 现在是在sharepool中分一个IMUbuffer&#xff0c;将所有的回滚信息写入。直接就可以从中取。减少了物理IO 同时这个过程也产生redo&#xff0c;直接就是图中红色的&#xff0c;不防止崩溃 优点 1…

开机自启动android app

Android App开机自启动_android 开机自启动-CSDN博客 注意权限问题&#xff1a; 第二种实现方式&#xff1a;系统桌面应用 问&#xff1a;android的系统桌面应用启动是什么&#xff1a; 答&#xff1a; Android 系统桌面应用是指用户在设备主屏幕上看到的默认启动界面&…

代码随想录算法训练营第四天| 24. 两两交换链表中的节点、19.删除链表的倒数第N个节点面试题 02.07. 链表相交、142.环形链表II

文档讲解&#xff1a;虚拟头节点&#xff0c;三指针&#xff0c;快慢指针&#xff0c;链表相交&#xff0c;环形链表&#xff0c; 技巧&#xff1a; 1、对于指针的操作要画图&#xff0c;明确步骤后好做了 2、使用虚拟头节点可以避免对头节点单独讨论&#xff0c;且方便对头节点…

C++ Primer 6.1 函数基础

函数的形参列表 int func(int v,int v2) {int v,v2;//&#xff01;错误 } 函数返回类型 不能是数组和函数&#xff08;两者都不接受对拷&#xff09;&#xff0c;但可以是指针 局部对象 形参和函数体内部的变量称为局部变量&#xff0c;仅在函数内部可见&#xff0c;隐藏外部…

c++的map的内存布局

以下均基于x86平台64位CentOS或Ubuntu&#xff0c;g8。 有一个指针偶尔会置成0xffffffff&#xff0c;大佬查了几天发现是由于对map的end迭代器进行了错误操作导致的。简化代码如下&#xff1a; struct s_t {std::map<long, int> m;void *p; }; int main() {s_t s;auto …

Python 安卓开发:Kivy、BeeWare、Flet、Flutter

kivy&#xff1a;https://github.com/kivy python-for-android &#xff1a;https://python-for-android.readthedocs.io/en/latest/ BeeWare&#xff1a;https://docs.beeware.org/en/latest/ Flet&#xff1a;https://github.com/flet-dev/flet 把 PySide6 移植到安卓上去&a…

权值初始化

一、梯度消失与爆炸 在神经网络中&#xff0c;梯度消失和梯度爆炸是训练过程中常见的问题。 梯度消失指的是在反向传播过程中&#xff0c;梯度逐渐变小&#xff0c;导致较远处的层对参数的更新影响较小甚至无法更新。这通常发生在深层网络中&#xff0c;特别是使用某些激活函…

Pandas实战100例 | 案例 18: 列操作 - 重命名、删除和重新排序列

案例 18: 列操作 - 重命名、删除和重新排序列 知识点讲解 在处理 DataFrame 时&#xff0c;经常需要对列进行各种操作&#xff0c;如重命名列、删除列或重新排序列。Pandas 提供了简洁的方法来执行这些任务。 重命名列: 使用 rename 方法可以改变 DataFrame 中一个或多个列的…

C++STL

STL基本概念 standard template library : 标准模板库STL从广义上可以分为&#xff1a; 容器(container) 算法(algorithm) 迭代器(iterator)。 容器和算法之间通过迭代器进行无缝连接。 STL几乎所有的代码都采用了模板类或者模板函数STL六大组件 STL的容器 STL的容器就是将运…

vmlinux, System.map; cmake的find_package(Clang)产生的变量们; geogebra单位切向量(简单例子)

linux4.15.y内核中的函数个数 依赖关系: vmlinux, vmlinux.bin, bzImage cd /bal/linux-stable/ file vmlinux #vmlinux: ELF 32-bit LSB executable, Intel 80386, version 1 (SYSV), statically linked, BuildID[sha1]b99bbd9dda1ec2751da246d4a7ae4e6fcf7d789b, not str…

uniapp组件定义

自定义组件 新建在/components/组件名.vue文件 组件文档结构 <template><view>......</view> </template> <script>export default {name: "组件名称",//属性自定义props: {属性名称: {type: String, //属性类型value: "值&quo…