《TypeScript 7天速成系列》第3天：TypeScript高级类型通关秘籍：泛型+联合+交叉类型实战
TypeScript 的类型系统是其最强大的特性之一，但也是许多开发者感到困惑的地方。今天我们就来破解 TypeScript 中最难的类型系统，掌握泛型、联合类型和交叉类型的使用技巧。
一、泛型函数与泛型接口
泛型是 TypeScript 中创建可重用组件的重要工具，它允许我们创建可以处理多种类型而不是单一类型的组件。
function identity<T>(arg: T): T {return arg;
}// 使用方式
let output1 = identity<string>("myString"); // 显式指定类型
let output2 = identity("myString"); // 类型推断泛型也可以应用于接口：
interface GenericIdentityFn<T> {(arg: T): T;
}function identity<T>(arg: T): T {return arg;
}let myIdentity: GenericIdentityFn<number> = identity;二、类型别名与联合类型
联合类型表示一个值可以是几种类型之一，而类型别名可以给类型起一个新名字。
type Result = | { success: true; data: string } | { success: false; error: string };function handleResult(result: Result) {if (result.success) {console.log(result.data); // 这里可以安全访问data} else {console.log(result.error); // 这里可以安全访问error}
}联合类型与类型别名的结合使用，可以创建出非常灵活且类型安全的代码结构。
三、类型守卫与类型断言
类型守卫和类型断言是 TypeScript 中处理类型不确定性的重要工具。
// typeof 类型守卫
if (typeof x === "string") {console.log(x.toUpperCase()); // 在这个块中，x被确定为string类型
}// 自定义类型守卫
function isString(test: any): test is string {return typeof test === "string";
}if (isString(x)) {console.log(x.toUpperCase());
}// 类型断言
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;四、交叉类型实战
交叉类型是将多个类型合并为一个类型，包含了所有类型的特性。
interface Person {name: string;age: number;
}interface Employee {company: string;position: string;
}type EmployeePerson = Person & Employee;const john: EmployeePerson = {name: "John",age: 30,company: "Tech Corp",position: "Developer"
};五、高级类型组合应用
让我们看一个综合应用的例子：
type NetworkLoadingState = {state: "loading";
};type NetworkFailedState = {state: "failed";code: number;
};type NetworkSuccessState = {state: "success";response: {title: string;duration: number;summary: string;};
};type NetworkState = | NetworkLoadingState| NetworkFailedState| NetworkSuccessState;function logger(state: NetworkState): string {switch (state.state) {case "loading":return "Downloading...";case "failed":return `Error ${state.code} downloading`;case "success":return `Downloaded ${state.response.title} - ${state.response.summary}`;}
}结语
掌握 TypeScript 的高级类型系统可以显著提高代码的类型安全性和可维护性。泛型提供了代码复用的灵活性，联合类型和交叉类型则允许我们创建更精确的类型定义，而类型守卫和类型断言帮助我们处理类型不确定性。将这些特性组合使用，可以构建出既灵活又类型安全的 TypeScript 应用程序。
相关文章：
《TypeScript 7天速成系列》第3天：TypeScript高级类型通关秘籍：泛型+联合+交叉类型实战
TypeScript 的类型系统是其最强大的特性之一，但也是许多开发者感到困惑的地方。今天我们就来破解 TypeScript 中最难的类型系统，掌握泛型、联合类型和交叉类型的使用技巧。 一、泛型函数与泛型接口 泛型是 TypeScript 中创建可重用组件的重要工具&…...
Python----数据分析（足球运动员数据分析）
一、数据展示 1.1、数据 1.2、列名 字段名备注Name姓名Nationality国籍National_Position国家队位置National_Kit国家队号码Club所在俱乐部Club_Position所在俱乐部位置Club_Kit俱乐部号码Club_Joining加入俱乐部时间Contract_Expiry合同到期时间Rating评分Height身高Weight体…...
音视频 三 看书的笔记 MediaPlayer的C/S架构
MediaPlayer在运行时分为Client和Server两部分 Client层：位于Java层，用户通过调用Java层的API（如setDataSource）来操作MediaPlayer。 Server层：位于C层，负责实际的媒体处理工作。Server层通过Binder机…...
Elasticsearch：使用 AI SDK 和 Elastic 构建 AI 代理
作者：来自 Elastic Carly Richmond 你是否经常听到 AI 代理（AI agents）这个词，但不太确定它们是什么，或者如何在 TypeScript（或 JavaScript）中构建一个？跟我一起深入了解 AI 代理的概…...
echarts添加坐标轴点击事件
echarts添加坐标轴点击事件 chart.on(click, (params) > {if(params.componentType yAxis && this.type ! 1){console.log(params);// 检查是否点击了系列数据console.log(你点击了 ${params.name} 的数据点，值为 ${params.value}); this.$bus.$emi…...
如何在linux中部署dns服务 主备dns （详细全过程）
环境centos 7.9 主DNS：192.168.60.131 备DNS：192.168.60.134 我以 chenxingyu0.com 指向 192.168.60.200为例 首先是主dns #!/bin/bash# 检查是否为 root 用户 if [ "$(id -u)" ! "0" ]; thenecho "请使用…...
GitLab 中文版17.10正式发布，27项重点功能解读【二】
GitLab 是一个全球知名的一体化 DevOps 平台，很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab 是 GitLab 在中国的发行版，专门为中国程序员服务。可以一键式部署极狐GitLab。 学习极狐GitLab 的相关资料： 极狐GitLab 官网极狐…...
matplotlib——南丁格尔玫瑰
南丁格尔玫瑰图（Nightingale Rose Chart），是一种特殊形式的柱状图，它以南丁格尔（Florence Nightingale）命名，她在1858年首次使用这种图表来展示战争期间士兵死亡原因的数据。 它将数据绘制在极坐…...
WPF 与 C# 融合开发：从基础到高级应用（一）
WPF 与 C# 融合开发：从基础到高级应用 一、C# 语言基础回顾 1.1 C# 语言概述 C# 是微软开发的一种现代、面向对象的编程语言，它融合了 C、C 和 Java 等语言的优点，具有简洁、安全、高效等特点。C# 广泛应用于 Windows 平台的应用开发&…...
ref和reactive区别
在 Vue 3 中，ref 和 reactive 是两种创建响应式数据的主要 API，但它们的适用场景和使用方式有所不同。以下是它们的核心区别和示例： 一、核心区别 特性refreactive适用数据类型所有类型（基本类型、对象、数组）仅对象或…...
精选10个好用的WordPress免费主题
10个好用的WordPress免费主题 1. Astra Astra 是全球最受欢迎的 WordPress 主题。它功能丰富，易于使用，SEO友好，是第一个安装量突破100万的非默认主题，并获得了5000多个五星好评。 它完美集成了Elementor、Beaver，古…...
DerpNStink: 1靶场渗透
DerpNStink: 1 来自 <DerpNStink: 1 ~ VulnHub> 1，将两台虚拟机网络连接都改为NAT模式 2，攻击机上做namp局域网扫描发现靶机 nmap -sn 192.168.23.0/24 那么攻击机IP为192.168.23.182，靶场IP192.168.23.213 3，对靶机进行端…...
apache安装脚本使用shell建立
注意防火墙，yum，网络连接等 以下是具体的apache安装脚本 #!/bin/bash # Set Apache version to install ## author: yuan # 检查外网连接 echo "检查外网连接..." ping www.baidu.com -c 3 > /dev/null 2>&1 if [ $? -eq 0 ]; …...
Azure SDK 使用指南
Azure SDK（软件开发工具包）是一组由微软提供的工具和库，旨在帮助开发者以多种编程语言（如 .NET、Java、Python、JavaScript 等）与 Azure 服务进行交互。 通过使用 Azure SDK，开发者可以更高效地构建、部…...
DeepSeek-V3-0324 版本升级概要
DeepSeek-V3-0324 魔搭社区汇聚各领域最先进的机器学习模型，提供模型探索体验、推理、训练、部署和应用的一站式服务。https://modelscope.cn/models/deepseek-ai/DeepSeek-V3-0324 发布背景与改进 根DeepSeek-V3-0324 展示了以下关键改进： 推理性能提…...
leetcode 150. 逆波兰表达式求值
150. 逆波兰表达式求值 - 力扣（LeetCode） class Solution:def evalRPN(self, tokens: List[str]) -> int:stack[]for item in tokens:if item not in ( ,-,* , / ):stack.append(item)else:preint(stack.pop())pre_beforeint(stack.pop())sign itemi…...
LangChain4j与DashScope深度集成实战：一站式开发指南
本篇文章会通篇详细的讲清楚LangChain4j与DashScope集成的各个方面，从Springboot的集成到Ai对话、会话记忆、RAG、FunctionCalling、互联网搜索、结构化的输出、多模态等都给出相应的说明，希望通过这篇文章对于LLM不了解的同仁一样可以扩展出自己的AI应用…...
逼用户升级Win11，微软开始给Win10限速
随着Windows10的支持时间越来越短，微软也加大了对Win10用户的驱赶力度。 最近，微软官宣了将要在今年6月份降低OneNote for Windows 10的同步速度。软件也将和Windows10在今年的10月14日一同停止支持和维护。 这将影响实时协作和多设备访问。 对OneNote…...
工作流引擎Flowable介绍及SpringBoot整合使用实例
Flowable简介 Flowable 是一个轻量级的业务流程管理（BPM）和工作流引擎，基于 Activiti 项目发展而来，专注于提供高性能、可扩展的工作流解决方案。它主要用于企业级应用中的流程自动化、任务管理和审批流等场景。 Flowable 的核心…...
推荐一个可以自定义github主页的网站
一、简介 Profile Readme Generator 是一个开源工具，可以帮助你快速创建个性化的 GitHub 个人简介（README）。它支持自定义内容和样式，让你的 GitHub 个人主页更加美观和专业。 二、使用步骤 （一）访问网站…...
【R语言可视化】相关系数热图
目录 热图无显著性 结果展示01： 热图显著性 结果展示02： ggplot2绘制三角热图 结果展示03： corrplot绘制三角热图 结果展示04: 热图无显著性 # 示例数据 data(mtcars) df <- mtcars# 计算相关矩阵 cor_matrix <- round(cor(df…...
【区块链 + 文化版权】文创链 | FISCO BCOS 应用案例
“文创链”是由四川省区块链行业协会、成都音像出版社有限公司共同发起， 由成都九天星空科技有限公司等联合打造的数字文创领域联盟链。平台采用FISCO BCOS 开源底层框架， 为数字文创产业构建一个高效、透明、可信的版权管理与交易平台。 平台专注于数字…...
# 使用自定义Shell脚本hello快速配置Linux用户账户
使用自定义Shell脚本快速配置Linux用户账户 在学校实验室管理Linux服务器，或者公司小团队管理服务器时，大家需要一个能隔离自己服务，但是自己又需要对服务器的完整权限的情形。创建和配置用户账户是一项常见但繁琐的任务。特别是当你需要频繁…...
PyTorch中的Tensor
PyTorch中的Tensor 是核心数据结构，类似于 NumPy 的多维数组，但具备 GPU 加速和自动求导等深度学习特性。 一、基本概念 核心数据结构 Tensor 是存储和操作数据的基础单元，支持标量（0D）、向量（1D&am…...
16-CSS3新增选择器
知识目标 掌握属性选择器的使用掌握关系选择器的使用掌握结构化伪类选择器的使用掌握伪元素选择器的使用 如何减少文档内class属性和id属性的定义，使文档变得更加简洁？ 可以通过属性选择器、关系选择器、结构化伪类选择器、伪元素选择器。 1. 属性选择…...
关于笔记本电脑突然没有wifi图标解决方案
笔记本电脑突然没有wifi图标解决方案，设置里也看不见wifi，电脑突然就连不网络了 解决方案： 我的电脑——>管理——>服务和应用程序——>服务——>找到WLAN AutoConfig——>点击启动就好了...
Pytorch学习笔记（七）Learn the Basics - Optimizing Model Parameters
这篇博客瞄准的是 pytorch 官方教程中 Learn the Basics 章节的 Optimizing Model Parameters 部分。 官网链接：https://pytorch.org/tutorials/beginner/basics/optimization_tutorial.html 完整网盘链接: https://pan.baidu.com/s/1L9PVZ-KRDGVER-AJnXOvlQ?pwd…...
数据可视化TensorboardX和tensorBoard安装及使用
tensorBoard 和TensorboardX 安装及使用指南 tensorBoard 和 TensorBoardX 是用于可视化机器学习实验和模型训练过程的工具。TensorBoard 是 TensorFlow 官方提供的可视化工具，而 TensorBoardX 是其社区驱动的替代品，支持 PyTorch 等其他框架。以下是它…...
工业4G路由器赋能智慧停车场高效管理
工业4G路由器作为智慧停车场管理系统通信核心，将停车场内的各个子系统连接起来，包括车牌识别系统、道闸控制系统、车位检测系统、收费系统以及监控系统等。通过4G网络，将这些系统采集到的数据传输到云端服务器或管理中心，实现信息…...
深度学习1—Python基础
深度学习1—python基础 你的第一个程序 print(hello world and hello deep learning!)基本数据结构 空值 (None)：在 Python 中，None 是一个特殊的对象，用于表示空值或缺失的值。它不同于数字 0，因为 0 是一个有意义的数字&#…...
数据结构十三、set map
一、set 1、size / empty size：返回set中实际元素的个数 empty：判断set是否为空 2、begin / end 这是两个迭代器，因此可以使用范围for来遍历整个红黑树。其中，遍历是按照中序遍历的顺序，因此是一个有序序列。 3、in…...
【大模型基础_毛玉仁】3.5 Prompt相关应用
目录 3.5 相关应用3.5.1 基于大语言模型的Agent3.5.2 数据合成3.5.3 Text-to-SQL3.5.4 GPTs 3.5 相关应用 Prompt工程应用广泛，能提升大语言模型处理基础及复杂任务的能力，在构建Agent、数据合成、Text-to-SQL转换和设计个性化GPTs等方面不可或缺。 . …...
自动驾驶VLA模型技术解析与模型设计
1.前言 2025年被称为“VLA上车元年”，以视觉语言动作模型（Vision-Language-Action Model, VLA）为核心的技术范式正在重塑智能驾驶行业。VLA不仅融合了视觉语言模型（VLM）的感知能力和端到端模型的决策能力，…...
【AI】Orin NX+ubuntu22.04上移植YoloV11，并使用DeepStream测试成功
【AI】郭老二博文之：AI学习目录汇总 1、烧写系统 新到的开发板，已经烧写好Ubuntu系统，版本为22.04。 如果没有升级到Ubuntu22.04，可以在电脑Ubuntu系统中使用SDKManager来烧写Ubuntu系统，网络情况好的话，也可以直接将CUDA、cuDNN、TensorRT、Deepstream等也安装上。 2…...
vscode 通过Remote-ssh远程连接服务器报错 could not establish connection to ubuntu
vscode 通过Remote-ssh插件远程连接服务器报错 could not establish connection to ubuntu，并且出现下面的错误打印： [21:00:57.307] Log Level: 2 [21:00:57.350] SSH Resolver called for "ssh-remoteubuntu", attempt 1 [21:00:57.359] r…...
ESP32S3 WIFI 实现TCP服务器和静态IP
一、 TCP服务器代码 代码由station_example_main的官方例程修改 /* WiFi station ExampleThis example code is in the Public Domain (or CC0 licensed, at your option.)Unless required by applicable law or agreed to in writing, thissoftware is distributed on an &q…...
第三课：Stable Diffusion图生图入门及应用
文章目录 Part01 图生图原理Part02 图生图基本流程Part03 随机种子作用解析Part04 图生图的拓展应用 Part01 图生图原理 当提示词不能足够表达用户需求的时候，加入图片能让AI更好的理解你的想法图片上的像素信息会在加噪和去噪的过程中，作为一种特征反映…...
蓝桥与力扣刷题（蓝桥 蓝桥骑士）
题目：小明是蓝桥王国的骑士，他喜欢不断突破自我。 这天蓝桥国王给他安排了 N 个对手，他们的战力值分别为 a1,a2,...,an，且按顺序阻挡在小明的前方。对于这些对手小明可以选择挑战，也可以选择避战。 身为高傲的骑士&a…...
Photoshop怎样保存为ico格式
1. 打开图像 开启 Photoshop 软件，选择 “文件” 菜单，点击 “打开” 选项，然后找到你想要保存为 ICO 格式的图像文件并打开。 2. 调整图像大小（可选） ICO 图标通常有特定尺寸要求，你可以根据需求调整图像…...
Ubuntu xinference部署本地模型bge-large-zh-v1.5、bge-reranker-v2-m3
bge-large-zh-v1.5 下载模型到指定路径： modelscope download --model BAAI/bge-large-zh-v1.5 --local_dir ./bge-large-zh-v1.5自定义 embedding 模型，custom-bge-large-zh-v1.5.json： {"model_name": "custom-bge-large…...
python笔记之判断月份有多少天
1、通过随机数作为目标月份 import random month random.randint(1,12)2、判断对应的年份是闰年还是平年 因为2月这个特殊月份，闰年有29天，而平年是28天，所以需要判断对应的年份属于闰年还是平年，代码如下 # 判断年份是闰年还…...
Kotlin泛型： 协变｜逆变｜不变
引言 无论java 通配符上限还是下限，都多少存在缺陷，要么存不安全，要么取不安全。而kotlin就解决这个问题。让out 纯输出， 让in纯输入。 java这块知识： java泛型的协变、逆变和不变-CSDN博客 协变 生产者out T 协变…...
高斯数据库的空分区的查看和清理
在 高斯数据库（GaussDB） 中，分区表是一种常见的表设计方式，用于优化大数据的查询性能。 一、空分区的影响： 存储空间占用 元数据开销：即使分区中没有数据，数据库仍然需要维护分区的元数据&…...
word使用自带的公式
文章目录 Word公式中word公式快捷键：word2016公式框输入多行word 公式加入空格：word公式如何输入矩阵:公式图片转为Latex语法word 能直接输入 latex 公式么word公式中有的是斜体有的不是 word文本中将文字转为上标的快捷键 Tips几个好用的网站࿱…...
Linux系统-ls命令
一、ls命令的定义 Linux ls命令（英文全拼：list directory contents）用于显示指定工作目录下之内容（列出目前工作目录所含的文件及子目录)。 二、ls命令的语法 ls [选项] [目录或文件名] ls [-alrtAFR] [name...] 三、参数[选项…...
数据结构：利用递推式计算next表
next 表是 KMP 算法的核心内容，下面介绍一种计算 next 表的方法：利用递推式计算 如图 6.3.1 所示，在某一趟匹配中，当对比到最后一个字符的时候，发现匹配失败（s[i] ≠ t[j]）。根据 BF 算法&…...
Git操作
1 git init 项目初始化（init）成仓库 2、git add 管理文件 3、git commit -m <message> 告诉Git，把文件提交到仓库 4、git status 查看当前管理文件的状态，命令 5、git log 查看提交（commit）的…...
什么是快重传
原理： 在TCP连接中，接受方会对收到的数据包发送确认（ACK）。如果接受方收到一个乱序的数据包（即期望的下一个数据包尚未到达），它会重复发送对上一个已成功接受的数据包的确认。 当发送方连续收…...
计算机网络——物理层设备
目录 编辑 中继器 集线器（Hub） 集线器，中继器的一些特性 集线器和中继器不能“无限串联” 集线器连接的网络，物理上是星型拓扑，逻辑上是总线型拓扑 集线器连接的各网段会“共享带宽” 中继器 如果我们想要网络…...
CSS 预处理器
在面试中回答关于 CSS 预处理器的问题时，你可以从以下几个方面进行回答，展示你的知识深度和实践经验： 1. 什么是 CSS 预处理器？ 你可以从定义和目的入手： “CSS 预处理器是一种扩展 CSS 功能的工具，它允许…...