V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
JerryY
V2EX  ›  JavaScript

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

  •  
  •   JerryY · 2022-04-06 16:28:50 +08:00 · 3695 次点击
    这是一个创建于 722 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    截图:screenshot

    欢迎 Issue ,PR ,Star ~

    30 条回复    2022-04-07 15:31:45 +08:00
    Hypn0s
        1
    Hypn0s  
       2022-04-06 16:36:55 +08:00
    惊人的工作!

    可以考虑支持一下可选参数
    noe132
        2
    noe132  
       2022-04-06 16:39:59 +08:00 via Android
    JerryY
        3
    JerryY  
    OP
       2022-04-06 16:44:41 +08:00
    @Hypn0s 后面有时间会慢慢完善的,这个前后花了就几个小时,就实现了一些基础功能而已~
    JerryY
        4
    JerryY  
    OP
       2022-04-06 16:47:31 +08:00
    @noe132 谢谢~这也就是我一时的想法,想着就做了,也没查一些东西啥的,主要是想找点事干😂
    fgwmlhdkkkw
        5
    fgwmlhdkkkw  
       2022-04-06 18:12:22 +08:00
    让他帮你生成不行吗?
    fox2081
        6
    fox2081  
       2022-04-06 18:17:42 +08:00
    让后端写接口,然后前端获取到所有接口的传入传出类型定义并直接生成接口调用方法,再提交并发布到 npm ,一步到位
    JerryY
        7
    JerryY  
    OP
       2022-04-06 18:23:16 +08:00
    @fgwmlhdkkkw 他指谁?楼上说的工具吗?
    caisanli
        8
    caisanli  
       2022-04-06 18:25:13 +08:00 via iPhone
    如果你们公司用 yapi 接口文档的话 可以使用 auto-service 生成 model
    JerryY
        9
    JerryY  
    OP
       2022-04-06 18:26:43 +08:00
    @fox2081 感觉这个把问题复杂化了,我大概想了一下,你这个思路需要考虑这些:

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

    可能理解的有问题,你们有类似的实践吗?
    JerryY
        10
    JerryY  
    OP
       2022-04-06 18:27:41 +08:00
    @caisanli 没有 帮朋友弄的一个项目而已 因为项目本身用到了 ts 我在写的过程中遇到了这样的问题 所以趁着有时间搞了个小工具而已~
    guisheng
        11
    guisheng  
       2022-04-06 18:30:10 +08:00 via iPhone
    最近正好在学习 ts 关注一下。
    mariaovo
        12
    mariaovo  
       2022-04-06 18:30:24 +08:00
    如果有个属性是枚举的话,怎么体现呢
    fgwmlhdkkkw
        13
    fgwmlhdkkkw  
       2022-04-06 18:32:34 +08:00
    @JerryY #7 后端
    yuthelloworld
        14
    yuthelloworld  
       2022-04-06 18:39:22 +08:00
    JerryY
        15
    JerryY  
    OP
       2022-04-06 18:39:28 +08:00
    @mariaovo 应该分析不出来,这个工具的场景是,你在 devtool 上拿到接口返回的 response 后,直接拷贝过来就能拿到对应的 interface 了。但是枚举类型在这个过程中体现不出来。
    JerryY
        16
    JerryY  
    OP
       2022-04-06 18:41:52 +08:00
    @fgwmlhdkkkw 让后端帮前端写类型定义,听着就比较有话题哈哈哈 [狗头
    fox2081
        17
    fox2081  
       2022-04-06 18:42:20 +08:00
    1.不是调用所有接口,是专门让后端写了个接口把他们这个系统的所有接口类型、地址、参数、注释等都传回来,然后前端脚本会生成 js 和 dts ,调用就是直接`Api.get.[地址]([参数]).then()`这样(实际 get 对应地址的方法是通过 Proxy 实现的,不会因为接口越来越多而造成代码膨胀,dts 用来指路,甚至可以直接生产文档)。
    2.发布是为了组里其他人使用,实际是有 CI 的,后端项目构建会触发前端的更新,更新完自动运行脚本发布,用的人本地更新,经常更新确实麻烦,但也比嵌入到项目中要好管理。

    这个方案是我自己构思编写并且目前在用的,组员用过都说好,因为依赖后端和实际需求架构,没开源出来
    JerryY
        18
    JerryY  
    OP
       2022-04-06 18:44:11 +08:00
    @yuthelloworld 我刚回复楼上了,这个工具的场景是,你在 devtool 上拿到接口返回的 response 后,直接拷贝过来就能拿到对应的 interface 了,但是在 vscode 里面我还得去把 response 拷贝过去,反正感觉都差不多,自己写的也多少能学点东西吧,比如我就用第一次尝试了 github action 搞了个自动部署 gh-pages ,效果还行哈哈

    ( ps:我的这个工具,也能解析 js 对象哦 :)
    JerryY
        19
    JerryY  
    OP
       2022-04-06 18:50:29 +08:00
    @fox2081 对,我提的第一点应该是从后端出发的,有一些文档生成工具可以用,也可以根据对应的 schema 来做其他的转换,比如这里的生成 interface 。但是对于第二点我不太同意,感觉把一个接口的功能弄的有点复杂了?每个人每天都要去更新。。。可能我们立场不一样吧,我实际工作也没有用过哈哈哈。
    Kilerd
        20
    Kilerd  
       2022-04-06 21:41:47 +08:00
    https://transform.tools/json-to-rust-serde

    来看看这个,你想要的都有
    wunonglin
        21
    wunonglin  
       2022-04-06 21:51:36 +08:00
    后端写 swagger ,前端 ng 生成 service
    wunonglin
        22
    wunonglin  
       2022-04-06 21:52:18 +08:00
    另外建议用 class ,而不是 interface
    JerryY
        23
    JerryY  
    OP
       2022-04-06 22:07:39 +08:00
    @wunonglin 这个 interface 不是 java 的那个 interface
    JerryY
        24
    JerryY  
    OP
       2022-04-06 22:11:38 +08:00
    @Kilerd 我去瞅瞅
    CoderLife
        25
    CoderLife  
       2022-04-06 22:13:34 +08:00
    erguotou521
        26
    erguotou521  
       2022-04-06 22:35:09 +08:00 via Android
    JerryY
        27
    JerryY  
    OP
       2022-04-07 14:40:28 +08:00
    @erguotou521 感觉场景不太一样。。
    ymcz852
        28
    ymcz852  
       2022-04-07 14:53:08 +08:00
    看了这帖子学到了
    好奇有没有办法将 Knife4j 生成的文档里的请求参数生成 ts 类型
    ymcz852
        29
    ymcz852  
       2022-04-07 14:56:38 +08:00
    复制出来是这个样子的

    | 参数名称 | 参数说明 | in | 是否必须 | 数据类型 | schema |
    | -------- | -------- | ----- | -------- | -------- | ------ |
    |im-token|im-token|header|false|string||
    |userPhone||query|false|string||
    |userUuid||query|false|string||
    JerryY
        30
    JerryY  
    OP
       2022-04-07 15:31:45 +08:00
    @ymcz852 思路应该是 csv -> json -> interface 这样?按理说只要是能解析出来的格式都可以做转换,楼上贴的链接基本都是这样的思路。我这个实现也很简单,就是简单的转换 JSON 再拼接 interface 字符串而已~
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1000 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 72ms · UTC 19:54 · PVG 03:54 · LAX 12:54 · JFK 15:54
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.