TSRX是由 Dominic Gannaway(其成员来自 Inferno、Lexical 和 Ripple 的 React 和 Svelte 的核心团队工程师)创建的一种新的 TypeScript 语言扩展,现在发布发布了 alpha 版,自称它是用于构建声明式 UI 的、与框架无关的 JSX 替代者。
根据X上的发布说明,Gannaway 称其为“JSX 的精神继承者”,并表示 TSRX 是“从 Ripple 中抽取出来的,并实现了框架无关性”。TSRX 将单个.tsrx组件文件编译为多个运行时目标。像@tsrx/react、@tsrx/preact、@tsrx/solid、@tsrx/vue与@tsrx/ripple这样的插件会遍历共享 AST 并为各自运行时生成惯用的输出(包括作用域 CSS),因此可以通过独立的编译器插件为新目标添加支持,而无需修改语言本身。
它的核心思想是将常见的 UI 惯用写法从“约定”提升为“语法”。TSRX 在模板内引入了语句级的控制流,这是通过@if、@for、@switch与@try实现的,并支持 prop 简写、延迟解构与组件作用域样式。组件体使用@{ ... }语句容器,最后产生单一的渲染输出。
按照功能指南所述,作用域样式写在代码块中,编译器会将选择器重写为带唯一 hash 的形式;错误与异步边界通过@try、@catch与@pending以声明式的方式进行表达,而不是借助包裹(wrapper)组件。
在Hacker News上,一位读者写道:
我对这一切都感到着迷。
如果有 oxfmt 插件那就更好了!
另一位用户则持保留意见:
我认为这是一个错误方向。我们需要远离在 JS 中内嵌 XML 的丑陋写法。更希望看到像 Kotlin 风格的构建器或 F#风格的计算表达式。
该发布在 X 上引发了约 130 条回复与 1600 多个赞,并促使 SolidJS 作者 Ryan Carniato撰文“Why TSRX isn’t just your Favourite Templating Language”,分别总结了对 Vue、Svelte、React、Solid 与Mitosis开发者的影响。例如,React 开发者可能因此摆脱部分繁琐的 hook 规则,而 Solid 用户可能觉得这与框架的透明性理念不太一致。
对感兴趣的团队,入门指南覆盖了 Vite、Rspack、Turbopack 与 Bun 的配置,以及 Prettier、ESLint 与用于 CI 的tsrx-tsc类型检查命令。按文件采用的策略使得引入过程更为平滑:正如一篇Medium文章所述,单个.tsrx文件会编译为等价的.tsx组件,因此可以在项目中局部试验而无需整体迁移。该文也提醒读者该项目仍处 alpha 阶段,建议“只进行实验,不要迁移”。
与最接近的同类项目相比,TSRX 既不是像 Solid 或 Vue 那样的运行时,也不是像 Svelte 那样绑定单一编译器的模板方言。它更接近于 JSX 本身,也就是一种可被多个框架消费的语法。
TSRX 是由 Dominic Gannaway 创建的与框架无关的 TypeScript 语言扩展,采用 MIT 许可开源,仍处于 alpha 阶段,未来将承诺更多编译器目标。





