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

TypeScript 高级类型 vs JavaScript：用“杂交水稻”理解类型编程

news 来源：原创 2025/8/16 11:17:35

如果把 JavaScript 比作乐高积木，TypeScript 就是一套智能积木系统。本文将用最生活化的比喻，带你理解 TypeScript 那些看似复杂的高级类型。

一、先看痛点：JavaScript 的“薛定谔类型”

// 场景：用户信息处理
function getUserInfo(user) {return {name: user.name.toUpperCase(),age: user.age + '岁'}
}// 调用时可能出现的灾难：
getUserInfo({ age: 25 }) // 报错：Cannot read 'name' of undefined

JavaScript 的问题：

像没有质检员的工厂
运行时才发现问题
类型关系全靠脑补

二、TypeScript 的四大法宝

1. 联合类型 vs JS 的"或"逻辑

比喻：多合一螺丝刀

// TS 写法
type ID = string | numberfunction printId(id: ID) {console.log(id)
}// 等效 JS 逻辑
function printIdJS(id) {if (typeof id !== 'string' && typeof id !== 'number') {throw new Error('类型错误')}console.log(id)
}

特性	TypeScript	JavaScript 实现
代码量	1 行类型声明	4 行类型检查逻辑
错误发现	写代码时立即提示	运行时才可能发现
可读性	直观的类型关系	隐藏在代码逻辑中的判断

2. 交叉类型 vs JS 的 Object.assign

比喻：杂交水稻

// TS 写法
type Employee = Person & WorkCard// 等效 JS 实现
const employee = Object.assign({}, person, workCard)

实际应用场景：

type WiFi = { ssid: string; password: string }
type Bluetooth = { deviceId: string }type SmartDevice = WiFi & Bluetooth// 正确示例
const speaker: SmartDevice = {ssid: 'Home',password: '123456',deviceId: 'X1'
}// 错误示例（缺少属性立即报错）
const errorDevice: SmartDevice = {ssid: 'Office' // 缺少 password 和 deviceId
}

3. 泛型 vs JS 的函数参数

比喻：万能模具

// TS 的泛型队列
class Queue<T> {private data: T[] = []push(item: T) { /*...*/ }pop(): T | undefined { /*...*/ }
}// 等效 JS 实现（无类型保护）
class QueueJS {constructor() {this.data = []}push(item) { /*...*/ }pop() { /*...*/ }
}

使用对比：

// TS 有类型约束
const numberQueue = new Queue<number>()
numberQueue.push(1)       // ✅
numberQueue.push('hello') // ❌ 立即报错// JS 要到运行时才会发现问题
const jsQueue = new QueueJS()
jsQueue.push(1)
jsQueue.push('hello') // 不会报错
const value = jsQueue.pop()
value.toFixed(2)      // 运行时可能报错

4. 条件类型 vs JS 的三元表达式

比喻：智能分流器

// TS 类型判断
type IsNumber<T> = T extends number ? 'Yes' : 'No'// 等效 JS 逻辑
function isNumberJS(value) {return typeof value === 'number' ? 'Yes' : 'No'
}

实战应用：

// 自动过滤非对象类型
type FilterObject<T> = T extends object ? T : nevertype Test1 = FilterObject<string>       // never
type Test2 = FilterObject<{ a: 1 }>     // { a: 1 }
type Test3 = FilterObject<string[] >    // string[]

三、TypeScript 的“超能力”类型

1. 模板字面量类型

像字符串模板的升级版

type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE'
type ApiPath = `/api/${string}`// 正确使用
const url1: ApiPath = '/api/users'  // ✅
const url2: ApiPath = '/users'      // ❌

2. 映射类型

批量处理对象属性

// 把对象所有属性变为可选
type Optional<T> = {[K in keyof T]?: T[K]
}// 使用示例
type User = {name: stringage: number
}type OptionalUser = Optional<User>
/* 等效于：
{name?: stringage?: number
}
*/

四、为什么需要类型体操？

