19. TypeScript 类型运算符

TypeScript作为JavaScript的超集,不仅提供了静态类型检查,还引入了多种类型运算符,使得类型定义更加灵活和强大。这些运算符可以帮助我们构建更加精确和灵活的类型定义。本文将详细介绍这些类型运算符的用法和应用场景。

keyof 运算符

keyof 运算符用于获取对象类型的所有键的联合类型。

使用场景: 当你需要引用对象的键作为类型时,keyof非常有用。

interface User {id: number;name: string;
}type UserKeys = keyof User; // 'id' | 'name'// 使用keyof类型保护函数参数只能是特定的键
function getValue(user: User, key: UserKeys) {return user[key];
}

typeof 运算符

typeof 运算符用于获取一个变量或属性的类型。

使用场景: 当你需要引用一个变量的类型作为另一个变量的类型时,typeof可以派上用场。

let foo = "Hello, TypeScript!";
type FooType = typeof foo; // string// 使用typeof创建与变量foo相同类型的新变量
let bar: FooType = "Hi, Copilot!";

in 运算符

在TypeScript中,in运算符用于迭代联合类型,通常与映射类型一起使用。

使用场景: 当你需要根据联合类型的值动态生成类型时,in运算符非常有用。

type Properties = "propA" | "propB";
type Obj = {[P in Properties]: P extends "propA" ? string : number;
};
// Obj类型为 { propA: string; propB: number; }

extends 关键字

extends关键字用于条件类型,表示如果一个类型可以赋值给另一个类型,则结果是一个类型,否则是另一个类型。

使用场景: extends用于创建基于条件的类型,类似于JavaScript中的三元运算符。

type NonNullable<T> = T extends null | undefined ? never : T;// 使用extends移除null和undefined类型
type StringOrNull = string | null;
type JustString = NonNullable<StringOrNull>; // string

infer 关键字

infer关键字用于在条件类型中推断类型变量。

使用场景: infer常用于在函数类型中推断返回类型。

type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any;// 使用infer推断函数返回类型
type ExampleType = ReturnType<() => string>; // string

方括号

方括号用于访问类型中特定属性的类型。

使用场景: 当你需要引用对象中某个属性的类型时,方括号语法很有帮助。

type Person = { name: string; age: number; };
type NameType = Person["name"]; // string// 使用方括号访问类型属性
let personName: NameType = "Alice";

is 运算符

is运算符用于类型守卫,它告诉TypeScript编译器一个值是特定的类型。

使用场景: is运算符用于在运行时检查类型,并在编译时提供类型信息。

function isString(test: any): test is string {return typeof test === "string";
}// 使用is运算符进行类型守卫
if (isString(foo)) {console.log(foo.toUpperCase()); // 现在foo被识别为string类型
}

satisfies 运算符

satisfies运算符用于在表达式级别上强制类型兼容性。

使用场景: 当你想要确保一个对象满足某个类型,但不想进行类型断言时,satisfies可以使用。

let obj = { id: 1, name: "Copilot" } satisfies User;// 使用satisfies确保obj符合User接口

TypeScript的类型运算符极大地丰富了类型系统的表达能力,使得我们可以编写出更加安全、可维护的代码。通过本文的介绍和示例,希望大家能够更好地理解和运用这些类型运算符,提升自己的TypeScript编程技能。

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

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

相关文章

Python 数据可视化 boxplot

Python 数据可视化 boxplot import pandas as pd import matplotlib.pyplot as plt import numpy as np import seaborn as sns# 读取 TSV 文件 df pd.read_csv(result.tsv, sep\t)normal_df df[df["sample_name"].str.contains("normal")] tumor_df df…

重磅!!!监控分布式NVIDIA-GPU状态

简介&#xff1a;Uptime Kuma是一个易于使用的自托管监控工具&#xff0c;它的界面干净简洁&#xff0c;部署和使用都非常方便&#xff0c;用来监控GPU是否在占用&#xff0c;非常美观。 历史攻略&#xff1a; docker应用&#xff1a;搭建uptime-kuma监控站点 win下持续观察…

新能源汽车电池盒尺寸检测

SNK施努卡电池盒错漏装和尺寸检测 随着环境污染和能源短缺问题日益突出&#xff0c;新能源汽车作为一种环保、可持续的交通工具得到了广泛关注和推广。其中&#xff0c;电池是新能源汽车的核心部件之一&#xff0c;其性能和质量直接影响到整车的续航能力和安全性。而电池盒作为…

Unity Meta Quest MR 开发(七):使用 Stencil Test 模板测试制作可以在虚拟与现实之间穿梭的 MR 传送门

文章目录 &#x1f4d5;教程说明&#x1f4d5;Stencil Test 模板测试&#x1f4d5;Stencil Shader&#x1f4d5;使用 Unity URP 渲染管线设置模板测试⭐Render Pipeline Asset 与 Universal Renderer Data⭐删除场景中的天空盒⭐设置虚拟世界的层级 Layer⭐设置模板测试 &#…

《Vid2Seq》论文笔记

原文链接 [2302.14115] Vid2Seq: Large-Scale Pretraining of a Visual Language Model for Dense Video Captioning (arxiv.org) 原文笔记 What&#xff1a; 《Vid2Seq: Large-Scale Pretraining of a Visual Language Model for Dense Video Captioning》 作者提出一种多…

uniapp实现相册、拍照及视频录制功能

