实用主义的 TypeScript 技巧

TypeScript 作为一种静态类型检查的语言,不仅提高了代码的安全性,还大大增强了开发者的编程体验。本文将通过一些实用技巧和实例,帮助你更好地掌握和应用 TypeScript。

1. 使用 never 类型检查 switch case 语句

switch case 语句中,never 类型可以帮助我们确保所有可能的情况都被处理,避免漏掉某些情况。

type Fruit = 'apple' | 'banana' | 'orange';

function getFruitColor(fruit: Fruit): string {
  switch (fruit) {
    case 'apple':
      return 'red';
    case 'banana':
      return 'yellow';
    case 'orange':
      return 'orange';
    default:
      const exhaustiveCheck: never = fruit;
      return exhaustiveCheck;
  }
}

在上面的例子中,如果我们在 Fruit 类型中添加了新的水果类型,但没有在 switch 语句中处理这个新类型,TypeScript 将会在 default 分支的 exhaustiveCheck 处报错,从而提醒我们处理新情况。

2. 使用互斥类型替代联合类型

在处理联合类型时,使用互斥类型可以让类型系统更清晰,避免意外情况。

type Square = { kind: 'square'; size: number };
type Rectangle = { kind: 'rectangle'; width: number; height: number };
type Shape = Square | Rectangle;

function getShapeArea(shape: Shape): number {
  if (shape.kind === 'square') {
    return shape.size * shape.size;
  } else if (shape.kind === 'rectangle') {
    return shape.width * shape.height;
  } else {
    const exhaustiveCheck: never = shape;
    return exhaustiveCheck;
  }
}

通过使用互斥类型,我们可以确保每个类型都有唯一的 kind 属性,这样在类型检查时更容易处理。

3. 保留联合类型的提示

有时候,我们希望在编写代码时保留联合类型的提示,这样在开发过程中可以更方便地知道哪些类型是可能的。

type Status = 'success' | 'error' | 'loading';