智能提示加强：编辑器能准确推断类型
代码即文档：类型声明本身就是最好的注释
错误前置：把运行时错误消灭在编码阶段
重构信心：大规模修改代码不心慌

五、学习建议

从interface和type开始打基础
多用 VS Code 的类型推导提示

渐进式学习路线：

复制

基础类型 → 联合类型 → 泛型 → 条件类型 → 类型体操

官方文档是最好的参考资料：TypeScript Handbook

最后思考：TypeScript 的类型系统就像给你的代码装上了CT 扫描仪，在开发阶段就能发现深层问题。虽然初期需要学习成本，但它能让你写出更健壮的代码，特别适合大型项目协作开发。

升级挑战：尝试用 TS 类型实现一个安全的 localStorage 封装器，要求：

支持自动序列化/反序列化
有类型约束的 key 管理
过期时间控制

TypeScript 高级类型 vs JavaScript：用“杂交水稻”理解类型编程

如果把 JavaScript 比作乐高积木，TypeScript 就是一套智能积木系统。本文将用最生活化的比喻，带你理解 TypeScript 那些看似复杂的高级类型。一、先看痛点：JavaScript 的“薛定谔类型” // 场景：用户信息处理 function getUserI…...

编程日记 2025/8/16 11:17:35

几款可用于绘制工艺原理图的开源框架

一、LogicFlow 由滴滴团队开发的开源流程图框架，支持高度定制的工艺原理图绘制。 • 核心特性： • 提供拖拽式界面和丰富的节点类型（矩形、圆形、多边形等），支持自定义节点形状、样式和交互逻辑。 • 支持插件扩展&am…...

编程日记 2025/8/16 12:52:22

STM32如何精准控制步进电机？

在工业自动化、机器人控制等场合，步进电机以其高精度、开环控制的特性得到了广泛应用。而在嵌入式系统中，使用STM32进行步进电机的精确控制，已成为开发者的首选方案之一。本文将从嵌入式开发者的角度，深入探讨如何基于STM32 MCU…...

编程日记 2025/8/16 12:14:06

Go语言入门基础详解

一、语言历史背景 Go语言由Google工程师Robert Griesemer、Rob Pike和Ken Thompson于2007年设计，2009年正式开源。设计目标： 兼具Python的开发效率与C的执行性能内置并发支持（goroutine/channel）简洁的类型系统现代化的包管理跨…...

编程日记 2025/8/16 13:02:56

WPF窗口读取、显示、修改、另存excel文件——CAD c#二次开发

