当前位置：首页 > news >正文

前端开发入门指南Day 17：TypeScript高级类型（泛型，类型守卫，Partial＜T＞和 Required＜T＞等）

news 来源：原创 2025/5/13 5:29:58

泛型：代码的"变色龙" 🦎

为什么需要泛型？

想象一个快递员，每天要处理不同类型的包裹。如果为每种类型的包裹都写一套处理程序，那会很麻烦。泛型就像是一个"通用的包裹处理系统"，它能智能地适应不同类型的包裹。

让我们通过一个简单的例子来理解：

// 没有泛型时，我们需要为每种类型写一个函数
function processNumberBox(box: { value: number }) {console.log(box.value + 10);
}function processStringBox(box: { value: string }) {console.log(box.value.toUpperCase());
}// 使用泛型后，一个函数就能处理所有类型
function processBox<T>(box: { value: T }) {console.log(box.value);return box.value;
}// 现在可以处理任何类型
processBox({ value: 42 });         // 处理数字
processBox({ value: "hello" });    // 处理字符串
processBox({ value: true });       // 处理布尔值

泛型就像"变量的变量" 📦

// 创建一个通用的"盒子"类
class Box<T> {private content: T;constructor(value: T) {this.content = value;}getValue(): T {return this.content;}
}// 创建不同类型的盒子
const numberBox = new Box(123);        // 数字盒子
const stringBox = new Box("hello");    // 字符串盒子
const dateBox = new Box(new Date());   // 日期盒子// TypeScript 会自动推断并确保类型安全
numberBox.getValue().toFixed(2);    // ✅ 可以，因为是数字
stringBox.getValue().toUpperCase(); // ✅ 可以，因为是字符串

实际应用场景 🎯

创建通用数据结构

// 创建一个通用的"盒子"类
class Box<T> {private content: T;constructor(value: T) {this.content = value;}getValue(): T {return this.content;}
}// 创建不同类型的盒子
const numberBox = new Box(123);        // 数字盒子
const stringBox = new Box("hello");    // 字符串盒子
const dateBox = new Box(new Date());   // 日期盒子// TypeScript 会自动推断并确保类型安全
numberBox.getValue().toFixed(2);    // ✅ 可以，因为是数字
stringBox.getValue().toUpperCase(); // ✅ 可以，因为是字符串
numberBox.getValue().toUpperCase(); // ❌ 错误！数字没有toUpperCase方法

API响应处理

// 通用的API响应处理器
interface ApiResponse<T> {success: boolean;data: T;message: string;
}// 用户接口
interface User {id: number;name: string;
}// 使用泛型处理不同类型的响应
async function fetchUser(): Promise<ApiResponse<User>> {// ... API调用return {success: true,data: { id: 1, name: "张三" },message: "获取成功"};
}

类型守卫：代码的"安检员" 🚨

什么是类型守卫？

想象你是一个夜店保安，需要检查进入的人是否满足条件（年龄、着装等）。类型守卫就是代码世界的"保安"，它帮助我们在运行时确保数据类型的正确性。

