泛型函数是 TS 类型系统里复用率最高的特性——核心是 类型变量 T + 约束 extends 两个机制。

• 基础用法：function id<T>(arg: T): T——比 any 安全
• 类型推断：调用时不用显式 <T>，TS 自动推断
• 多类型变量：<T, U> 分别约束不同位置
• 约束语法：T extends Person 限定类型范围
• 避坑：泛型里访问属性前必须 narrow 或约束

extends 和 implements 是两种完全不同的关系——前者是类型组合，后者是合同检查，混为一谈是新手最常踩的坑。

• extends：接口继承接口，支持多继承
• implements：类实现接口，必须实现所有成员，可以多加
• 合并 vs 验证：extends 合并成员；implements 只做编译期结构验证
• 现代写法：interface 能 extends type，type 用 & 合并
• 关键差异：implements 不参与运行时

Interface 是 TS 定义对象/数组结构的主力工具——核心是 形状契约，不是类继承。

• 对象类型：interface Person { name; age } 限定对象必须有哪些字段
• 可选字段：name?: string 表示可有可无
• 只读字段：readonly age 防止外部修改
• 索引签名：[key: string]: any 描述动态字段
• Duck typing：TS 是结构化类型，多余字段传入不报错

tsconfig.json 选项有 100+ 个，但日常 80% 场景只需要 10 个左右。

• strict: true：8 个严格检查全开，新项目必开
• target: "ES2022"：覆盖 Node 18+ 和现代浏览器
• module: "NodeNext"：Node ESM 现代写法
• skipLibCheck: true：跳过 .d.ts 检查，构建快 30%+
• noUncheckedIndexedAccess: true：arr[0] 类型变 T | undefined

JavaScript 定时调度 三 大核心 API

1. setTimeout：延迟执行一次，推荐使用，可灵活控制调度
2. setInterval：周期重复执行，不推荐使用，存在设计缺陷
3. requestAnimationFrame：与屏幕刷新同步，动画场景首选

最佳实践：用递归 setTimeout 替代 setInterval，保证间隔准确、支持动态调整。

零延迟调度：setTimeout(fn, 0) 不是立即执行，而是当前同步任务完成后尽快执行，可用于拆分长任务。

关键提醒：定时器回调中的 this 指向全局对象；务必清理不再需要的定时器防止内存泄漏。

DOM 增删改查只记现代 API，老的 getElement 系列 + innerHTML 拼接可以忘了。

1. 查询：querySelector / querySelectorAll 一对，覆盖 6 个老方法
2. 插入：createElement + insertAdjacentHTML，比 appendChild 简洁
3. 删除：el.remove() 一行替代 parentNode.removeChild 来回找
4. 修改：dataset / classList / textContent，避免 innerHTML 拼接 XSS
5. 2026 默认：框架项目里不要写裸 DOM API，那是 jQuery 时代肌肉记忆

要点一： 事件系统的三大角色 —— 事件对象（存储状态）、事件源（被操作对象）、监听函数（回调处理）

• 事件最早在 IE3 和 Netscape Navigator 2 中出现，用于分担服务器运算负载
• IE4/Netscape4 时代出现了两种对立的事件流：IE 的冒泡流 vs Netscape 的捕获流
• DOM2 级规范统一了事件模型，形成捕获阶段 → 目标阶段 → 冒泡阶段的三阶段事件流

• addEventListener 第三个参数 useCapture 决定在捕获/冒泡阶段触发，默认 false（冒泡）
• stopPropagation() 只阻止向其他元素传播，不阻止当前元素的其他监听器
• stopImmediatePropagation() 彻底阻止传播，包括当前元素的后续监听器
• 事件代理（委托）利用冒泡特性，将子元素监听统一挂载到父节点，性能更优