效果如下： using System.Data; using System.IO; using System.Windows; using Microsoft.Win32; using ExcelDataReader; using System.Text; using ClosedXML.Excel;namespace IfoxDemo {public partial class SimpleWindow : Window{public SimpleWindow(){Initi…...

编程日记 2025/8/16 12:09:45

Ubuntu 服务器安装 Python 环境的详细指南

以下是在 Ubuntu 上安装 Python 3.10 的详细步骤（兼容 Ubuntu 20.04/22.04）： 方法一：通过 PPA 仓库安装（推荐） 1. 添加 deadsnakes PPA sudo apt update sudo apt install software-properties-common s…...

编程日记 2025/8/16 11:24:54

鸿蒙next 多行文字加图片后缀实现方案

需求实现类似iOS的YYLabel之类的在文字后面加上图片作为后缀的样式，多行时文字使用…省略超出部分，但必须保证图片的展现。系统方案在当前鸿蒙next系统提供的文字排版方法基本没有合适使用的接口，包括imagespan和RichEditor,根据AI的回…...

编程日记 2025/8/16 2:22:35

STM32---FreeRTS队列集

一、简介一个队列只允许任务间传递的消息为同一种数据类型，如果需要在任务间传递不同数据类型的消息时，那么就可以使用队列集 ！ 作用：用于对多个队列或信号量进行“监听”，其中不管哪一个消息到来，都可让…...

编程日记 2025/8/16 11:51:34

oracle11.2.0.4 RAC 保姆级静默安装（二) DB数据库软件

1.响应文件配置 [rootdb11g1 software]# su - oracle [oracledb11g1 ~]$ cd /software/database/ [oracledb11g1 database]$ cd response/ [oracledb11g1 response]$ vi db_install.rsp oracle.install.optionINSTALL_DB_SWONLY ORACLE_HOSTNAMEdb11g1 UNIX_GROUP_NAME…...

编程日记 2025/8/16 11:23:10

用python代码将excel中的数据批量写入Json中的某个字段，生成新的Json文件

需求需求： 1.将execl文件中的A列赋值给json中的TrackId，B列赋值给json中的OId 要求 execl的每一行，对应json中的每一个OId json 如下： {"List": [{"BatchNumber": "181-{{var}}",// "Bat…...

编程日记 2025/8/16 8:30:44

【每日学点HarmonyOS Next知识】状态变量、动画UI残留、Tab控件显示、ob前缀问题、文字背景拉伸

1、HarmonyOS 怎么用一个变量观察其他很多个变量的变化？ 有一个提交按钮的颜色，需要很多个值非空才变为红色，否则变为灰色，可不可以用一个变量统一观察这很多个值，去判断按钮该显示什么颜色，比如Button().…...

编程日记 2025/8/16 11:27:01

【第五节】windows sdk编程：windows 控件基础

目录一、控件概述二、标准控件三、通用控件四、控件的创建五、控件风格六、控件相关的消息 6.1 控件控制消息 6.2 控件通知消息一、控件概述控件是 Windows 系统内置的窗口类，它们只能是某个窗口的子窗口。因此，创建控件时必须使用 WS_C…...

编程日记 2025/8/16 12:28:29

架构师论文《论云原生架构及其应用》

【摘要】 2022年3月，我作为系统架构师参与了某大型零售企业“智能化供应链管理平台”项目的设计与实施工作。该平台旨在整合企业分散在不同区域的仓储、物流、库存及订单系统，构建统一管理的云原生架构，以应对业务季节性峰值带来的弹性伸缩需…...

编程日记 2025/8/16 12:36:02

Centos 7 安装达梦数据库

一、环境准备 1. 确认操作系统的版本和数据库的版本是否一致 cat /etc/redhat-release 2. 关闭防火墙查看防火墙状态 firewall-cmd --state 停止firewall systemctl stop firewalld.service 禁止firewall开机启动 systemctl disable firewalld.service 3. 修改文件l…...

编程日记 2025/8/16 11:49:37

46.全排列

46.全排列力扣题目链接给定一个不含重复数字的数组 nums ，返回其所有可能的全排列。你可以按任意顺序返回答案。示例 1： 输入：nums [1,2,3] 输出：[[1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2],[3,2,1]]示例 2&#xff1a…...

编程日记 2025/8/16 9:43:40

RabbitMQ (Java)学习笔记

目录一、概述 ①核心组件 ②工作原理 ③优势 ④应用场景二、入门 1、docker 安装 MQ 2、Spring AMQP 3、代码实现 pom 依赖配置RabbitMQ服务端信息发送消息接收消息三、基础 work Queue 案例消费者消息推送限制（解决消息堆积方案之一&#…...

编程日记 2025/8/16 12:52:58

2-002：MySQL 索引的最左前缀匹配原则是什么？

MySQL 索引的最左前缀匹配原则最左前缀匹配原则（Leftmost Prefix Matching） 是指： 当查询使用了复合索引（联合索引） 时，MySQL 会优先匹配索引的最左列，然后逐步向右匹配，直到遇到…...

编程日记 2025/8/15 20:27:09

【Python 数据结构 15.哈希表】

目录一、哈希表的基本概念 1.哈希表的概念 2.键值对的概念 3.哈希函数的概念 4.哈希冲突的概念 5.常用的哈希函数 Ⅰ、直接定址法 Ⅱ、平方取中法 Ⅲ、折叠法 Ⅳ、除留余数法 Ⅴ、位与法 6.哈希冲突的解决方案 Ⅰ、开放定址法 Ⅱ、链地址法 7.哈希表的初始化 8.哈希表的元素插…...

编程日记 2025/8/16 11:36:04

校园安全用电怎么保障？防触电装置来帮您

引言随着教育设施的不断升级和校园用电需求的日益增长，校园电力系统的安全性和可靠性成为了学校管理的重要课题。三相智能安全配电装置作为一种电力管理设备，其在校园中的应用不仅能够提高电力系统的安全性，还能有效保障师生的用电安全&am…...

编程日记 2025/8/16 11:47:25

疗养院管理系统设计与实现(代码+数据库+LW)

摘要传统办法管理信息首先需要花费的时间比较多，其次数据出错率比较高，而且对错误的数据进行更改也比较困难，最后，检索数据费事费力。因此，在计算机上安装疗养院管理系统软件来发挥其高效地信息处理的作用&#xf…...

编程日记 2025/8/16 12:10:38

基于 Redis Stream 实现消息队列功能

好长时间没更新了。。。。。。背景：举个例子在某个接口执行完成后只需要前半段返回结果，后半段可能是日志记录、下游系统调用等功能的情况下，将耗时的消息进行异步发送就显得很有必要，这时就有很多种选择，单体项目甚至…...

编程日记 2025/8/16 9:43:29

单元测试、系统测试、集成测试、回归测试的步骤、优点、缺点、注意点梳理说明

单元测试、系统测试、集成测试、回归测试的梳理说明单元测试步骤： 编写测试用例，覆盖代码的各个分支和边界条件。使用测试框架（如JUnit、NUnit）执行测试。检查测试结果，确保代码按预期运行。修复发现的缺陷并重新测…...

编程日记 2025/8/16 2:50:13

深入理解 HTML 中的＜div＞和元素：构建网页结构与样式的基石

一、引言在 HTML 的世界里，<div>和元素虽看似普通，却扮演着极为关键的角色。它们就像网页搭建过程中的万能积木，能够将各种 HTML 元素巧妙地组合起来，无论是构建页面布局，还是对局部内容进行样式调整&#xff…...

编程日记 2025/8/16 9:43:47

网络安全信息收集[web子目录]：dirsearch子目录爆破全攻略以及爆破字典结合

目录一、dirsearch 工具详细使用攻略 1. 安装前提条件安装步骤可选：直接下载预编译版本 2. 基本用法命令格式参数说明示例 3. 核心功能与高级用法 3.1 多线程加速 3.2 自定义字典 3.3 递归扫描 3.4 过滤响应 3.5 添加请求头 3.6 代理支持 3…...

编程日记 2025/8/16 9:42:43

Mybaties批量操作

1、批量插入 <insert id"batchInsert" parameterType"java.util.List">INSERT INTO t_goods (title,sub_title,origina…...

编程日记 2025/8/16 9:43:59

27.卷2的答案

CSP-J离我们不远了，加加油啦！ 1.堆排序最坏时间复杂度是？ 解析：平时多多练习可知，最坏时间复杂度是O(n log n)。 2.哪条能将s中的数值保留一位，并将第二位四舍五入？ 解析：经过试…...

编程日记 2025/8/16 4:45:35

【 Manus平替开源项目】

文章目录 Manus平替开源项目1 OpenManus1.1 简介1.2 安装教程1.3 运行 2 OWL2.1 简介2.2 安装教程2.3 运行 3 OpenHands（原OpenDevin）3.1 简介3.2 安装教程和运行 Manus平替开源项目 1 OpenManus 1.1 简介开发团队: MetaGPT 核心贡献者（5…...

编程日记 2025/8/16 9:44:06

【WEB APIs】DOM-事件基础

目录 1. 事件监听（绑定） 案例—关闭广告案例-随机点名 2. 事件类型 2.1 鼠标事件 2.2 焦点事件 2.3 文本事件 3. 事件对象案例—评论回车发布 4. 环境对象 5. 回调函数 6. 综合案例—tab栏切换 1. 事件监听（绑定） …...

编程日记 2025/8/16 3:23:44

66.Harmonyos NEXT 图片预览组件使用指南

温馨提示：本篇博客的详细代码已发布到 git : https://gitcode.com/nutpi/HarmonyosNext 可以下载运行哦！ Harmonyos NEXT 图片预览组件使用指南文章目录 Harmonyos NEXT 图片预览组件使用指南效果预览一、组件使用概述1. 组件功能特点2. 组件依赖关系二…...

编程日记 2025/8/16 13:08:05

linux系统安装和激活conda

安装 wget https://repo.anaconda.com/miniconda/Miniconda3-latest-Linux-x86_64.shbash ./Miniconda3-latest-Linux-x86_64.sh回车到最后按照输入yes，之后按提示操作。激活 conda activate如果没有反应或者返回： bash: conda: command not found则…...

编程日记 2025/8/16 9:42:59

Java 集合框架大师课：集合框架的暗黑料理（六）

🔮Java 集合框架大师课：集合框架的暗黑料理（六）——弱引用与幽灵队列第一章弱引用：Java世界的塑料兄弟情 💔 四大引用类型生死簿 // 四类引用生死实验 Object strongObj new Object(); …...

编程日记 2025/8/16 12:26:22

LVI-SAM、VINS-Mono、LIO-SAM算法的阅读参考和m2dgr数据集上的复现（留作学习使用）

ROS一键安装参考： ROS的最简单安装——鱼香一键安装_鱼香ros一键安装-CSDN博客 opencv官网下载4.2.0参考：https://opencv.org/releases/page/3/ nvidia驱动安装:ubuntu18.04 安装显卡驱动 - 开始战斗 - 博客园 cuda搭配使用12 cuda安装1：Ub…...

编程日记 2025/8/16 9:42:50

京鲁医疗健康专家委员会聊城专家团成立

3月13日由京鲁医疗健康专家委员会指导，聊城市委人才工作领导小组办公室、聊城市卫生健康委员会、聊城市人才引进服务中心主办的"智链医脉．新启未来"聊城卫生健康产才共融发展交流会在北京人卫酒店召开。会上，京鲁医疗健康专家委员会…...

编程日记 2025/8/16 1:34:15

MySQL的事务机制

事务事务概念：事务是一个完整的操作单元，不可分割，事务中的操作要么全部成功，要么全部失败。 1. 事务特性 ACID 1.1 原子性（A） 一个事务中所有操作是不能被分割的，要么所有的操作都成功&am…...

编程日记 2025/8/16 9:44:37

30、Vuex 为啥可以进行缓存处理

Vuex 状态管理基础与缓存的关联 Vuex 的核心概念： Vuex 主要由五个部分组成：state、mutations、actions、getters和modules。其中，state是存储数据的地方，类似于一个全局的数据仓库。在这个菜谱 APP 的例子中，缓存的数…...

编程日记 2025/8/16 9:42:53

OpenAI Agents SDK 中文文档中文教程（5）

英文文档原文详见 OpenAI Agents SDKhttps://openai.github.io/openai-agents-python/ 本文是OpenAI-agents-sdk-python使用翻译软件翻译后的中文文档/教程。分多个帖子发布，帖子的目录如下： (1) OpenAI 代理 SDK， 介绍及快速入门 (2)Open…...

编程日记 2025/8/16 12:57:53

如何处理PHP中的文件上传错误

如何处理PHP中的文件上传错误在Web开发中，文件上传是一个常见的功能需求。然而，文件上传过程中可能会遇到各种错误，如文件大小超出限制、文件类型不被允许、上传过程中断等。为了确保用户能够顺利上传文件，并且开发者能够有效地…...

编程日记 2025/8/16 9:43:06

mac安装python没有环境变量怎么办？zsh: command not found: python

在mac电脑上，下载Python安装包进行安装之后，在终端中，输入python提示： zsh: command not found: python 一、原因分析首先，这个问题不是因为python没有安装成功的原因，是因为python安装的时候，没有为我们添加环境变量导致的，所以我们只需要，在.zshrc配置文件中加上环…...

编程日记 2025/8/16 8:53:02

湿大气校正效应

目的修正由于大气中的水汽对雷达波传播速度的影响，以提高海面高度测量的准确性，有时候也叫做对流层校正。水汽的时空变化复杂，难以直接通过气象模型准确预测。水汽的折射作用使雷达信号的传播速度减慢，从而导致测量的海面高度虚增…...

编程日记 2025/8/16 1:35:26

算法系列之回溯算法求解数独及所有可能解

有没有对数独感兴趣的朋友呢？数独作为一款经典的逻辑游戏，其目标是在一个9x9的方格中填入数字1至9，确保每一行、每一列以及每一个3x3的子网格中都包含这些数字且不重复。尽管数独的规则看似简单，但编写一个能够自动求解数独的程序…...

编程日记 2025/8/16 9:43:39

动态路径规划——01背包问题讲解和通过滚动数组优化

如果没有动态路径规划基础的兄弟可以出去了，这个题目有两个问题第一问讲解： 1.定义状态表示刚开始我做的时候根据我的经验定义了一个状态表示dp[i]表示从1到i个物品中选择的最大价值，但是这个状态表示有一个明显的问题，我怎么知…...

编程日记 2025/8/16 9:42:58

蓝队基本技能 web入侵指南日志分析后门查杀流量分析

前言为了赶工我是没学过红队的，首先我们要做的是 1、拿到用户给的web的时候要先知道 web的源码服务器中间件数据库这些信息 2、知道web日志放在哪里会一些基本的分析 3、webshell查杀的基本技能 4、会分析基本的工具链会写报告 .NET IIS 配置…...

编程日记 2025/8/15 16:58:21

docker基本应用和相关指令

文章目录概要镜像管理容器操作网络管理数据卷管理其他常用指令典型场景示例小结概要 Docker的命令通常分为几个大类，比如镜像管理（images）、容器管理（containers）、网络（network）、数据卷&…...

编程日记 2025/8/15 18:07:25

Django REST Framework中的序列化器类和视图类

序列化器类一、Serializer序列化类 Serializer是DRF的序列化器基类，提供基本功能，使用Serializer类需要自己定义字段名称和类型。 BookSerializer(Serializer):name serializers.CharField()price serlializers.IntegerField()date serlializers.…...

编程日记 2025/8/16 9:44:14

模拟人生4大型MOD整合包3000+

存档介绍 （懒人萌新必备） 游戏内全面的人物美化、房屋改造、地图美化美化人物250个（颜值在线，均搭配八套服饰） 全地图房屋改造（住宅、公寓、公用/商业地段等） 游戏内22张地图均已美化替换存档…...

编程日记 2025/8/16 9:44:46

算法基础 -- Brian Kernighan 算法初识

Brian Kernighan 算法：利用 x & (x - 1) 逐步清除最低位的 1 1. 算法原理 x & (x - 1) 这个操作的作用是每次清除 x 的最低位的 1。由于二进制的减法会影响最低的 1，我们可以利用这一特性不断去除 1，直到 x 变为 0，从…...

编程日记 2025/8/16 11:42:36

基于Uniapp开发tab选项卡/标签栏前端组件

在开发一些业务场景时候，可能需要切换标签栏来展示不同的信息列表。为此开发了一个Uniapp组件（myTab），下面为组件的展示效果： 案例代码： <template><view class"content"><myt…...

编程日记 2025/8/16 9:42:56

双向广搜

从两侧同时展开,那测数据少就从哪侧展,两者展开结果出现一样的,返回答案 127. 单词接龙 - 力扣（LeetCode） class Solution { public:int ladderLength(string beginWord, string endWord, vector<string>& wordList) {unordered_set<stri…...

编程日记 2025/8/16 10:02:48