5种在TypeScript中使用的类型保护
摘要:在本文中,回顾了TypeScript中几个最有用的类型保护,并通过几个例子来了解它们的实际应用。
本文分享自华为云社区《如何在TypeScript中使用类型保护》,作者:Ocean2022。
类型保护是一种TypeScript技术,用于获取变量类型信息,通常使用在条件块语句中。类型守卫是返回布尔值的常规函数,接受一个类型并告诉TypeScript是否可以缩小到更具体的类型。类型保护具有唯一的属性,可以确保测试的值是根据返回的布尔值设置的类型。
TypeScript使用了一些内置的JavaScript操作符,比如typeof、instanceof和in操作符,这些操作符用于确定一个对象是否包含属性。类型保护可以让你指导TypeScript编译器在特定的上下文中推断出变量的特定类型,确保参数的类型与你所说的一致。
类型保护通常用于缩小类型,它非常类似于特征检测,允许您检测值的正确方法、原型和属性。因此,您可以轻松地找出如何处理该值。
有五种主要的方式来使用类型保护:
instanceof
关键字typeof
关键字in
关键字- 等式收缩式保护器
- 带有谓词的自定义类型保护
在本文中,我们将探索上面列出的 5 种方法。让我们开始吧!
instanceof 类型保护
Instanceof
是一个内置类型保护器,可用于检查一个值是否是给定构造函数或类的实例。有了这个类型保护,我们可以测试一个对象或值是否派生自一个类,这对于确定实例类型的类型很有用。
instanceof
类型保护的基本语法如下:
objectVariable instanceof ClassName;
在下面的例子中,我们看到了一个instanceof
类型保护的例子:
interface Accessory {
brand: string;
}
class Necklace implements Accessory{
kind: string;
brand: string;
constructor(brand: string, kind: string) {
this.brand = brand;
this.kind = kind;
}
}
class bracelet implements Accessory{
brand: string;
year: number;
constructor(brand: string, year: number) {
this.brand = brand;
this.year = year;
}
}
const getRandomAccessory = () =>{
return Math.random() < 0.5 ?
new bracelet('cartier', 2021) :
new Necklace('choker', 'TASAKI');
}
let Accessory = getRandomAccessory();
if (Accessory instanceof bracelet) {
console.log(Accessory.year);
}
if (Accessory instanceof Necklace) {
console.log(Accessory.brand);
}
上面的getRandomAccessory
函数返回一个Necklace
或bracelet
对象,因为它们都实现了Accessory
接口。Necklace
和bracelet
的构造函数签名是不同的,用instanceof
比较两个构造函数签名可以有效地确定类型。
typeof 类型保护
typeof
类型保护是用来确定变量的类型。typeof
的类型保护据说是非常有限和浅薄的。它只能确定以下JavaScript能识别的类型:
- Boolean
- String
- Bigint
- Symbol
- Undefined
- Function
- Number
对于这个列表之外的任何内容,typeof类型保护只返回object。
typeof
类型保护可以用以下两种方式编写:
typeof v !== "typename"
#or
typeof v === "typename"
typename
可以是字符串、数字、符号或布尔值。
在下面的示例中,StudentId
有一个string|number
类型联合参数条目。我们看到,如果变量是string
,则输出Student
,如果是number
,则输出Id
。typeof
类型保护符帮助我们从x
参数中提取类型:
function StudentId(x: string | number) {
if (typeof x == 'string') {
console.log('Student');
}
if (typeof x === 'number') {
console.log('Id');
}
}
StudentId(`446`); //prints Student
StudentId(446); //prints Id
in 类型保护
in
类型保护检查对象是否具有特定的属性,并使用该属性区分不同的类型。它通常返回一个布尔值,表示该属性是否存在于该对象中。它用于其缩小范围,以及检查浏览器支持。
in
类型保护的基本语法如下:
propertyName in objectName
在下面的例子中,in类型守卫检查 house
属性是否存在。如果存在,则返回布尔值true,如果不存在,则返回false。
"house" in { name: "test", house: { parts: "door" } }; // => true
"house" in { name: "test", house: { parts: "windows" } }; // => true
"house" in { name: "test", house: { parts: "roof" } }; // => true
"house" in { name: "test" }; // => false
"house" in { name: "test", house: undefined }; // => true
下面是in
类型保护的另一个类似例子:
interface Pupil {
ID: string;
}
interface Adult {
SSN: number;
}
interface Person {
name: string;
age: number;
}
let person: Pupil | Adult | Person = {
name: 'Britney',
age: 6
};
const getIdentifier = (person: Pupil | Adult | Person) => {
if ('name' in person) {
return person.name;
}
else if ('ID' in person) {
return person.ID
}
return person.SSN;
}
等式收缩保护器
等式收缩保护器检查表达式的值。为了使两个变量相等,两个变量必须是同一类型的。如果一个变量的类型未知,但它等于另一个具有精确类型的变量,那么Typescript会使用该已知变量提供的信息来缩小第一个变量的类型:
function getValues(a: number | string, b: string) {
if(a === b) {
// this is where the narrowing takes place. narrowed to string
console.log(typeof a) // string
} else {
// if there is no narrowing, type remains unknown
console.log(typeof a) // number or string
}
}
如果变量a
等于变量b
,那么两者必须具有相同的类型。在这种情况下,Typescript把它缩小到字符串。如果没有收缩,a的类型仍然不明确,因为它可以是数字或字符串。
带有谓词的自定义类型保护
创建一个自定义类型守卫通常是使用类型守卫的强大选项。当您通过自己编写来创建自定义类型保护时,可以检查的内容没有限制。但是,如果自定义类型保护被错误地编写,它可能会带来很多错误。因此,精度是关键。
一个自定义类型保护的例子如下所示:
interface Necklace{
kind: string;
brand: string;
}
interface bracelet{
brand: string;
year: number;
}
type Accessory = Necklace | bracelet; const isNecklace = (b: Accessory): b is Necklace => {
return (b as Necklace).kind !== undefined
}
const Necklace: Accessory = {kind: "Choker", brand: "TASAKI"};
const bracelet: Accessory = {brand: "Cartier", year: 2021};
console.log(isNecklace(bracelet)) //Logs false
console.log(isNecklace(Necklace)) //Logs true
在上面的代码中,类型谓词b
是Necklace
,这会让TypeScript将类型缩减为Necklace
,而不是只返回一个布尔值。
结尾
TypeScript类型保护有助于确保类型的值,改善整体的代码流。在本文中,我们回顾了TypeScript中几个最有用的类型保护,并通过几个例子来了解它们的实际应用。
大多数时候,您的用例可以使用instanceof
类型保护、tyoeof
的类型保护或in
类型保护来解决,然而,您可以在绝对必要的时候使用自定义类型保护。
5种在TypeScript中使用的类型保护的更多相关文章
- TypeScript中的枚举类型
TypeScript拓展了Javascript原生的标准数据类型集,增加了枚举类型(enmu)和其他语言一 样 它提供我们一种数字类型的值,用来设置由于辨别的名字和方法 enum Students { ...
- 聊聊 TypeScript 中的类型保护
聊聊 TypeScript 中的类型保护 在 TypeScript 中使用联合类型时,往往会碰到这种尴尬的情况: interface Bird { // 独有方法 fly(); // 共有方法 lay ...
- TypeScript中的private、protected
首先我们要清楚 private . protected 现阶段只是javascript中的保留字(Reserved words),而非关键字(Keywords ).因此TypeScript中的纯类型声 ...
- Typescript中的可索引接口 类类型接口
/* 5.typeScript中的接口 可索引接口 类类型接口 */ /* 接口的作用:在面向对象的编程中,接口是一种规范的定义,它定义了行为和动作的规范,在程序设计里面,接口起到一种限制和规范的作用 ...
- 在 Typescript 2.0 中使用 @types 类型定义
在 Typescript 2.0 中使用 @type 类型定义 基于 Typescript 开发的时候,很麻烦的一个问题就是类型定义.导致在编译的时候,经常会看到一连串的找不到类型的提示.解决的方式经 ...
- JS 中对变量类型判断的几种方式
文章整理搬运,出处不详,如有侵犯,请联系~ 数据类型判断和数据类型转换代码工具 在 JS 中,有 5 种基本数据类型和 1 种复杂数据类型,基本数据类型有:Undefined, Null, Boo ...
- js中判断对象类型的几种方法
我们知道,JavaScript中检测对象类型的运算符有:typeof.instanceof,还有对象的constructor属性: 1) typeof 运算符 typeof 是一元运算符,返回结果是一 ...
- 命名空间“Microsoft.Office.Interop”中不存在类型或命名空间名称“Excel”。是否缺少程序集引用 的另一种解决方案
一直以来都是使用tfs进行源代码管理,系统部署也是由我本机生成后发布到服务器上,某一日,进行发布操作时,报了 [命名空间“Microsoft.Office.Interop”中不存在类型或命名空间名称“ ...
- TypeScript Handbook 1——基本类型(翻译)
原文出处: http://www.typescriptlang.org/Handbook 基于对web开发的需要和对安神的崇拜,打算学习一下typescript. 能力有限,基本属于在自己认识的基础上 ...
随机推荐
- Mybatis-plugins分页助手实现查询数据分页
其他具体代码接上文->mybatis自定义处理器 1.导入坐标 <dependency> <groupId>com.github.pagehelper</group ...
- nacos集群模式搭建踩坑记录
首先数据库使用的本地的mysql 1.看日志提示no set datasource,使用虚拟机ping本地后发现无法ping通,原因是本地没有关闭防火墙. 2.看日志提示不允许建立数据库连接,原因是r ...
- 使用 Nginx 实现 URL 的重定向
1. 概述 老话说的好:取乎上,得其中:取乎中,得其下.因此我们不妨把目标定的高一些,去努力,才能得到更好回报. 言归正传,今天我们来聊聊 使用 Nginx 实现 URL 的重定向. 2. 使用 Ng ...
- Linux中权限对于文件和目录的区别
Linux系统中的权限对于文件和目录来说,是有一定区别的 下面先列举下普通文件对应的权限 1)可读r:表示具有读取.浏览文件内容的权限,例如,可以对文件执行 cat.more.less.head.ta ...
- InnoDB两次写
partial page write问题: 默认情况下,innodb的一个页面时16k大小,其数据校验也是针对这16k来校验的,将数据写入磁盘是以页面为单位的.文件系统是以4k为单位写入的,机械磁盘是 ...
- 《手把手教你》系列基础篇(九十)-java+ selenium自动化测试-框架设计基础-Logback实现日志输出-中篇(详解教程)
1.简介 上一篇宏哥介绍是如何使用logback将日志输出到控制台中,但是如果需要发给相关人需要你拷贝出来,有时候由于控制台窗口的限制,有部分日志将会无法查看,因此我们还是需要将日志输出到文件中,因此 ...
- Linux用命令设置终端背景色和字体颜色
用命令改 1.setterm -inversecreen on 背景字体颜色互换 2.setterm -inversecreen on 恢复默认 3.setterm -[选项] [参数] |-back ...
- 真实本人亲测Elasticsearch未授权访问漏洞——利用及修复【踩坑指南到脱坑!】
如要转载请注明出处谢谢: https://www.cnblogs.com/vitalemontea/p/16105490.html 1.前言 某天"发现"了个漏洞,咳咳,原本以为这 ...
- java自带的四种线程池
java预定义的哪四种线程池? newSingleThreadExexcutor:单线程数的线程池(核心线程数=最大线程数=1) newFixedThreadPool:固定线程数的线程池(核心线程数= ...
- XCTF练习题---MISC---simple_transfer
XCTF练习题---MISC---simple_transfer flag:HITB{b3d0e380e9c39352c667307d010775ca} 解题步骤: 1.观察题目,下载附件 2.经过观 ...