精进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}
}

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

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

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

相关文章

Vben Admin实战-系统管理之用户管理-(第12节)

系列文章目录 第一节:Vben Admin介绍和初次运行 第二节:Vben Admin 登录逻辑梳理和对接后端准备 第三节:Vben Admin登录对接后端login接口 第四节:Vben Admin登录对接后端getUserInfo接口 第五节:Vben Admin权限-前端控制方式 第六节:Vben Admin权限-后端控制方式 第七节…

在 Jupyter Notebook 中切换环境

在 Jupyter Notebook 中切换环境,通常指的是在不同的 Python 环境(如 conda 环境或 virtualenv 环境)之间切换。以下是如何在 Jupyter Notebook 中切换环境的几种方法: 1. 使用 conda 如果你使用的是 conda 作为你的包和环境管理…

基于SSM实现的移动OA办公系统

系统介绍 基于SSM实现的移动OA办公系统设计了管理员、团队负责人、普通员工、部门负责人、人事部经理等几种用户角色 系统实现了如下功能: 管理员管理:用户管理、角色管理、权限管理、团队管理等功能 客户管理:客户管理、客户类型管理、状…

Uinx线程详解

目录 一.什么是线程? 并发(Concurrency) 并行(Parallelism) 1.1 线程的概念 1.2 线程的基本函数 1.3 线程的基本使用例子: 二.线程的属性 2.1线程属性使用例子 三.线程互斥 3.1互斥锁 3.2互斥锁常用函…

C语言笔试题之求解X的平方根

求解X的平方根 一、实例要求 1、给定一个非负整数 x ,计算并返回 x 的算术平方根 ;2、由于返回类型是整数,结果只保留整数部分 ,小数部分将被舍去;3、不允许使用任何内置指数函数、运算符; 二、实例分析…

python作业

1.找出10000以内能被5或6整除,但不能被两者同时整除的数(函数) 2.写一个方法,计算列表所有偶数下标元素的和(注意返回值) 3.根据完整的路径从路径中分离文件路径、文件名及扩展名。 4.根据标点符号对字符串进行分行 5.去掉字符串数组中每个字符串的空格 …

江协STM32:定时器定时中断和定时器定时闹钟

定时器中断 新建文件 按这个图来编写程序 第一步:RCC开启时钟,定时器到基准时钟和整个外设到工作时钟就会同时打开 第二步:选择时基单元的时钟源,对于定时中断选择内部时钟源 第三步:配置时基单元,ARR,P…

Golang Channel底层实现原理

1、本文讨论Channel的底层实现原理 首先,我们看Channel的结构体 简要介绍管道结构体中,几个关键字段 在Golang中,管道是分为有缓冲区的管道和无缓冲区的管道。 这里简单提一下,缓冲区大小为1的管道和无缓冲区的管道的区别&…

维基百科推广方法及注意事项解析-华媒舍

1. 维基百科 维基百科是一个自由而开放的在线百科全书,由志愿者共同创建和编辑。它是全球最大的百科全书,包含了广泛的主题和知识。作为一个公共平台,维基百科是广告和宣传的禁区,但它可以是一个有效的推广工具,帮助您…

ENSP华为防火墙WEB登录操作指南

ENSP华为防火墙WEB登录操作指南 华为防火墙登录WEB 1、华为防火墙配置:(需要在互联接口下放通https和ping) int g0/0/0 service-manage https permit service-manage ping permit 2、电脑需要配置虚拟网卡 3、虚拟网卡与云和防火墙配置的IP地…

【学习心得】Numpy学习指南或复习手册

本文是自己在学习Numpy过后总是遗忘的很快,反思后发现主要是两个原因: numpy的知识点很多,很杂乱。练习不足,学习过后一段时间不敲代码就会忘记。 针对这两个问题,我写了这篇文章。希望将numpy的知识点织成一张网&…

【Vmware】 debian 12 安装教程

1.前提说明 VMware 17.5.1 (自行安装),参考Debian 12maven 3.8.7git 2.39.2jdk 1.8 / 11 / 17 1.1.Debian 下载 访问(https://www.debian.org/download) 下载 Debian 这是 Debian 12,代号为 bookworm,网络安装,用于 64 位 PC&a…

机器学习算法与应用

机器学习是人工智能领域中的一个重要分支,它通过构建和训练模型来使计算机系统具备从数据中学习并做出预测或决策的能力。在这篇博客中,我们将深入探讨机器学习算法的基本原理、常见类型以及在实际应用中的案例。 机器学习算法概述 介绍机器学习的基本概…

PLC通过Modbus转Profine网关接温度传感器方案

Modbus转Profinet网关用于实现Modbus协议和Profinet协议之间的数据转换和传输。Modbus转Profinet网关接温度传感器的方案主要涉及将Modbus协议的温度传感器数据转换为Profinet协议,以便与工业自动化系统中的其他设备进行通信和数据交换。 以下是实现此方案的基本步骤…

[StartingPoint][Tier0]Mongod

Task 1 How many TCP ports are open on the machine? (机器上打开了多少个 TCP 端口?) Example: $ sudo nmap -sS -T4 10.129.222.112 -p 27017,22 2 Task 2 Which service is running on port 27017 of the remote host? (哪个服务正在远程主机的端口 270…

系统架构设计师-23年-论文题目

系统架构设计师-23年-论文题目 更多软考知识请访问 https://ruankao.blog.csdn.net/ 摘要字数在400字以内,可以分条叙述,但不允许有图、表、流程图。 正文字数为2000字至300字,文中可以分条叙述,但不要全部用分条叙述的方式。 …

设计模式总结-面向对象设计原则

面向对象设计原则 面向对象设计原则简介单一职责原则单一职责原则定义单一职责原则分析单一职责原则实例 开闭原则开闭原则定义开闭原则分析开闭原则实例 里氏代换原则里氏代换原则定义里氏代换原则分析 依赖倒转原则依赖倒转原则定义依赖倒转原则分析依赖倒转原则实例 接口隔离…

向量旋转操作之分段递归交换

开篇 这是对于之前一维向量左旋操作问题的最后一个解法,也是关于这个问题的最后一篇文章。在之前的文章中,我们分别用求逆法、取模置换法对该问题进行了解答,今天,使用的是分段递归的方式。 问题概要 将一个n元一维向量向左旋转i个…

深入了解JUnit 5:新一代Java单元测试框架

深入了解JUnit 5:新一代Java单元测试框架 近年来,Java领域的单元测试框架发展迅速,而JUnit 5作为JUnit系列的最新版本,为开发人员提供了更多的功能和灵活性。在本文中,我们将介绍JUnit 5,并探讨其与JUnit 4…

探索数据库-------MYSQL故障排除与优化

目录 mysql逻辑架构图 一、MySQL 数据库故障 1.1 MySQL 单实例故障排查 1.1.1故障现象 1 1.1.2故障现象 2 1.1.3故障现象 3 1.1.4故障现象 4 1.1.5故障现象 5 1.1.6故障现象 6 1.1.7故障现象 7 1.1.8故障现象 8 1.2MySQL 主从故障排查 1.2.1故障现象 1 1.2.2故障…