// 定义可能的类型
type Animal = Bird | Dog;interface Bird {type: "bird";flySpeed: number;
}interface Dog {type: "dog";runSpeed: number;
}// 类型守卫函数
function isBird(animal: Animal): animal is Bird {return animal.type === "bird";
}// 使用类型守卫
function moveAnimal(animal: Animal) {if (isBird(animal)) {// TypeScript现在知道这是一只鸟console.log(`飞行速度：${animal.flySpeed}`);} else {// TypeScript知道这是一只狗console.log(`奔跑速度：${animal.runSpeed}`);}
}

常见的类型守卫方式

typeof 守卫

function process(value: string | number) {if (typeof value === "string") {// 这里TypeScript知道value是字符串return value.toUpperCase();} else {// 这里TypeScript知道value是数字return value.toFixed(2);}
}

instanceof 守卫

class Car {drive() { console.log("开车"); }
}class Bicycle {ride() { console.log("骑行"); }
}function useVehicle(vehicle: Car | Bicycle) {if (vehicle instanceof Car) {vehicle.drive();} else {vehicle.ride();}
}

实用工具类型：代码的"瑞士军刀" 🛠️

TypeScript的工具类型也是这样的一个好用的工具集合：

1. Partial<T> - 所有属性变为可选

interface User {name: string;age: number;email: string;
}// 所有字段都变成可选的
type PartialUser = Partial<User>;
// 等同于：
// {
//    name?: string;
//    age?: number;
//    email?: string;
// }// 实际应用：更新用户信息
function updateUser(userId: number, updates: Partial<User>) {// 可以只更新部分字段
}

2. Required<T> - 所有属性变为必需

interface Config {name?: string;timeout?: number;
}// 所有字段都变成必需的
type RequiredConfig = Required<Config>;
// 等同于：
// {
//    name: string;
//    timeout: number;
// }

实际应用：创建表单验证规则

type ValidationRules<T> = {[K in keyof T]: {required?: boolean;minLength?: number;maxLength?: number;pattern?: RegExp;}
}// 使用
const employeeValidation: ValidationRules<Employee> = {name: { required: true, minLength: 2 },salary: { required: true, pattern: /^\d+$/ },department: { required: true }
};

映射类型：批量"加工"属性 🏭

想象你有一个印章，可以给所有属性都盖上"只读"的标记：

// 原始接口
interface Employee {name: string;salary: number;department: string;
}// 让所有属性只读
type ReadonlyEmployee = {readonly [K in keyof Employee]: Employee[K];
}// 让所有属性可选
type OptionalEmployee = {[K in keyof Employee]?: Employee[K];
}

这些高级类型特性看起来可能有点复杂，但它们就像乐高积木一样 - 一旦你理解了基本概念，就可以把它们组合起来构建更复杂的结构。这些特性的目的是帮助我们写出更安全、更可维护的代码。

前端开发入门指南Day 17：TypeScript高级类型（泛型，类型守卫，Partial＜T＞和 Required＜T＞等）

泛型：代码的"变色龙" 🦎 为什么需要泛型？ 想象一个快递员，每天要处理不同类型的包裹。如果为每种类型的包裹都写一套处理程序，那会很麻烦。泛型就像是一个"通用的包裹处理系统"，它能…...

编程日记 2025/5/13 5:29:58

数据链路层（四）---PPP协议的工作状态

1 PPP链路的初始化通过前面几章的学习，我们学了了PPP协议帧的格式以及组成，那么对于使用PPP协议的链路是怎么初始化的呢？ 当用户拨号上网接入到ISP后，就建立起了一条个人用户到ISP的物理链路。这时，用户向ISP发送一…...

编程日记 2025/5/13 5:06:31

EasyNVR中HTTP-FLV协议无法播放怎么解决？

在科技日新月异的今天，摄像头作为公共安全领域的重要一环，其技术的不断提升正显著地改变着社会的安全格局。从最初的简单监控到如今的高清智能分析，我们可以对特定区域进行实时监控和记录，为社会的安全稳定提供了强有力的保障。问…...

编程日记 2025/5/12 7:28:35

微服务监控prometheus+Grafana

目录 Prometheus 概述核心组件特点使用场景 Grafana 概述功能特点使用场景 PrometheusGrafana组合部署和配置一、准备工作二、部署Prometheus 三、部署Grafana 四、创建监控仪表盘五、验证和调优总结微服务监控是确保微服务架构稳定运行的关键环节…...

编程日记 2025/5/10 1:49:42

C++编程：模拟实现CyberRT的DataVisitor和DataDispatcher

文章目录 0. 引言1. 设计概要1.1 主要组件1.2 类关系图1.3 工作流程 2. 代码实现2.1. 定义数据结构2.2. 实现 DataVisitor2.3. 实现 DataDispatcher2.4. 实现 Receiver2.5. 实现具体的 DataVisitor2.6. 示例主程序2.7. 编译和运行 0. 引言使用 C 实现一个类似CyberRT 架构的 …...

编程日记 2025/5/13 4:38:39

TongRDS分布式内存数据缓存中间件

命令优势支持高达10亿级的数据缓冲，内存优化管理，避免GC性能劣化。高并发系统设计，可充分利用多CPU资源实现并行处理。数据采用key-value多索引方式存储，字段类型和长度可配置。支持多台服务并行运行，服务之间可互…...

编程日记 2025/5/12 11:26:16

银河麒麟v4/v10 Ubuntu上添加服务过程-以编译postgressql数据库为例

1 首先联网安装依赖 apt-get install build-essential zlib1g-dev libssl-dev libreadline-dev libxml2-dev python-setuptools 2 下载安装包下载地址：https://ftp.postgresql.org/pub/source/v16.3/postgresql-16.3.tar.gz 3 编译安装 mkdir -p /data/pgsql…...

编程日记 2025/5/13 5:23:42

电子商务人工智能指南 1/6 - 搜索、广告和发现

介绍 81% 的零售业高管表示， AI 至少在其组织中发挥了中等至完全的作用。然而，78% 的受访零售业高管表示，很难跟上不断发展的 AI 格局。近年来，电子商务团队加快了适应新客户偏好和创造卓越数字购物体验的需求。采用 AI 不再是一…...

编程日记 2025/5/12 3:11:49

JAVA面试基础(总结了很多)

最近帮整理了一份JAVA的面试基础，不过很基础后面还回继续更新。 java的专业技能 2.1 java的基础部分 2.1.1 简单讲一下java的跨平台原理由于各操作系统（windows,liunx等）支持的指令集，不是完全一致的。就会让我们的程序在不同的操…...

编程日记 2025/5/8 17:09:11

PPT怎样做的更加精美

目录 PPT怎样做的更加精美 3D的GIF图片 3维空间图编辑结果有明显的对比阅读高质量文献，采用他们的图 PPT怎样做的更加精美 3D的GIF图片 3维空间图结果有明显的对比...

编程日记 2025/5/4 13:41:14

postgresql与pgvector安装与使用

环境变量修改打开 .bashrc 文件进行编辑： vim ~/.bashrc在文件的末尾添加上面的环境变量配置 # 添加 PostgreSQL 可执行文件路径到系统 PATH export PATH/home/....../pg/postgresql-12.4/bin:$PATH# 设置 PostgreSQL 数据目录 export PGDATA/home/....../pg/pos…...

编程日记 2025/5/13 4:57:10

Tomcat，javaweb， servlet , springBoot

在server.xml里配置服务器 <scope>provided</scope>打包的时候，这个jar包不会被打进去，因为tomcat已将封装了这个jar包，没必要要这个...

编程日记 2025/5/13 5:08:47

vue 通过 image-conversion 实现图片压缩

简介 vue项目中，上传图片时如果图片很大，通过 image-conversion 压缩到指定大小 1. 安装依赖 npm i image-conversion --save2. 引用 import * as imageConversion from image-conversion3. 使用 const newFile new Promise((resolve) > {// 压…...

编程日记 2025/5/12 17:18:07

自由学习记录（27）

event委托在类内可完全修改 （前提为该event在类中的声明为public，外部可访问，然后外部访问的时候不能直接改） 下面这段代码是在类的内部访问事件 void ClearAllListeners() {MyEvent null; }event 修饰的委托字段在类内部没…...

编程日记 2025/5/5 15:17:23

MATLAB数学建模之画图汇总

MATLAB是一种强大的数学软件，广泛应用于工程计算、控制设计、信号处理等领域。在数学建模中，MATLAB的绘图功能可以帮助我们直观地展示数据和模型结果。 1. 二维数据曲线图 1.1 绘制二维曲线的基本函数 plot函数用于绘制二维平面上的线性坐标曲线图&am…...

编程日记 2025/5/11 16:13:18

UML箭线图的理解和实践

在软件开发的世界里，UML（统一建模语言）作为一种标准化的建模语言，扮演着举足轻重的角色。UML类图更是软件开发设计和架构过程中的核心工具，它不仅能帮助开发者明确系统中的类及其关系，还能为后续的代码实现…...

编程日记 2025/5/11 2:58:32

C#中的多态

多态（Polymorphism）是面向对象编程中的核心概念之一，它允许对象在不同的上下文中表现出不同的行为。简单来说，多态使得相同的方法调用可以表现出不同的行为，这使得代码更加灵活、可扩展和可维护。在 C# 中&#xff0…...

编程日记 2025/5/7 7:31:08

【SQL】实战--组合两个表

题目描述表: Person ---------------------- | 列名 | 类型 | ---------------------- | PersonId | int | | FirstName | varchar | | LastName | varchar | ---------------------- personId 是该表的主键（具有唯一值的列）…...

编程日记 2025/4/25 6:22:57

Unity 的介绍

Unity是一款功能强大的跨平台游戏开发引擎，以下是关于它的详细介绍： 一、概述 Unity由Unity Technologies公司开发，它提供了一个直观的开发环境，用于创建2D、3D游戏、模拟、虚拟现实（VR）、增强现实&#…...

编程日记 2025/5/10 23:54:00

深度学习的进展

深度学习新纪元引言你是否曾想过，为什么智能助手能理解你的指令，数字图像能够被准确分类，甚至疾病能被更早地诊断？这些现代奇迹背后都有一个共同的驱动力——深度学习。它不仅是当今人工智能领域的闪亮明星，更是一…...

编程日记 2025/5/9 17:37:07

vue中实现数字滚动效果

安装vue-count-to npm install vue-count-to引入 vue-count-to <template><div><count-to :start-val"startVal" :end-val"endVal" :duration"duration" :decimals"decimals" :separator"separator" :pref…...

编程日记 2025/5/12 22:36:02

Python的textwrap库：文本包装的艺术

目录一、初识textwrap 二、textwrap的核心函数 1. fill 2. wrap 3. dedent 4. indent 5. shorten 三、高级用法与技巧 1. 处理特殊字符 2. 自定义断行逻辑 3. 自定义缩进和前缀四、实战案例五、总结在Python编程中，处理文本是一项基础且常见的任务…...

编程日记 2025/5/6 15:33:48

linux 系列服务器高并发下ulimit优化文档

系统输入 ulimit -a 结果如下解除或提高 Linux 系统的最大进程数在高并发场景中，合理设置 Linux 系统的最大进程数对于提升服务器性能至关重要。以下是具体步骤： 临时修改 ulimit 设置可以通过 ulimit 命令临时调整当前会话的最大进程数。查看当前…...

编程日记 2025/5/7 17:14:03

Spring03——基于xml的Spring应用

Spring开发中主要对Bean的配置 Bean的常用配置一览如下： Xml配置方式功能描述<bean id"" class"">Bean的id和全限定名配置<bean name"">通过name设置Bean的别名，通过别名也能直接获取到Bean实例<bean sc…...

编程日记 2025/4/29 17:11:35

IDEA 鼠标悬浮显示方法注释 javaDoc 及配置遇到的问题

方法详情： 鼠标悬浮时的效果： 设置方法： File -> Settings -> Editor -> Code Editing -> Quick Documentation,勾选红框中的选项可能会遇到的问题： 如果不能选中，如下图把下图的位置的选中项取消掉选…...

编程日记 2025/5/8 15:26:06

openstack创建浮动IP全过程

1、创建外部网络，即是provider网络，有关provider网络的详细解释请参见我之前的文章openstack中的self-service和provider网络_openstack provider网络不能创建vlan吗-CSDN博客 network create --share --external --provider-physical-network physnet1…...

编程日记 2025/5/11 18:05:12

利用空闲主机进行Nmap隐匿扫描：IP伪造与空闲扫描技术

IP伪造与空闲扫描技术在网络安全领域，扫描和识别目标主机的开放端口是攻击者获取目标信息的重要手段。传统的扫描方法可能会暴露扫描者的真实IP地址，从而引起目标主机的警觉。然而，IP地址伪造是一种巧妙的方式，可以帮助攻击者在…...

编程日记 2025/5/13 5:07:24

vue聊天对话语音消息播放动态特效

vue2写法，vue3也能用，粘之即走： 示例： <template><div class"voice-hidden"><divclass"voice-play-chat":class"[className, { animate-stop: !isPlaying }]"><div class&q…...

编程日记 2025/5/12 14:41:15

流媒体之linux下离线部署FFmpeg 和 SRS

前言用户对网络做了限制，只能访问指定的网址，和没网没啥区别，导致无法连接外网，无法获取安装包，还有一些编译需要的开源工具用户需要用平台查看库房的海康摄像头实时监控，只能在库房里一台纯净的ubantu…...

编程日记 2025/5/8 8:06:53

C/C++内存管理

1. C/C内存分布我们先来看下面的一段代码和相关问题 const int a（此时an存放在栈上）char char2[] "abcd"（此时是在栈上创建5个char类型大小的数组，并让用常量字符串来初始化数组内的内容，*char2就是数组…...

编程日记 2025/5/9 18:56:11

xiaolin coding 图解 MySQL笔记——锁篇

1. 全局锁是怎么用的？ flush tables with read lock 执行以后，整个数据库就处于只读状态了，这时其他线程执行对数据的增删改操作（insert、delete、update）；对表结构的更改操作（alter table、dr…...

编程日记 2025/5/10 5:52:46

node.js实现分页和jwt鉴权机制

const express require(express); const jwt require(jsonwebtoken); const app express(); // 模拟数据库 const db { users: [ { id: 1, username: user1, email: user1example.com }, // ...更多用户 ], // ...其他数据模型 }; // 应用中间件 app.use(express.json…...

编程日记 2025/5/13 3:03:15

Issue id: AppLinkUrlError 应用intent-filter 配置深链接 URL 问题分析 | AndroidManifest

AndroidManifest.xml 配置文件中，对 activity 组件进行声明的时候，独立应用在 IDE 显示 intent-filter 报错，但不影响实际编译，因为是系统应用，肯定会有此 URL 的存在。 AOSP 源码： <activity android:…...

编程日记 2025/5/12 17:48:21

STM32F103 PWM配置

在《STM32F103定时器配置》中我们介绍了PWM的产生原理，本节介绍介绍如何编码实现PWM的输出。一、PWM相关寄存器 TIMx如果要产生PWM，除了我们上一节提到的如下寄存器： 控制寄存器(TIMx_CR1)；DMA/中断使能寄存器(TIMx_DIER)&#x…...

编程日记 2025/5/6 17:11:54

C语言蓝桥杯进阶

系列文章目录文章目录系列文章目录前言一、题目1、在 ISO 国际标准中定义了 A0 纸张的大小为 1189mm 841mm，将 A0 纸沿长边对折后为 A1 纸，大小为 841mm 594mm，在对折的过程中长度直接取下整（实际裁剪时可能有损耗&#xff09…...

编程日记 2025/5/13 0:27:33

【笔记2-2】ESP32：开发板与espidf插件的一些配置项

主要参考b站宸芯IOT老师的视频，记录自己的笔记，老师讲的主要是linux环境，但配置过程实在太多问题，就直接用windows环境了，老师也有讲一些windows的操作，只要代码会写，操作都还好，开发…...

编程日记 2025/5/10 2:52:30

【Linux】线程概念 | 线程控制

文章目录 👉知识补充👈👉Linux线程概念👈什么是线程Makefile线程 VS 进程线程的优点线程的缺点线程异常线程用途 👉线程控制👈线程终止pthread_exit 函数pthread_cancel 函数线程 ID 的深入理解在多线程的场…...

编程日记 2025/5/8 4:59:56

OCR的评价指标和常用数据集

1.OCR任务简介 OCR(Optical Character Recognition,光学字符识别)是指对包含文本内容的图像或者视频进行处理识别，并提取其中所包含的文字及排版信息的过程。例如，一个常见的应用是将包含文档图像的不可编辑状态的 PDF 文档通过 OCR 技术识别后&#xf…...

编程日记 2025/5/11 12:18:05

React性能优化

三个可以优化的地方避免过度多次渲染组件会在以下情况下重新渲染注意：例如组件组合的形式，<Test><Counter></Counter></Test>,即使Test发生了重新渲染，Counter也不会重新渲染。另外使用React这样的库或框架时&a…...

编程日记 2025/5/4 10:51:54

Django之ORM

1.ORM介绍 ORM概念对象关系映射（Object Relational Mapping，简称ORM）模式是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术。简单的说，ORM是通过使用描述对象和数据库之间映射的元数据，将程序中的对…...

编程日记 2025/5/13 0:32:07

macos上设置windsurf命令行启动

解决方案 1. 在/usr/local/bin 目录下创建软链 sudo ln -s /Applications/Windsurf.app/Contents/Resources/app/bin/windsurf /usr/local/bin/windsurf 2. 执行source source ~/.zshrc...

编程日记 2025/5/2 8:03:01

一、web基础和http协议

前言 https://www.baidu.com/：URL（是一种万维网寻址网址） https://：协议，加密的http，加密的超文本传输协议，在数据传输之前要通过整数进行身份验证，验证通过才可以进行数据传输。 …...

编程日记 2025/5/6 4:45:58

Can‘t find variable: token（token is not defined）

文章目录例子 1：使用 var例子 2：使用 let 或 const例子 3：异步操作你的代码中的情况 Cant find variable: tokentoken is not defined源代码 // index.jsPage({data: {products:[],cardLayout: grid, // 默认卡片布局为网格模式isGrid: tr…...

编程日记 2025/5/11 8:03:20

Elasticsearch ILM 故障排除：常见问题及修复

作者：来自 Elastic Stef Nestor 大家好！我们的 Elasticsearch 团队正在不断改进我们的索引生命周期管理 (index Lifecycle Management - ILM) 功能。当我第一次加入 Elastic Support 时，我通过我们的使用 ILM 实现自动滚动教程快速上手。在帮…...

编程日记 2025/5/8 12:19:14

1. 设计模式的由来

设计模式的灵感来自建筑师亚历山大的“设计套路”，后来被程序员借用，总结出一套“编程武功秘籍”。 20世纪90年代，四位软件工程师（被称为“四人帮”）——Erich Gamma、Richard Helm、Ralph Johnson 和 John Vlissides&…...

编程日记 2025/5/10 6:14:49

【Excel】Excel中将日期格式转换为文本格式，并按日期显示。

【问题需求】在使用excel进行数据导入的过程中， 有的软件要求日期列必须是文本格式。但是直接将日期列的格式改为文本后，显示一串数字，而不按日期显示。进而无法导入使用。【解决方法】使用【TXET】函数公式进行处理， 在单独…...

编程日记 2025/4/29 2:14:08

SpringBoot入门：如何新建SpringBoot项目（保姆级教程）

在本文中，我们将演示如何新建一个基本的 Spring Boot 项目。写这篇文章的时候我还是很惊讶的，因为我发现有些java的初学者，甚至工作10年的老员工居然并不会新建一个SpringBoot项目，所以特别出了一篇文章来教大家新建一个SpringBoo…...

编程日记 2025/5/5 4:06:18

什么是Layer Normalization？

一、概念前面的文章中，我们介绍了Batch Normalization。BN的目的是使得每个batch的输入数据在每个维度上的均值为0、方差为1（batch内，数据维度A的所有数值均值为0、方差为1，维度B、C等以此类推），这是由于神…...

编程日记 2025/5/9 17:25:45

基于神经网络的弹弹堂类游戏弹道快速预测

目录一、目的... 1 1.1 输入与输出.... 1 1.2 隐网络架构设计.... 1 1.3 激活函数与损失函数.... 1 二、训练... 2 2.1 数据加载与预处理.... 2 2.2 训练过程.... 2 2.3 训练参数与设置.... 2 三、测试与分析... 2 3.1 性能对比.... 2 3.2 训练过程差异.... 3 四、…...

编程日记 2025/5/12 13:54:46