tscircuit - 电路开发的 React 范式​ 用TypeScript、React和 AI工具构建电子产品

科技时尚 2025-05-06 chy123 3499

“用 TypeScript、React 和 AI 工具构建电子产品。”

wKgZPGgR-XyAZk-DAAK9z75WtFE475.png

tscircuit 让电子开发如同 Web 开发般便捷。在您熟悉的 IDE 中编写代码，实时观察代码改动生成电路设计。完成后，直接导出项目并投入生产！

什么是 tscircuit?

tscircuit 是一个由注册中心、包管理器、命令行工具和 AI 电子设计套件共同支持的开发库，它能轻松实现电子电路的创建、共享、导出与生产制造。该库通过React Fiber 引擎将电路设计实时渲染为网页可视化界面。

你可以将 tscircuit 视为"电子领域的 React"—— 它允许开发者使用 TypeScript 和 React 设计真实世界的电子电路。其开发范式并非创建 "p" 等网页元素，而是定义 "芯片"、"电阻" 或 "电容" 等电路元件，最终渲染输出的也不是网站，而是 3D 的电路（可直接下单生产）！

通过 tscircuit，你甚至能设计出具备完整功能的键盘电路！完成设计后，可直接将方案导出至合作制造商，订购真实可用的电路板成品。

样例

一个 wifi 的测试板。可以点击以下链接直接查看：

https://tscircuit.com/seveibar/wifi-test-board-1#files ts 的代码：

import{Reg5vTo3v3 }from"@tsci/seveibar.reg-5v-to-3v"import{ useESP32_S3_MINI_1_N8 }from"@tsci/seveibar.esp32-s3-mini-1-n8"import{ useUsbC }from"@tsci/seveibar.smd-usb-c"import{ useResistor }from"@tscircuit/core"exportdefault() => {constUsb=useUsbC("USB")constEsp32=useESP32_S3_MINI_1_N8("U1")constR1=useResistor("R1", {resistance:"5.1k",footprint:"0402"})constR2=useResistor("R2", {resistance:"5.1k",footprint:"0402"})
return( 
   
    
    
    
    
    )}

对应的原理图：

对应的 PCB：

渲染的 3D：

wKgZPGgR-X2APZZPAAYKV7Qo0UM983.png

如何使用？

可以使用tsci命令行工具完成tscircuit的所有操作。

npminstall -g tscircuittsci dev

打开浏览器：http://localhost:3020

wKgZPGgR-X2AVnhOAAK96msH80U634.png

从其它EDA工具中导入器件库

tscircuit 目前支持将立创eda 和 KiCad 的器件库导入成 tscircuit 的格式：

wKgZPGgR-X2AAQCzAAO--PKzMng176.png

wKgZPGgR-X2AK9BBAAFapw5cO2g607.png

wKgZPGgR-X6AehUiAAHsbK9uuo8896.png

原理图/PCB 自动布线

您可以使用schAutoLayoutEnabled和pcbAutoLayoutEnabled两种工具自动布局原理图和 PCB。

import{SmdDiode}from"@tsci/seveibar.SmdDiode"import{Key}from"@tsci/seveibar.Key"import{Pico2}from"@tsci/seveibar.pico2"constrowToMicroPin = {0:"GP0",1:"GP1",2:"GP10",}constcolToMicroPin = {0:"GP19",1:"GP17",2:"GP5",}exportdefault() => (
 
   {grid({ sizeX: 3, sizeY: 3, pitch: 19.05, offset: { x: 20, y: 0 } }).map(  ({ x, y, row, col }, index) => {   const schOffX = 5 + x/6   const schOffY = -y / 8   return (   
   
    
    
    
    
     ) } )})func
   tiongrid(opts: {sizeX:numbe
   rsizeY:numberpitch:numberoffset?: { x:number; y:number}}):Array<{ x: number; y: number; row: number; col: number }> {const{ sizeX, sizeY, pitch, offset = {x:0,y:0} } = optsconstpoints:Array<{ x: number; y: number; row: number; col: number }> = []conststartX = (-(sizeX -1) * pitch) /2conststartY = (-(sizeY -1) * pitch) /2for(letrow =0; row < sizeY; row++) {  for (let col = 0; col < sizeX; col++) {    points.push({      x: startX + col * pitch + offset.x,      y: startY + row * pitch + offset.y,      row,      col,    })  }}return points}

wKgZPGgR-X6AW0uqAAAofT-SWsE281.png

wKgZPGgR-X6ASM15AAB_etFQPp8374.png

对自动布线有兴趣的小伙伴可以看一下 tscircuit 的这个仓库： https://github.com/tscircuit/schematic-autolayout 在线封装查看器 tscircuit 还支持了一个子项目，可以在 Web 中查看元器件符号和封装： https://tscircuit.github.io/kicad-viewer

wKgZPGgR-X6Ac9qIAAJ6D5j_NVs019.png

仓库 & Playground tscircuit 的完整仓库在这里： https://github.com/tscircuit/tscircuit 使用 MIT 的 License，完全开源了，仓库里有不少有意思的项目，比如在线封装查看器、自动布线器等等 如果您不想本地安装，也可以在 Playground 在线体验一下： https://tscircuit.com/editor 结束语 如果您看到这儿，肯定会问：tscircuit 是否会取代现有的 PCB 工具？ 我的观点是目前阶段还不行，毕竟 tscircuit 只能实现一些基础的操作，实现一些简单的板子；如果项目稍微复杂一点，整体效率肯定不如成熟的 EDA 工具。 但 tscircuit 同样是一个非常有意思的项目，它用文本（ts）来描述原理图和PCB，这在 AI 时代是一种很有价值和想象空间的尝试，同时 tscircuit 使用了 React Fiber 技术，实现了基于 Web 的在线渲染，使设计不需要借助其他应用就实现了可视化，与类似 skidl 的项目相比，师一个明显的优势，可以让设计师从基于 GUI 的设计->基于代码的设计过渡得更自然。 那么在不久的未来，AI 是否可以取代人类工程师，进行原理图和 PCB 的设计呢？

Tags: react typescript 原理图