8

JSON/JS 对象自动生成 Typescript 的 interface 类型

 3 years ago
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.
neoserver,ios ssh client

V2EX  ›  JavaScript

JSON/JS 对象自动生成 Typescript 的 interface 类型

  JerryY · 10 小时 50 分钟前 · 635 次点击

最近刚好用到了 ts, 但是发现在定义类型的时候总是去对着后端给的结构一个一个对照着写属性比较麻烦，就顺手写了个小工具，可以基于 JSON 格式或者 JS 对象来生成对应的 interface ，有需要的朋友可以尝试一下～

工具在线地址：https://jerryyuanj.github.io/x2interface/

截图：screenshot

欢迎 Issue ，PR ，Star ～

26 条回复  •  2022-04-06 22:35:09 +08:00

Hypn0s

Hypn0s      10 小时 42 分钟前

惊人的工作！

可以考虑支持一下可选参数

JerryY

JerryY      10 小时 34 分钟前

@Hypn0s 后面有时间会慢慢完善的，这个前后花了就几个小时，就实现了一些基础功能而已～

JerryY

JerryY      10 小时 31 分钟前

@noe132 谢谢～这也就是我一时的想法，想着就做了，也没查一些东西啥的，主要是想找点事干😂

fgwmlhdkkkw

fgwmlhdkkkw      9 小时 6 分钟前

让他帮你生成不行吗？

fox2081

fox2081      9 小时 1 分钟前

让后端写接口，然后前端获取到所有接口的传入传出类型定义并直接生成接口调用方法，再提交并发布到 npm ，一步到位

JerryY

JerryY      8 小时 56 分钟前

@fgwmlhdkkkw 他指谁？楼上说的工具吗？

caisanli

caisanli      8 小时 54 分钟前 via iPhone

如果你们公司用 yapi 接口文档的话 可以使用 auto-service 生成 model

JerryY

JerryY      8 小时 52 分钟前

@fox2081 感觉这个把问题复杂化了，我大概想了一下，你这个思路需要考虑这些：

1 ，增量的调用所有接口？还是要根据后端的 API doc 来生成？
2 ，提交发布到 npm-->那我的每次修改都要去 publish & install 吗？

可能理解的有问题，你们有类似的实践吗？

JerryY

JerryY      8 小时 51 分钟前

@caisanli 没有 帮朋友弄的一个项目而已 因为项目本身用到了 ts 我在写的过程中遇到了这样的问题 所以趁着有时间搞了个小工具而已～

guisheng

guisheng      8 小时 49 分钟前 via iPhone

最近正好在学习 ts 关注一下。

mariaovo

mariaovo      8 小时 48 分钟前

如果有个属性是枚举的话，怎么体现呢

JerryY

JerryY      8 小时 39 分钟前

@mariaovo 应该分析不出来，这个工具的场景是，你在 devtool 上拿到接口返回的 response 后，直接拷贝过来就能拿到对应的 interface 了。但是枚举类型在这个过程中体现不出来。

JerryY

JerryY      8 小时 37 分钟前

@fgwmlhdkkkw 让后端帮前端写类型定义，听着就比较有话题哈哈哈 [狗头

fox2081

fox2081      8 小时 37 分钟前

1.不是调用所有接口，是专门让后端写了个接口把他们这个系统的所有接口类型、地址、参数、注释等都传回来，然后前端脚本会生成 js 和 dts ，调用就是直接`Api.get.[地址]([参数]).then()`这样（实际 get 对应地址的方法是通过 Proxy 实现的，不会因为接口越来越多而造成代码膨胀，dts 用来指路，甚至可以直接生产文档）。
2.发布是为了组里其他人使用，实际是有 CI 的，后端项目构建会触发前端的更新，更新完自动运行脚本发布，用的人本地更新，经常更新确实麻烦，但也比嵌入到项目中要好管理。

这个方案是我自己构思编写并且目前在用的，组员用过都说好，因为依赖后端和实际需求架构，没开源出来

JerryY

JerryY      8 小时 35 分钟前

@yuthelloworld 我刚回复楼上了，这个工具的场景是，你在 devtool 上拿到接口返回的 response 后，直接拷贝过来就能拿到对应的 interface 了，但是在 vscode 里面我还得去把 response 拷贝过去，反正感觉都差不多，自己写的也多少能学点东西吧，比如我就用第一次尝试了 github action 搞了个自动部署 gh-pages ，效果还行哈哈

（ ps：我的这个工具，也能解析 js 对象哦 :)

JerryY

JerryY      8 小时 28 分钟前

@fox2081 对，我提的第一点应该是从后端出发的，有一些文档生成工具可以用，也可以根据对应的 schema 来做其他的转换，比如这里的生成 interface 。但是对于第二点我不太同意，感觉把一个接口的功能弄的有点复杂了？每个人每天都要去更新。。。可能我们立场不一样吧，我实际工作也没有用过哈哈哈。

wunonglin

wunonglin      5 小时 27 分钟前

后端写 swagger ，前端 ng 生成 service

wunonglin

wunonglin      5 小时 27 分钟前

另外建议用 class ，而不是 interface

JerryY

JerryY      5 小时 11 分钟前

@wunonglin 这个 interface 不是 java 的那个 interface

JerryY

JerryY      5 小时 7 分钟前

@Kilerd 我去瞅瞅

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK