从 TypeScript 到 Bun：一份前端开发者的效率进阶笔记

从 TypeScript 到 Bun：前端开发者的效率进阶笔记

类型安全、异步编程、现代运行时，一次搞懂

写在前面

最近在整理代码笔记，发现一个小小的时间跨度：从最基础的 TypeScript 类型注解，到 Promise 与 async/await 的异步处理，再到原生 DOM 事件监听，最后接触到 Bun 这个新兴的 JavaScript 运行时。

这恰好是一条前端开发者从"会用"到"懂原理"再到"追前沿"的成长路径。今天就把这些零散的笔记整理成一篇完整的文章，分享给大家。

一、TypeScript：给 JavaScript 穿上"防弹衣"

为什么需要 TypeScript？

JavaScript 是弱类型语言，这既是它的灵活之处，也是容易出错的地方。

typescript

ini 复制代码

// 这段代码不会报错，但结果可能让你意外
let age = "18";
let nextAge = age + 1;  // "181" 而不是 19

TypeScript 作为 JS 的超集，最大的价值就是静态类型检查。

基础示例

typescript

typescript 复制代码

const nickname: string = "9527";
const age: number = 18;
console.log(`我是${nickname},我今年${age}岁`);

💡 小贴士：TypeScript 不会影响运行时性能，编译后就是干净的 JS 代码。现在 AI Agent 开发基本都标配 TS。

二、异步编程：从回调地狱到优雅的 async/await

封装一个 sleep 函数

很多时候我们需要让程序"等一等"，比如轮询、动画、节流等场景。

typescript

javascript 复制代码

function sleep(t: number) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, t);
  });
}

使用 async/await 同步化异步任务

typescript

javascript 复制代码

async function main() {
  console.log('--start--');
  await sleep(2000);  // 等待 2 秒
  console.log('--end--');
}

main();

输出结果：

text

css 复制代码

--start--
（等待 2 秒）
--end--

await 后面必须跟一个 Promise，这正是 sleep 函数返回的类型。这种写法让异步代码读起来像同步代码，可读性大幅提升。

三、DOM 事件：你可能忽略的细节

来看一个简单的输入框监听：

html

typescript 复制代码

<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

csharp 复制代码

// 你以为在做加法，实际在做拼接
let value = event.target.value;  // "100"
let result = value + 50;         // "10050"

改进建议

javascript

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

arduino 复制代码

powershell -c "irm bun.sh/install/windows | iex"

Mac/Linux 用户：

bash

arduino 复制代码

curl -fsSL https://bun.sh/install | bash

快速体验

bash

csharp 复制代码

# 运行 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

技术迭代很快，但底层的思维模型是不变的：类型思维、异步思维、事件驱动。把这几个概念吃透，无论工具怎么变，你都能快速上手。

希望这篇笔记对你也有帮助。如果觉得有用，欢迎点赞收藏～