0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

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

KiCad 来源:KiCad 作者:KiCad 2025-04-30 18:18 次阅读
加入交流群
微信小助手二维码

扫码添加小助手

加入工程师交流群

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

wKgZPGgR-XyAZk-DAAK9z75WtFE475.png

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

什么是 tscircuit?

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

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

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

wKgZPGgR-XyAeCEeAALQhDMCQdk041.png

样例

一个 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(             )}

对应的原理图:

wKgZPGgR-XyAVchIAABUcnus1t8365.png

对应的 PCB

wKgZPGgR-XyAUxDkAABMePTqRnE515.png

渲染的 3D:

wKgZPGgR-X2APZZPAAYKV7Qo0UM983.png

如何使用?

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

npminstall -g tscircuittsci dev

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

wKgZPGgR-X2AVnhOAAK96msH80U634.png

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

tscircuit 目前支持将立创edaKiCad 的器件库导入成 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 (                             )  } )})functiongrid(opts: {sizeX:numbersizeY: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 的设计呢?

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • KiCAD
    +关注

    关注

    6

    文章

    329

    浏览量

    10535
  • 电路开发
    +关注

    关注

    0

    文章

    5

    浏览量

    3766
收藏 人收藏
加入交流群
微信小助手二维码

扫码添加小助手

加入工程师交流群

    评论

    相关推荐
    热点推荐

    电子发烧友电子设计周报》聚焦硬科技领域核心价值 第10期:2025.05.6--2025.05.9

    华秋发行版支持 AI Copilot 了? 4、tscircuit - 电路开发React 范式
    发表于 05-09 19:26

    电子发烧友电子设计周报》聚焦硬科技领域核心价值 第11期:2025.05.12--2025.05.16

    9.0.2发布:AI Copilot助力设计效率提升 4、tscircuit - 电路开发React
    发表于 05-16 19:47

    电子发烧友电子设计周报》聚焦硬科技领域核心价值 第13期:2025.05.26--2025.05.30

    “轻松上阵”? 4、tscircuit - 电路开发React 范式
    发表于 05-30 19:39

    Vue3 + React18 + TS4入门到实战 系统学习3大热门技术 | 更新完结

    ,Vue3、React18与TypeScript4的相继问世,共同塑造了现代前端开发的新范式。这三大技术栈的演进,不仅带来了性能上的显著提升,更在
    发表于 03-30 15:18

    优化React开发体验

    从零构建React开发环境(四)
    发表于 04-01 16:00

    React优势,react学习笔记分享

    1、React优势react适合大型团队的开发,每个人负责自己的组件,开发完毕之后由react渲染到前端页面
    发表于 10-27 06:53

    安信Windows驱动开发教程:适用于 Windows 的 React Native

    安信Windows驱动开发教程:适用于 Windows 的 React NativeReact Native是 Facebook 的一个开发平台,允许构建跨平台应用程序。
    发表于 09-09 17:54

    使用React Native构建OS X桌面应用

    来自俄罗斯新西伯利亚的开发者Dima日前在GitHub上开源了一款名为React Native Desktop的开发利器,可以让开发者使用React
    发表于 10-11 09:36 0次下载
    使用<b class='flag-5'>React</b> Native<b class='flag-5'>构建</b>OS X桌面应用

    详谈 Vue 和 React 的八大区别

    为什么 React 不精确监听数据变化呢 ?这是因为 Vue 和 React 设计理念上的区别, Vue 使用的是可变数据,而React更强调数据的不可变。所以应该说没有好坏之分,Vue更加简单,而
    的头像 发表于 09-15 15:27 8978次阅读
    详谈 Vue 和 <b class='flag-5'>React</b> 的八大区别

    React-in-patterns React开发设计模式/技术列表

    react-in-patterns.zip
    发表于 04-19 11:28 0次下载
    <b class='flag-5'>React</b>-in-patterns <b class='flag-5'>React</b><b class='flag-5'>开发</b>设计模式/技术列表

    React Sight React组件层次可视化工具

    ./oschina_soft/React-Sight.zip
    发表于 05-18 15:36 4次下载
    <b class='flag-5'>React</b> Sight <b class='flag-5'>React</b>组件层次可视化<b class='flag-5'>工具</b>

    React Native for Windows使用React构建原生Windows应用

    ./oschina_soft/react-native-windows.zip
    发表于 06-22 10:06 1次下载
    <b class='flag-5'>React</b> Native for Windows使用<b class='flag-5'>React</b><b class='flag-5'>构建</b>原生Windows应用

    关于“React和Vue该用哪个”

    React 有函数式组件的和类组件两种写法,鉴于 class 写法较老,且这种写法不利于构建工具的 Tree-shaking ,可能导致构建产物体积增加,而函数式组件的 hooks 写法更符合未来的潮流 , 所以类组件在此也不做
    的头像 发表于 11-10 10:15 1674次阅读

    React正在经历Angular.js的时刻吗?

    文章指出,React 的核心仍然是一个视图库,这一点没有改变:使用 React 服务器组件,您仍然可以使用 JSX 构建组件,并渲染作为 props 传递的动态内容。但是,除此之外,服务器组件中
    的头像 发表于 07-17 16:27 1113次阅读
    <b class='flag-5'>React</b>正在经历Angular.js的时刻吗?

    使用SSR构建React应用的步骤

    App等脚手架工具快速创建一个React项目。 根据需要配置Babel、Webpack等构建工具,以确保项目能够正确编译和运行。 安装必要的依赖 : 安装React
    的头像 发表于 11-18 11:30 1440次阅读