5
JSON/JS 对象自动生成 Typescript 的 interface 类型
source link: https://www.v2ex.com/t/845273
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
最近刚好用到了 ts, 但是发现在定义类型的时候总是去对着后端给的结构一个一个对照着写属性比较麻烦，就顺手写了个小工具，可以基于 JSON 格式或者 JS 对象来生成对应的 interface ，有需要的朋友可以尝试一下～
工具在线地址：https://jerryyuanj.github.io/x2interface/
截图：
欢迎 Issue ，PR ，Star ～
26 条回复 • 2022-04-06 22:35:09 +08:00
JerryY 8 小时 52 分钟前
@fox2081 感觉这个把问题复杂化了，我大概想了一下，你这个思路需要考虑这些：
1 ，增量的调用所有接口？还是要根据后端的 API doc 来生成？
2 ，提交发布到 npm-->那我的每次修改都要去 publish & install 吗？
可能理解的有问题，你们有类似的实践吗？
1 ，增量的调用所有接口？还是要根据后端的 API doc 来生成？
2 ，提交发布到 npm-->那我的每次修改都要去 publish & install 吗？
可能理解的有问题，你们有类似的实践吗？
JerryY 8 小时 39 分钟前
@mariaovo 应该分析不出来，这个工具的场景是，你在 devtool 上拿到接口返回的 response 后，直接拷贝过来就能拿到对应的 interface 了。但是枚举类型在这个过程中体现不出来。
fox2081 8 小时 37 分钟前
1.不是调用所有接口，是专门让后端写了个接口把他们这个系统的所有接口类型、地址、参数、注释等都传回来，然后前端脚本会生成 js 和 dts ，调用就是直接`Api.get.[地址]([参数]).then()`这样（实际 get 对应地址的方法是通过 Proxy 实现的，不会因为接口越来越多而造成代码膨胀，dts 用来指路，甚至可以直接生产文档）。
2.发布是为了组里其他人使用，实际是有 CI 的，后端项目构建会触发前端的更新，更新完自动运行脚本发布，用的人本地更新，经常更新确实麻烦，但也比嵌入到项目中要好管理。
这个方案是我自己构思编写并且目前在用的，组员用过都说好，因为依赖后端和实际需求架构，没开源出来
2.发布是为了组里其他人使用，实际是有 CI 的，后端项目构建会触发前端的更新，更新完自动运行脚本发布，用的人本地更新，经常更新确实麻烦，但也比嵌入到项目中要好管理。
这个方案是我自己构思编写并且目前在用的，组员用过都说好，因为依赖后端和实际需求架构，没开源出来
JerryY 8 小时 35 分钟前
@yuthelloworld 我刚回复楼上了，这个工具的场景是，你在 devtool 上拿到接口返回的 response 后，直接拷贝过来就能拿到对应的 interface 了，但是在 vscode 里面我还得去把 response 拷贝过去，反正感觉都差不多，自己写的也多少能学点东西吧，比如我就用第一次尝试了 github action 搞了个自动部署 gh-pages ，效果还行哈哈
（ ps：我的这个工具，也能解析 js 对象哦 :)
（ ps：我的这个工具，也能解析 js 对象哦 :)
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK