tscircuit 评测：用 React 语法画电路板，真能下单制造吗
项目速览：使用 Typescript 和 React 创建真正的电子产品。将 ts Circuit 视为“电子领域的 React”，它允许您使用 Typescript 和 React 设计现实世界的电子电路。
秒懂
- 它是什么？
- tscircuit 把 React 组件模型搬到电子设计上，用 TypeScript 描述电路并生成可制造的 PCB 文件。本文拆解它的核心机制、上手路径和现实边界。
- 适合谁用？
- tscircuit 适合已经熟悉 React 和 TypeScript、想用代码方式做电子原型或小批量板子的开发者，尤其是那些对传统 EDA 工具感到笨重的人。它不适合需要精细控制布线、复杂模拟仿真或严格约束布局的工程师，因为当前自动布局和自动布线仍在完善中，文档也明确要求手动指定 pcbX/pcbY。
- 能商用吗？
- 可以。MIT 是宽松许可证：你可以使用、修改并销售基于它的软件，只需保留版权和许可证声明。
- 还在维护吗？
- 在维护。仓库在最近一天内有新的提交。
- 用什么语言写的？
- 主要是 TypeScript（依据 GitHub 的语言统计）。
以上回答依据项目的 GitHub 数据（最近同步于 2026年9月18日）和我们的分析，不构成法律意见。
开源项目深度解析
为什么有人想用 React 画电路
传统 PCB 设计工具，比如 KiCad 或 Altium，界面复杂，学习曲线陡峭，而且很难用脚本批量生成或版本管理。tscircuit 的出发点很直接：既然前端开发可以用 React 组件描述界面，为什么不能用同样方式描述电路？它把 chip、resistor、capacitor 当作类似 div 的组件，把 trace 当作类似连接线的东西。目标用户是那些熟悉 Web 技术栈、但不想学整套 EDA 工具的工程师或创客。README 里明确说，你可以用 TypeScript 和 React 写电路，然后导出 Gerber、Pick'n'Place 和 BOM 文件去制造。这个定位很清晰，它不是在替代专业 EDA，而是给 React 开发者一条进入硬件设计的捷径。
React Fiber 如何变成 PCB
tscircuit 的核心机制是复用 React Fiber 架构，就是 React Native 和 react-three-fiber 用来渲染到移动端或 3D 的那套协调系统。你写的 <resistor /> 组件会被 React Fiber 解析成内部节点，然后 tscircuit 把这些节点转换成电路元素，最终渲染成原理图或 PCB 布局。这意味你可以把电路组件嵌套在 <group /> 里，像操作 React 组件树一样管理电路结构。README 给了一个例子：用 <board> 定义板子尺寸，内部放 <resistor>、<ground>，再用 <trace path={[".U1 > .D0", ".R1 > .left"]} /> 连接引脚。这种路径语法类似 CSS 选择器，指定组件之间的连接关系。关键点是，它不是在画布上画线，而是用代码声明连接，然后由渲染器生成几何图形。
从 npm 安装到浏览器预览
上手路径很直接。全局安装命令行工具：npm install -g tscircuit，然后运行 tsci dev，打开 http://localhost:3020 就能看到电路预览。这个命令会启动一个开发服务器，类似前端的 webpack-dev-server，改代码后浏览器实时刷新。如果你想在现有 React 项目里嵌入原理图，可以导入 @tscircuit/schematic-viewer，然后写 <Schematic><resistor name="R1" resistance="10k" /></Schematic>。README 里强调，用 tsci dev 开发电路会更方便，因为命令行工具集成了预览、导出和发布功能。安装后你还可以用 tsci add 添加注册表里的封装库，用 tsci push 发布自己的子包到 tscircuit 注册表。这个流程和 npm 包管理几乎一样。
注册表、AI 和自动布线：生态的野心
tscircuit 不只是个渲染库，它配套了一个注册表、包管理器和 AI 工具。README 提到可以用 tsci add 引入第三方封装，也能从外部站点导入 footprint。更吸引人的是 AI 集成：你可以用文本生成 footprint，网址是 text-to-footprint.tscircuit.com。这意味着你只需要描述引脚间距和尺寸，AI 就能生成封装代码。自动布线方面，项目承认还在开发中，README 的 FAQ 说“我们正致力于最先进的基于 Web 的自动布线算法”，并指向 autorouting.com 看进展。这个生态设计很聪明，它把硬件设计拆成可复用的包，让社区共享组件，类似 npm 对 JavaScript 的作用。但注意，自动布线目前不是生产级，复杂板子可能还得手动布线。
手动定位是当前最大约束
README 的 FAQ 里有一个诚实的回答：目前你需要为组件指定 pcbX 和 pcbY 坐标，并嵌套在 <group /> 里来组织。他们正在做类似 CSS Flexbox 和 Grid 的自动布局算法，但还没完成。这意味着你不能像写网页那样让元素自动排列，每个电阻、芯片都要手动给坐标。对于简单板子，比如 ESP32 扩展板，这没问题。但如果你要做几十个元件的复杂设计，手动定位会非常繁琐，而且容易出错。另一个限制是，自动布线质量未知，FAQ 承认“我们正在努力”，所以如果你需要高密度布线或高速信号处理，tscircuit 目前不是合适工具。
和传统 EDA 工具的本质差异
拿 KiCad 做对比。KiCad 是图形化工具，你在画布上拖放元件，手动拉线，它的优势是成熟稳定，有庞大的社区和库。tscircuit 是代码优先，所有设计都是文本，可以 diff、可以版本控制、可以自动生成。这个差异很关键：如果你要批量生成变体板子，比如不同电阻值的版本，用 tscircuit 写个循环就能输出多个设计，而 KiCad 你得手动复制项目。反过来，KiCad 的交互式布局和布线体验，tscircuit 目前无法替代。另一个差异是，tscircuit 的注册表让组件复用更接近 npm 生态，而 KiCad 的封装库是静态文件。选择哪个，取决于你更看重代码的可维护性还是图形操作的直观性。
开源许可和项目现状
tscircuit 采用 MIT 许可证，完全免费，这意味着你可以自由使用、修改甚至商用。README 明确说“tscircuit is completely free and MIT-licensed open-source”。项目没有发布正式 release，也没有最近的推送记录，但 GitHub 仓库和 npm 包都在活跃更新。维护成本方面，由于依赖 React Fiber，你需要跟上 React 的版本变化。另外，tscircuit 包含多个子项目，比如 CLI、schematic-viewer、autorouter，每个都有自己的迭代节奏，这增加了集成时的复杂度。如果你要长期依赖，建议锁定版本并关注主仓库的 issue 区。
编辑结论
tscircuit 适合已经熟悉 React 和 TypeScript、想用代码方式做电子原型或小批量板子的开发者，尤其是那些对传统 EDA 工具感到笨重的人。它不适合需要精细控制布线、复杂模拟仿真或严格约束布局的工程师，因为当前自动布局和自动布线仍在完善中，文档也明确要求手动指定 pcbX/pcbY。在决定采用之前，先到在线 playground 跑一个带电阻和 trace 的示例，确认生成的文件能通过你目标工厂的 DRC 检查，再评估是否值得把现有流程迁移过来。这个项目的核心价值在于把电路设计变成可版本化、可 AI 生成的代码，但它的成熟度取决于你愿意接受多少手动调整。
社区笔记