从 TypeScript 到 Bun：前端开发者的效率进阶笔记
类型安全、异步编程、现代运行时，一次搞懂
写在前面
最近在整理代码笔记，发现一个小小的时间跨度：从最基础的 TypeScript 类型注解，到 Promise 与 async/await 的异步处理，再到原生 DOM 事件监听，最后接触到 Bun 这个新兴的 JavaScript 运行时。
这恰好是一条前端开发者从“会用”到“懂原理”再到“追前沿”的成长路径。今天就把这些零散的笔记整理成一篇完整的文章，分享给大家。
一、TypeScript：给 JavaScript 穿上“防弹衣”
为什么需要 TypeScript？
JavaScript 是弱类型语言，这既是它的灵活之处，也是容易出错的地方。
typescript
// 这段代码不会报错，但结果可能让你意外
let age = "18";
let nextAge = age + 1; // "181" 而不是 19
TypeScript 作为 JS 的超集，最大的价值就是静态类型检查。
基础示例
typescript
const nickname: string = "9527";
const age: number = 18;
console.log(`我是${nickname},我今年${age}岁`);
💡 小贴士：TypeScript 不会影响运行时性能，编译后就是干净的 JS 代码。现在 AI Agent 开发基本都标配 TS。
二、异步编程：从回调地狱到优雅的 async/await
封装一个 sleep 函数
很多时候我们需要让程序“等一等”，比如轮询、动画、节流等场景。
typescript
function sleep(t: number) {
return new Promise((resolve) => {
setTimeout(() => {
resolve();
}, t);
});
}
使用 async/await 同步化异步任务
typescript
async function main() {
console.log('--start--');
await sleep(2000); // 等待 2 秒
console.log('--end--');
}
main();
输出结果：
text
--start--
（等待 2 秒）
--end--
await 后面必须跟一个 Promise，这正是 sleep 函数返回的类型。这种写法让异步代码读起来像同步代码，可读性大幅提升。
三、DOM 事件：你可能忽略的细节
来看一个简单的输入框监听：
html
<input type="text" id="ipt">
<script>
const ipt = document.getElementById("ipt");
ipt.addEventListener("change", function (event) {
console.log(event.target.value);
})
</script>
容易踩的坑
- 事件类型选错：
change事件在输入框失去焦点时触发，如果希望实时监听，应该用input事件。 - 值类型问题：
event.target.value永远是字符串，即使你输入的是数字。
javascript
// 你以为在做加法，实际在做拼接
let value = event.target.value; // "100"
let result = value + 50; // "10050"
改进建议
javascript
ipt.addEventListener("input", (event) => {
let num = Number(event.target.value);
if (!isNaN(num)) {
console.log(num + 50); // 真正的加法
}
});
四、Bun：Node.js 的强劲对手
Bun 是什么？
Bun 是一个比 Node 更快、开箱即用、零配置的 JavaScript/TypeScript 运行时 + 包管理器。
- 🚀 性能更快：底层使用 Zig 语言，启动和执行速度都优于 Node
- 📦 内置工具链：支持打包、转译、脚本运行，无需额外配置
- 🔧 原生支持 TS：可以直接运行
.ts文件，不需要ts-node - 📚 兼容 Node.js API：大部分 npm 包可以直接使用
安装方式（Windows）
powershell
powershell -c "irm bun.sh/install/windows | iex"
Mac/Linux 用户：
bash
curl -fsSL https://bun.sh/install | bash
快速体验
bash
# 运行 TypeScript 文件
bun run index.ts
# 初始化项目
bun init
# 安装依赖
bun add lodash
值得一提的是，Anthropic 收购了 Bun 团队，用于 Claude Code 底层。未来 AI 编程工具链很可能会更多依赖 Bun。
写在最后
| 知识点 | 核心要点 |
|---|---|
| TypeScript | 静态类型 + JS 超集，提升代码健壮性 |
| async/await | 让异步代码同步化，配合 Promise 使用 |
| DOM 事件 | 注意事件类型和值类型的隐性转换 |
| Bun | 下一代 JS 运行时，更快 + 零配置 + 原生 TS |
技术迭代很快，但底层的思维模型是不变的：类型思维、异步思维、事件驱动。把这几个概念吃透，无论工具怎么变，你都能快速上手。
希望这篇笔记对你也有帮助。如果觉得有用，欢迎点赞收藏～
