摸鱼系列，一键生成TS+Interface+接口

最新推荐文章于 2024-04-19 22:36:16 发布
最新推荐文章于 2024-04-19 22:36:16 发布
阅读量2.8k 收藏 6
点赞数 2
文章标签： typescript 前端 json ajax 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lamborQAQ/article/details/119782415
版权

这是我参与8月更文挑战的第1天，活动详情查看：8月更文挑战

*今天给大家推出一份新鲜的摸鱼神器，请看噔噔蹬蹬。。。*


搞错了，再来！

不知道大家在用TS的时候，有没有遇到过这种问题，\
明明后端接口里已经定义了类型，为啥咱们还要写Interface，


今天我就带着这个疑问，给大家带来一款摸鱼神器 [API-TO-TS](https://www.npmjs.com/package/api2ts)


摸鱼工具


1.  内部封装了常用的axios，uni-require请求（继续完善中），
1.  自动生成Interface文件

3.  自动生成调用接口调用方法（有啥事不能调一下解决的？）
3.  自动生成接口地址


开始摸鱼


1. 首先咱们先安装起来


 

npm install api2code -g


2. 然后打开YAPI


导出SwaggerJSON文件，放到项目根目录

最低0.47元/天 解锁文章
Muffin-Man
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
直接通过json数据生成interface
caoyan0829的博客
09-19 3069
1.在vscode中安装json2ts插件 2.复制此json { "type": 0, "scale": "300.00", "cashTag": 1, "scaleUnit": 0, "cashUnit": 1, "cash": "1000000.00", "coverLower": 1, "coverUpper": 20, "bonus": "这是第...
json-to-ts-interface:json字符串自动转换为TypeScript interface定义
05-29
json-to-ts-interface 根据json字符串自动生成TypeScript interface定义 使用方式： const interfaceDefinition = require('json-to-ts-interface'); const res = interfaceDefinition(json对象||json字符串, {}) 参数配置： 方法第二个参数接收一个对象，对象内容如下： { globalExportMode: 1, // 默认 don't export 1 = don't export 2 = export 3 = export default lineBreak: '\n', // 换行符 indent: ' ', // 缩进 默认两个空格 interfaceName: 'Res
vscode自动生成ts-interface插件
单眼皮的小熊
03-30 9313
然后新建一个 test.ts 复制一个json数据，按 Ctrl + Alt + V 即可自动生成（从剪切板生成）
来一波一键生成TS模型及接口方法
最新发布
YYH1214的博客
04-19 1748
改好后我重新发了一个包，可以体验一下使用。
swagger 文档自动生成接口代码+ts类型
weixin_43294560的博客
11-16 671
【代码】swagger 文档自动生成接口代码+ts类型。
读取swagger接口文档、自动生成前端ts或js代码
weixin_44241402的博客
02-10 6274
平时在和后端对接时，总是要把后端swagger声明好的类型在ts中再实现一遍，写一堆interface；今天推荐一个库，可以根据swagger文档，直接生成typescript 或 javascript代码，并且有良好的代码提示。由于也自动生成了相应的declare文件，所以就算是js也会有很好的代码提示。
vue3+ts+vite4脚手架
07-10
Vue3+TS+Vite4脚手架是一个现代化的前端开发环境，专为构建高效、高性能的Web应用而设计。这个脚手架包含了Vue.js的最新版本（Vue3）、TypeScript的支持以及Vite4的快速开发工具。让我们深入探讨这些核心组件以及...
vue3+ts+vite+router+vuex+api请求封装
12-29
Vue3+TS+Vite+Router+Vuex+API请求封装是现代前端开发中的一个典型组合，用于构建高效、可维护的后台管理系统。这个脚手架提供了完整的开发环境配置和基础架构，使得开发者能够快速搭建后台应用。下面将详细介绍这个...
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
记一次用ts+vuecli4重构项目的实现
10-15
VueCLI4是Vue.js开发的一个强大脚手架，它提供了快速构建项目、自动化配置以及一系列可选插件的功能。将VueCLI2的项目升级到VueCLI4，并结合TypeScript，可以显著提升项目的可维护性和类型安全性。 一、项目搭建 1...
typescript-interface-generator:生成数据库表的接口
04-02
表到界面 生成打字稿项目的数据库表的接口。（当前仅支持mysql） 用法 安装 (sudo) npm i table-to-interface -g 选项 -v ,--version output the version number -h, --host [string] IP adress/Hostname for database server (default: " 127.0.0.1 " ) -p, --port [number] Port number for database server (default: 3306) -d, --database < string> Database name -u, --user [string] Username for database serve
使用quicktype 生成ts接口
weCat_s的博客
01-13 1008
首先 接触ts一段时间发现最费时间的就是写接口这些，最近呢。。。了解到一可以将json转为ts接口的工具，怎么说呢？哎呀 真香 废话不多说，进入主题 quicktype 就是它，一个json转ts接口的工具，当然这只是众多功能之一 官网介绍 首先要使用它，你需要先安装，懂得都懂 npm install -g quicktype 然后已知接口是：https://ecomm-products.modus.workers.dev , 可以通过json工具查看数据格式 然后cd 进入项目目录 精髓来了，
Pont 自动生成TypeScript接口代码，自动生成类型与后端对齐
努力搬砖的博客
05-12 1228
可参考https://github.com/alibaba/pont/blob/master/docs/customizedPont.md​ Pont是可以可以作为后端和前端一个良好定义接口规范的工具。相对于市面上其他的工具，他优势在于使用方便，可以配置模板自动化生成接口代码。目前我自己实践的是，在项目搭建初期，假如后端可以通过Swagger配合，直接就可以将整个生成的代码目录通过config.json配置到src的目录下，后端假如更新了接口的内容，一键生成同步即可。
vscode插件开发之Swagger生成Ts
a1196324866的博客
11-23 2835
vscode插件开发之Swagger生成Ts。当后端同学给到我们Swagger接口文档的时候，是不是在为要写接口类型烦恼，为了偷懒，那么就any吧。any一时爽，同事泪两行。为了高质量的偷懒，来开发个插件。利用SwaggerApiJson和vscode的webVIew功能。
在线JSON转io-ts工具
Linux,Java,SpringBoot,Python,Lua略知一点
12-17 997
在线JSON转io-ts工具 在线JSON转io-ts工具 本工具可以将JSON对象转换成io-ts,支持复制和下载.本工具可以将JSON对象转换成io-ts,支持复制和下载. https://tooltt.com/json2io-ts/
TS中 Interface 与 Type 的区别
刘运召的博客
07-27 3983
TS 中 Interface 与 Type 的区别 相同点： 1. 都可以描述 对象、函数，都可以扩展 不同点： 1. 接口可以 extends 和 implements ，type则不可以(type可以通过交叉类型实现 extends 行为) 2. 接口可以声明合并，type则不可以 2. type alias 可以声明基本类型别名，联合类型，元组等类型 2.1. type 可以定义字符串字面量联合类型 2.2. type........
TS 代码生成工具
Java小白白的博客
04-09 1324
一个 TypeScript 代码生成工具，可以根据 PostgreSQL 数据库表结构自动生成 TypeScript 接口文件。
TypeScript详解七：接口（interface）
to_the_Future的博客
07-30 3026
本篇文章主要记录ts的接口，下次再见。
手拉手带你掌握TS中的语法细节：联合类型 |、type、interface、 交叉类型 &、类型断言as、 非空类型断言 ! 、字面量类型、类型缩写和函数类型：调用签名、构造签名、可选参数、this
weixin_44995391的博客
07-04 3751
手拉手带你掌握TS中的语法细节：联合类型 |、type、interface、 交叉类型 &、类型断言as、 非空类型断言 ! 、字面量类型、类型缩写和函数类型：调用签名、构造签名、可选参数、this
vue3 ＋ts 接口封装
07-28
对于Vue3和TypeScript，接口封装是一个很好的实践。通过使用接口，我们可以定义Vue组件的props、data、methods等属性和方法的类型，以提高代码的可读性和可维护性。 下面是一个简单的示例，展示如何在Vue3中使用TypeScript进行接口封装： ```typescript // 定义一个接口，用于指定组件的props类型 interface MyComponentProps { message: string; } // 定义Vue组件 const MyComponent = defineComponent({ props: { message: { type: String, required: true } }, setup(props: MyComponentProps) { // 使用props.message console.log(props.message); // 返回渲染函数 return () => { return h('div', props.message); }; } }); ``` 在上面的示例中，我们首先定义了一个接口`MyComponentProps`，用于指定组件`MyComponent`的props类型。然后，在组件的`props`选项中使用了这个接口来定义`message`属性的类型。在`setup`函数中，我们可以通过参数`props`来访问传入的props，并使用它们。 这只是一个简单的示例，你可以根据实际需求在接口中定义更多的属性类型。通过使用接口封装，你可以更好地利用TypeScript的类型检查功能，减少潜在的bug，并提高代码的可维护性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值