一、调用相册、拍照及视频录制功能要先获取相册权限&#xff0c;摄像头权限&#xff0c;要不然&#xff0c;调用不了下面的方法 1.1、到插件市场先下载js_sdk 1.2、引入js_sdk import permision from "/js_sdk/wa-permission/permission.js" 1.3 、安卓手机获取权…

Python内置函数input()详解

Python内置函数input()详解 在Python编程中&#xff0c;input()函数是一个基本的内置函数&#xff0c;它允许程序从用户那里获取输入。这个函数对于创建交互式程序来说非常重要&#xff0c;因为它让程序能够接收用户的文本输入。 函数功能 input()函数的主要功能是从标准输入…

深度学习检测算法YOLOv5的实战应用

在当前的检测项目中&#xff0c;需要一个高效且准确的算法来处理大量的图像数据。经过一番研究和比较&#xff0c;初步选择了YOLOv5作为算法工具。YOLOv5是一个基于深度学习的检测算法&#xff0c;以其快速和准确而闻名。它不仅能够快速处理图像数据&#xff0c;还能提供较高的…

两数、三数以及四数之和

两数之和 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出和为目标值 target 的那两个整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是&#xff0c;数组中同一个元素在答案里不能重复出现。 你可以按…

Java基础教程(7)-Java中的面向对象和类

面向对象编程 Java是一种面向对象的编程语言。面向对象编程,英文是Object-Oriented Programming,简称OOP 面向对象和面向过程的区别 面向过程编程是自顶而下的编程模式;把问题分解成一个一个步骤,每个步骤用函数实现,依次调用即可 面向对象编程是将事务高度抽象化的编程…

acwing算法提高之图论--拓扑排序

目录 1 介绍2 训练3 参考 1 介绍 本专题用来记录拓扑排序相关的题目。 求拓扑序列算法的关键步骤&#xff1a; 把入度为0的结点插入队列q。弹出队头t&#xff08;将t记录下来&#xff09;&#xff0c;遍历队头t的下一个结点&#xff0c;将其入度减1。操作之后&#xff0c;如…

【OceanBase诊断调优】——hpet(高精度时钟源)引起的CPU高问题排查

最近总结一些诊断OCeanBase的一些经验&#xff0c;出一个【OceanBase诊断调优】专题出来&#xff0c;也欢迎大家贡献自己的诊断OceanBase的方法。 1. 前言 昨天在问答区帮忙排查一个用户CPU高的问题&#xff0c;帖子链接&#xff1a;《刚刚新安装的OceanBase集群&#xff0c;…

Rime 如何通过 iCloud 实现词库多端同步,Windows、iOS、macOS

Rime 如何通过 iCloud 实现词库多端同步&#xff0c;Windows、iOS、macOS 一、设备环境 最理想的输入环境就是在多端都使用同一个词库&#xff0c;这样能保持多端的输入习惯是一致的。 以我为例&#xff0c;手头每天都要用到的操作平台和对应的输入法&#xff1a; 操作系统设…

39 vue.js

1.1 vue是什么&#xff1f; vue是当下主流的前端框架&#xff0c;用于构建用户界面的 渐进式 自底向上增量开发的MVVM框架。 渐进式&#xff1a;其实每个框架都有自己的特点&#xff0c;在开发的过程中&#xff0c;可以在原有的系统上&#xff0c;把其中一两个功能用VUE…

【热门前端【vue框架】】——vue框架和node.js的下载和安装保姆式教程

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;程序员-曼亿点 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 曼亿点 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a…

如何修复Django中的“ImproperlyConfigured”错误?

在Django中&#xff0c;通常会遇到“ImproperlyConfigured”错误&#xff0c;这表示配置不正确或缺少必要设置。下面是一些常见的修复方法&#xff1a; 检查settings.py文件&#xff1a;确保设置了正确的数据库配置、应用程序、模板路径、静态文件路径等。确保所有必要的设置都…

使用Nginx和内网穿透实现多个本地Web站点的公网访问

在需要将多个本地Web站点暴露到公网的情况下&#xff0c;可以通过Nginx配置文件的修改结合内网穿透技术来实现。下面是具体的步骤和示例&#xff1a; 1. 安装和配置Nginx 首先&#xff0c;确保已经在服务器上安装了Nginx&#xff0c;并且配置了基本的Nginx服务器块&#xff0…

【ARM 裸机】模仿 STM32 驱动开发

1、修改驱动 对于 STM32 来说&#xff0c;使用了一个结构体将一个外设的所有寄存器都放在一起&#xff0c;在上一节的基础上进行修改&#xff1b; 1.1、添加清除 bss 段代码&#xff0c; 1.2、添加寄存器结构体 新建一个文件&#xff0c;命名imx6u.h&#xff0c;注意地址的连…

前端如何优化工程

文章目录 使用CDN1. 请求定位&#xff1a;2.内容缓存&#xff1a;3.负载均衡&#xff1a;4.边缘计算&#xff1a; 优化Webpack1.合理配置Loader&#xff1a;2.优化代码分割&#xff1a;3.压缩和优化输出文件&#xff1a;4.利用Tree Shaking&#xff1a;5.优化解析速度&#xff…

NLP Step by Step -- How to use pipeline

正如我们在摸鱼有一手&#xff1a;NLP step by step -- 了解Transformer中看到的那样&#xff0c;Transformers模型通常非常大。对于数以百万计到数千万计数十亿的参数&#xff0c;训练和部署这些模型是一项复杂的任务。此外&#xff0c;由于几乎每天都在发布新模型&#xff0c…