function handleStatus(status: Status{
  switch (status) {
    case 'success':
      console.log('Operation was successful');
      break;
    case 'error':
      console.log('There was an error');
      break;
    case 'loading':
      console.log('Loading...');
      break;
    default:
      const exhaustiveCheck: never = status;
      return exhaustiveCheck;
  }
}

在这里,通过 switch case 语句,我们可以保留对 Status 类型所有可能值的提示,方便在开发过程中进行处理。

4. satisfies 关键字

TypeScript 4.9 引入了 satisfies 关键字,可以帮助我们更好地进行类型检查,确保对象满足某种类型但不限制其具体的形状。

type Point = { x: number; y: number };

const point = {
  x: 5,
  y: 10,
  z: 20
} satisfies Point;

在上面的例子中,point 对象不仅满足 Point 类型的要求,还可以有其他属性。使用 satisfies 关键字,我们可以确保对象符合预期类型,同时保留其他可能的属性。

5. 模板字符串类型的排列组合

模板字符串类型允许我们在类型层面上进行字符串拼接和组合,极大地增强了类型系统的灵活性。

type Color = 'red' | 'green' | 'blue';
type Size = 'small' | 'medium' | 'large';

type ColorSize = `${Color}-${Size}`;

const colorSize: ColorSize = 'red-small'// 合法

在这里,ColorSize 类型表示所有可能的颜色和大小的组合,极大地增强了类型系统的表达能力。

6. 提取类型

有时候,我们需要从某个复杂类型中提取出某个部分的类型,TypeScript 提供了工具类型来帮助我们实现这一点。

type Person = {
  name: string;
  age: number;
  address: {
    street: string;
    city: string;
  };
};

type Address = Person['address'];

const address: Address = {
  street: '123 Main St',
  city: 'New York'
};

通过使用 Person['address'],我们可以轻松提取出 Person 类型中的 address 部分类型,方便在代码中复用。

结语

本文介绍了几个实用的 TypeScript 技巧,包括使用 never 类型检查 switch case 语句、使用互斥类型替代联合类型、保留联合类型的提示、satisfies 关键字、模板字符串类型的排列组合以及提取类型。这些技巧不仅能提高代码的类型安全性,还能增强开发者的编程体验。希望这些技巧能对你的 TypeScript 开发有所帮助。

本文由 mdnice 多平台发布

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

新零售社交电商系统的卷轴模式开发:重塑消费体验与商业生态

随着互联网的飞速发展,新零售与社交电商的深度融合已成为电商行业的新趋势。在这一背景下,“卷轴模式”作为一种创新性的商业模式,正逐步被引入到新零售社交电商系统的开发中,旨在通过更加灵活、互动性强的购物体验,吸…

[python-pdal]python-pdal安装后测试代码

测试代码: import pdal import tiledbdata "1.2-with-color.las"pipeline pdal.Reader.las(filenamedata).pipeline() print(pipeline.execute()) # 1065 points# Get the data from the first array # [array([(637012.24, 849028.31, 431.66, 143, …

双端搭建个人博客

1. 准备工作 确保你的两个虚拟机都安装了以下软件: 虚拟机1(Web服务器): Apache2, PHP虚拟机2(数据库服务器): MariaDB2. 安装步骤 虚拟机1(Web服务器) 安装Apache2和PHP 更新系统包列表: sudo apt update安装Apache2: sudo apt install apache2 -y安装PHP及其Apac…

视频汇聚/视频存储/安防视频监控EasyCVR平台RTMP推流显示离线是什么原因?

视频汇聚/视频存储/安防视频监控EasyCVR视频汇聚平台兼容性强、支持灵活拓展,平台可提供视频远程监控、录像、存储与回放、视频转码、视频快照、告警、云台控制、语音对讲、平台级联等视频能力。 EasyCVR安防监控视频综合管理平台采用先进的网络传输技术&#xff0…

[Redis][Zset]详细讲解

目录 0.前言1.常见命令1.ZADD2.ZCARD3.ZCOUNT4.ZRANGE5.ZREVRANGE6.ZRANGEBYSCORE7.ZPOPMAX8.BZPOPMAX9.ZPOPMIN10.BZPOPMIN11.ZRANK12.ZREVRANK13.ZSCORE14.ZREM15.ZREMRANGEBYRANK16.ZREMRANGEBYSCORE17.ZINCRBY 2.集合间操作1.有序集合的交集操作2.ZINTERSTORE3.有序集合的并…

网络战时代的端点安全演变

​ 在恶意网络行为者与对手在世界各地展开网络战争的日常战争中,端点安全(中世纪诗人可能会称其为“守卫大门的警惕哨兵”)当然是我们的互联数字世界的大门。 端点安全类似于我们今天称之为现代企业的数字有机体的免疫系统,可以将…

线性回归与最小二乘法

线性回归是统计学中的概念,以其建模速度快,不需要很复杂的计算并且模型解释性强等优点在机器学习中广泛应用。线性回归模型主要用于数据预测,其模型参数常用最小二乘法获得。 一、模型: 最开始人们得到了很多组带有测量误差的数…

JS中的事件和DOM操作

一、事件[重要] 1、 事件介绍 事件: 就是发生在浏览器(页面)上一件事,键盘事件,鼠标事件,表单事件,加载事件等等 2、 事件绑定方式 事件要想发生,就得将事件和标签先绑定(确定哪个标签发生什么事情,又有什么响应) 一个完整的事件有三部分 事件源(标签),哪里发出的事. 什么事(…

SAM核心代码注释总结

最近看sam2,顺便注释了下代码,方便回顾和分享。 PS: tensor的维度都基于默认参数配置。 SAM _build_sam sam模块包含三个部分,ImageEncoderViT、PromptEncoder和MaskDecoder: def _build_sam(encoder_embed_dim,encoder_depth…

HDMI20协议解析_Audio_Clock_Regeneration

HDMI20协议解析_Audio_Clock_Regeneration 1.版本说明 日期作者版本说明20240918风释雪初始版本 2.概述 当通过HDMI传输音频信号时,Audio Clock Regeneration(ACR)是必须要传输的数据包之一; HDMI传输过程中,音频采样…

大模型推理革新:探索思维图(DoT)框架的逻辑与应用

姚期智院士领衔推出了大模型新推理框架,CoT的“王冠”已难以承载。 提出了思维图(Diagram of Thought,DoT),使大模型的思考方式更接近人类。 团队为这一推理过程提供了数学基础,通过拓扑斯理论&#xff0…

分享6个icon在线生成网站,支持AI生成

在这个数字化的时代,创意和视觉标识在产品推广中可谓是愈发重要。提到图标,我们就不能不聊聊“Icon”这个小家伙。它不仅仅是个简单的视觉元素,简直是品牌信息的超级传递者。因此,图标生成器成了设计界的“万金油”,帮…

教授【优青】团队亲自指导-图解表观遗传学 | 组蛋白修饰!专业实验设计、数据分析、SCI论文辅助等全方位服务。精准高效,为农植物科研保驾护航!

教授【优青】团队亲自指导!提供专业实验设计、数据分析、SCI论文辅助等全方位服务。精准高效,为医学科研保驾护航! 专业实验外包服务,一站式解决您的所有需求; 还在犹豫?别让您的科研和论文停滞不前&#…

什么是前端开发 ?

每当我们访问网页时,为什么会有这么多样的图片、视频、动画、各种各样的元素呢?下面将为你揭晓! 一、 前端世界的基石 一切始于用户在浏览器地址栏输入一串字符,敲下回车。看似简单的动作,却开启了一段奇妙的旅程。 …

OmniPeek 空口抓包软件使用指导

OmniPeek 空口抓包软件使用指导 1 前置条件 PC机一台和TP_LINK(TL-WDN7200H)网卡一个 Omnipeek安装成功,TL-WDN7200H网卡驱动安装并设置成功 网卡插入到PC机的USB口 2 启动Omnipeek 3 打开Omnipeek 启动后打开Capture—Start Capture 注意网卡选择802.11的 4…

9月25日微语报,星期三,农历八月廿三

9月25日微语报,星期三,农历八月廿三,工作愉快,生活喜乐! 一份微语报,众览天下事! 1、多地响应取消普通与非普通住宅标准:降低居民购房成本,支持改善性需求。 2、中国将…

今日早报 每日精选15条新闻简报 每天一分钟 知晓天下事 9月25日,星期三

每天一分钟,知晓天下事! 2024年9月25日 星期三 农历八月廿三 1、 央行宣布:存量房贷利率下调约0.5个百分点,二套房最低首付比例15%。 2、 央行近期将下调存款准备金率0.5个百分点,向金融市场提供长期流动性约1万亿元…

Redis 分布式缓存服务(集群)

作者:程序那点事儿 日期:2023/11/17 13:05 准备6台虚拟机,ip分别是 192.168.10.101 192.168.10.102 192.168.10.103 192.168.10.104 192.168.10.105 192.168.10.106 创建6个节点 mkdir -p /usr/local/cluster/redis-node1 #对应192.168.10.…

阿里云函数计算 x NVIDIA 加速企业 AI 应用落地

作者:付宇轩 前言 阿里云函数计算(Function Compute, FC)是一种无服务器(Serverless)计算服务,允许用户在无需管理底层基础设施的情况下,直接运行代码。与传统的计算架构相比,函数…

ffmpeg解封装解码

文章目录 封装和解封装封装解封装 相关接口解封装的流程图关于AVPacket的解释如何区分不同的码流,视频流,音频流?第一种方式av_find_best_stream第二种方式 通过遍历流 代码 封装和解封装 封装 是把音频流 ,视频流,字…