beancount 记账快一年了，在折腾一些数据可视化。用到了这个项目fava-dashboards 可以通过写一个 yaml 配置文件很灵活的做各种图表。但是 yaml 不好写，先不说 yaml 本身的坑, fava-dashboards 里面好几个字段都是大段的JavaScript代码 / Jinja2 模板 ，编辑体验极差。

JavaScript 写着写着，我就想到了写 JSX。开始网上冲浪发现了这篇文章
Considering, Then Abandoning JSX for Strongly-Typed YAML Configuration

文章是 2020 年的，而且最后放弃了。但 2024 年来看有些问题是可以解决的。 比如说 div 的类型干不掉这种。

所以尝试了一下。https://github.com/andreasgerstmayr/fava-dashboards/issues/32

类型并不是标得特别全，够用就行。。。

但是还留了一个疑问 children 的类型似乎不太好使，不知道有没有办法解决？

用万能的 infer 去做推断，推出来就用，推不出来就 never

    hsxfjames children property 上是有类型的， 但是在 JSX 的尖括号内写不符合children对应类型的东西没检查出来。

        0x709394 因为你的 children 不是推出来的类型啊，所以对泛型是没有限制的，命中 optional 了。你把 children 改成必选就会报错了。


          把可选去掉确实就报错了。我还是没明白你说的 infer 推导 /wl。尝试用泛型限制函数入参类型， Dashboards 的 props extends {children: IDashboard[]}

          如果我把一个 Dashboards 塞到 Dashbords 的 children 下， 写成 JSX 没报错，写成函数调用会提示报错

          因为你的 jsx 定义也是不完备的， ts 不认为你的嵌套元素是外层元素的 children 。可以用 assert 断言一下类型，我估计你写成 jsx 形式是符合 children: any 的。

            hsxfjames 仔细读了文档 是返回值的问题。

            ts 知道嵌套元素是外层元素的 children property 因为声明了 JSX. ElementChildrenAttribute
            但是这里的问题是我没有声明JSX.Element 这就导致写成 JSX 形式的东西最后都是 any， 不管function 声明了什么东西都是 any。

            应该要把JSX.Element声明 children 一个通用联合类型，然后所有children props 都声明成 JSX.Element 。 但这样的类型也检查不出啥玩意了

            Playground

              8 天 后
              5 天 后

              嗯，上周和这周都想了想，应该没办法表示出对 children 的限制。

              还有个思路是用 eslint 根据 ast 去扫，具体怎么搞我忘了，比如可以做到扫描出 for ... of 不让用或者 .forEach 不让用这样。或许可以尝试去拿 jsx 的 ast ，把 parent 和 children 的限制关系表示成 json 结构的配置项，这样就足够灵活了（

              © 2018-2025 0xFFFF