精进TypeScript--优选接口的联合,而不是联合的接口

2024-04-05 03:36

本文主要是介绍精进TypeScript--优选接口的联合,而不是联合的接口,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

如果你创建的一个属性是联合类型的接口,你应该问一下这个类型作为更精确的接口的联合是否更有意义

要记住的事情:

  • 具有多个属性对于联合类型的接口通常是一个错误的选择,因为它们掩盖了这些属性之间的关系
  • 接口的联合更精确,且可以被 TypeScript 所理解

假设你正在构建一个矢量绘图程序,并希望为具有特定几何类型的图层定义一个接口。

interface Layer {layout: FillLayout | LineLayout | PointLayout;paint: FillPaint | LinePaint | PointPaint;
}

字段layout控制形状的绘制方式和位置(是圆角还是直角),而 paint 字段控制样式(线条颜色、粗细、虚实等)

如果有一个图层,它的 layout 是 LineLayout,但它的 paint 属性是FillPaint,这样有意义吗?可能没有意义,允许这种可能性会使得使用库时更容易出错,并且使这个接口难以使用。

一个更好的建模方式是为每一种类型的图层提供单独的接口:

interface FillLayer {layout: FillLayout;paint: FillPaint;
}
interface LineLayer {layout: LineLayout;paint: LinePaint;
}
interface PointLayer {layout: PointLayout;paint: PointPaint;
}
type Layer = FillLayer | LineLayer | PointLayer;

以这种方式定义 Layer,你就可以排除混合 layout 和 point 属性的可能性。

这种模式最常见的例子是 “标签联合类型”,在这种情况下,其中一个属性是字符串字面量类型的联合:

interface FillLayer {type: 'fill';layout: FillLayout;paint: FillPaint;
}
interface LineLayer {type: 'line';layout: LineLayout;paint: LinePaint;
}
interface PointLayer {type: 'point';layout: PointLayout;paint: PointPaint;
}
type Layer = FillLayer | LineLayer | PointLayer;

type 属性就是“标签”,可以用来确定你在运行时处理的 Layer 是哪种类型。TypeScript 也能够根据标签来收缩 Layer 的类型:

function drawLayer(layer: Layer) {if (layer.type === 'fill') {const {paint} = layer; // FillPaintconst {layout} = layer; // FillLayout} else if (layer.type === 'line') {const {paint} = layer; // LinePaintconst {layout} = layer; // LineLayout} else {const {paint} = layer; // PointPaintconst {layout} = layer; // PointLayout}
}

通过正确地对这个类型中属性之间的关系进行建模,你可以帮助 TypeScript 检查你的代码的正确性。但是使用同样的代码初始化 Layer 会被类型断言弄得杂乱无章。

因为标签联合类型与 TypeScript 的类型检查器配合得很好,所以它们在 TypeScript 代码中是无处不在的。你要了解这个模式,并在合适的时候应用它。

如果你把可选字段视为它们的类型和 undefined 的联合类型,那么它们也适合这种模式。考虑一下这个类型:

interface Person {name: string;palceOfBirth?: string; // 这些要么存在、要么不存在dateOfBirth?: Date;
}

一个带有类型信息的注释是表明可能存在问题的强烈信号。在 palceOfBirth和 dateOfBirth 字段之间可能存在一个你还有告诉 TypeScript 的关系。

一个更好的建模方式是将这两个属性移动到一个对象中。这类似于将null移动到边界上:

interface Person {name: string;birth?: {place: string;date: Date;}
}

如果类型的结构不在你的控制范围内(例如,一个 API 接口),那么你仍然可以使用现在很熟悉的接口的联合来建模这些字段之间的关系:

interface Name {name: string;
}interface PersonWithBirth extends Name {placeOfBirth: string;dateOfBirth: Date;
}type Person = Name | PersonWithBirth;
// 这样的好处:
function eulogize(p: Person) {if ('placeOfBirth' in p) {const {dateOfBirth} = p; // OK,类型是 Date}
}

在这两种情况下,类型定义使属性之间的关系更加清晰。

这篇关于精进TypeScript--优选接口的联合,而不是联合的接口的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/877545

相关文章

从入门到精通MySQL联合查询

《从入门到精通MySQL联合查询》:本文主要介绍从入门到精通MySQL联合查询,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下... 目录摘要1. 多表联合查询时mysql内部原理2. 内连接3. 外连接4. 自连接5. 子查询6. 合并查询7. 插入查询结果摘要前面我们学习了数据库设计时要满

MySQL数据库的内嵌函数和联合查询实例代码

《MySQL数据库的内嵌函数和联合查询实例代码》联合查询是一种将多个查询结果组合在一起的方法,通常使用UNION、UNIONALL、INTERSECT和EXCEPT关键字,下面:本文主要介绍MyS... 目录一.数据库的内嵌函数1.1聚合函数COUNT([DISTINCT] expr)SUM([DISTIN

SpringBoot+Redis防止接口重复提交问题

《SpringBoot+Redis防止接口重复提交问题》:本文主要介绍SpringBoot+Redis防止接口重复提交问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不... 目录前言实现思路代码示例测试总结前言在项目的使用使用过程中,经常会出现某些操作在短时间内频繁提交。例

springboot下载接口限速功能实现

《springboot下载接口限速功能实现》通过Redis统计并发数动态调整每个用户带宽,核心逻辑为每秒读取并发送限定数据量,防止单用户占用过多资源,确保整体下载均衡且高效,本文给大家介绍spring... 目录 一、整体目标 二、涉及的主要类/方法✅ 三、核心流程图解(简化) 四、关键代码详解1️⃣ 设置

spring中的ImportSelector接口示例详解

《spring中的ImportSelector接口示例详解》Spring的ImportSelector接口用于动态选择配置类,实现条件化和模块化配置,关键方法selectImports根据注解信息返回... 目录一、核心作用二、关键方法三、扩展功能四、使用示例五、工作原理六、应用场景七、自定义实现Impor

MybatisPlus service接口功能介绍

《MybatisPlusservice接口功能介绍》:本文主要介绍MybatisPlusservice接口功能介绍,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友... 目录Service接口基本用法进阶用法总结:Lambda方法Service接口基本用法MyBATisP

Java中的Closeable接口及常见问题

《Java中的Closeable接口及常见问题》Closeable是Java中的一个标记接口,用于表示可以被关闭的对象,它定义了一个标准的方法来释放对象占用的系统资源,下面给大家介绍Java中的Clo... 目录1. Closeable接口概述2. 主要用途3. 实现类4. 使用方法5. 实现自定义Clos

java对接第三方接口的三种实现方式

《java对接第三方接口的三种实现方式》:本文主要介绍java对接第三方接口的三种实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录HttpURLConnection调用方法CloseableHttpClient调用RestTemplate调用总结在日常工作

Java 的 Condition 接口与等待通知机制详解

《Java的Condition接口与等待通知机制详解》在Java并发编程里,实现线程间的协作与同步是极为关键的任务,本文将深入探究Condition接口及其背后的等待通知机制,感兴趣的朋友一起看... 目录一、引言二、Condition 接口概述2.1 基本概念2.2 与 Object 类等待通知方法的区别

SpringBoot实现接口数据加解密的三种实战方案

《SpringBoot实现接口数据加解密的三种实战方案》在金融支付、用户隐私信息传输等场景中,接口数据若以明文传输,极易被中间人攻击窃取,SpringBoot提供了多种优雅的加解密实现方案,本文将从原... 目录一、为什么需要接口数据加解密?二、核心加解密算法选择1. 对称加密(AES)2. 非对称加密(R