推荐关注
› Meteor
› JSLint - a JavaScript code quality tool
› jsFiddle
› D3.js
› WebStorm
推荐书目
› JavaScript 权威指南第 5 版
› Closure: The Definitive Guide
› Closure: The Definitive Guide
JSON/JS 对象自动生成 Typescript 的 interface 类型
JerryY · 2022-04-06 16:28:50 +08:00 · 4177 次点击这是一个创建于 955 天前的主题，其中的信息可能已经有所发展或是发生改变。
最近刚好用到了 ts, 但是发现在定义类型的时候总是去对着后端给的结构一个一个对照着写属性比较麻烦，就顺手写了个小工具，可以基于 JSON 格式或者 JS 对象来生成对应的 interface ，有需要的朋友可以尝试一下～
工具在线地址：https://jerryyuanj.github.io/x2interface/
截图：
欢迎 Issue ，PR ，Star ～
30 条回复 • 2022-04-07 15:31:45 +08:00
 |
1
Hypn0s 2022-04-06 16:36:55 +08:00
惊人的工作！
可以考虑支持一下可选参数 |
 |
2
noe132 2022-04-06 16:39:59 +08:00 via Android
|
 |
5
fgwmlhdkkkw 2022-04-06 18:12:22 +08:00
让他帮你生成不行吗？
|
 |
6
fox2081 2022-04-06 18:17:42 +08:00
让后端写接口，然后前端获取到所有接口的传入传出类型定义并直接生成接口调用方法，再提交并发布到 npm ，一步到位
|
 |
7
JerryY OP @fgwmlhdkkkw 他指谁？楼上说的工具吗？
|
 |
8
caisanli 2022-04-06 18:25:13 +08:00 via iPhone
如果你们公司用 yapi 接口文档的话 可以使用 auto-service 生成 model
|
|
9
JerryY OP @fox2081 感觉这个把问题复杂化了，我大概想了一下，你这个思路需要考虑这些：
1 ，增量的调用所有接口？还是要根据后端的 API doc 来生成？ 2 ，提交发布到 npm-->那我的每次修改都要去 publish & install 吗？ 可能理解的有问题，你们有类似的实践吗？ |
|
10
JerryY OP @caisanli 没有 帮朋友弄的一个项目而已 因为项目本身用到了 ts 我在写的过程中遇到了这样的问题 所以趁着有时间搞了个小工具而已～
|
 |
11
guisheng 2022-04-06 18:30:10 +08:00 via iPhone
最近正好在学习 ts 关注一下。
|
 |
12
mariaovo 2022-04-06 18:30:24 +08:00
如果有个属性是枚举的话，怎么体现呢
|
|
13
fgwmlhdkkkw 2022-04-06 18:32:34 +08:00
@JerryY #7 后端
|
 |
14
yuthelloworld 2022-04-06 18:39:22 +08:00
|
|
15
JerryY OP @mariaovo 应该分析不出来，这个工具的场景是，你在 devtool 上拿到接口返回的 response 后，直接拷贝过来就能拿到对应的 interface 了。但是枚举类型在这个过程中体现不出来。
|
|
16
JerryY OP @fgwmlhdkkkw 让后端帮前端写类型定义，听着就比较有话题哈哈哈 [狗头
|
|
17
fox2081 2022-04-06 18:42:20 +08:00
1.不是调用所有接口，是专门让后端写了个接口把他们这个系统的所有接口类型、地址、参数、注释等都传回来，然后前端脚本会生成 js 和 dts ，调用就是直接`Api.get.[地址]([参数]).then()`这样（实际 get 对应地址的方法是通过 Proxy 实现的，不会因为接口越来越多而造成代码膨胀，dts 用来指路，甚至可以直接生产文档）。
2.发布是为了组里其他人使用，实际是有 CI 的，后端项目构建会触发前端的更新，更新完自动运行脚本发布，用的人本地更新，经常更新确实麻烦，但也比嵌入到项目中要好管理。 这个方案是我自己构思编写并且目前在用的，组员用过都说好，因为依赖后端和实际需求架构，没开源出来 |
|
18
JerryY OP @yuthelloworld 我刚回复楼上了，这个工具的场景是，你在 devtool 上拿到接口返回的 response 后，直接拷贝过来就能拿到对应的 interface 了，但是在 vscode 里面我还得去把 response 拷贝过去，反正感觉都差不多，自己写的也多少能学点东西吧，比如我就用第一次尝试了 github action 搞了个自动部署 gh-pages ，效果还行哈哈
（ ps：我的这个工具，也能解析 js 对象哦 :) |
|
19
JerryY OP @fox2081 对，我提的第一点应该是从后端出发的，有一些文档生成工具可以用，也可以根据对应的 schema 来做其他的转换，比如这里的生成 interface 。但是对于第二点我不太同意，感觉把一个接口的功能弄的有点复杂了？每个人每天都要去更新。。。可能我们立场不一样吧，我实际工作也没有用过哈哈哈。
|
 |
20
Kilerd 2022-04-06 21:41:47 +08:00
|
 |
21
wunonglin 2022-04-06 21:51:36 +08:00
后端写 swagger ，前端 ng 生成 service
|
|
22
wunonglin 2022-04-06 21:52:18 +08:00
另外建议用 class ，而不是 interface
|
 |
25
CoderLife 2022-04-06 22:13:34 +08:00
|
 |
26
erguotou521 2022-04-06 22:35:09 +08:00 via Android
|
|
27
JerryY OP @erguotou521 感觉场景不太一样。。
|
 |
28
ymcz852 2022-04-07 14:53:08 +08:00
看了这帖子学到了
好奇有没有办法将 Knife4j 生成的文档里的请求参数生成 ts 类型  |
|
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|| |
Select Language