自写一个函数将js对象转为Ts的Interface接口

如今的前端开发typescript
已经成为一项必不可以少的技能了,但是频繁的定义Interface接口会给我带来许多工作量,我想了想如何来减少这些非必要且费时的工作量呢,于是决定写一个函数,将对象放进它自动帮我们转换成Interface接口,接下来就是复制粘贴的工作了,当然了如果需要调整》我们可以在手动调一下,比起一个个的定义花费的时间肯定是短了很多的。我们还以自己去完善这个函数,以达到更多你想要的效果,动手能力强的小伙伴可以尝试起来了。

可以将以下代码放入ts文件中:

// 自写一个函数将js对象转为ts接口 (参数1 js对象,参数2 ts接口名)
    function generateInterface(
      obj: any,
      interfaceName: string = 'myGeneratedInterface'
    ): string {
      const getType = (value: any): string => {
        if (value === null) {
          return 'any'
        } else if (Array.isArray(value)) {
          const arrayItemType = value.length > 0 ? getType(value[0]) : 'any'
          return `${arrayItemType}[]`
        } else if (typeof value === 'object') {
          // interfaceName + 'Item'
          return generateInterface(value, '')
        } else {
          if (typeof value === 'function') {
            return 'Function'
          }
          return typeof value
        }
      }

      const properties: string[] = []

      for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
          const value = obj[key]
          const type = getType(value)
          properties.push(`${key}: ${type};`)
        }
      }
      // 最外层的添加 interface ${interfaceName}
      let interfaceCode
      if (interfaceName) {
        interfaceCode = `interface ${interfaceName} {
${properties.join('\n    ')}
}`
      } else {
        interfaceCode = `{
${properties.join('\n    ')}
}`
      }
      return interfaceCode
    }
    // 用该对象测试
    const myObject = {
      name: 'John',
      age: 18,
      isStudent: true,
      hobbies: ['reading', 'coding'],
      address: {
        city: 'Example City',
        zipCode: 12345,
        hobbies2: ['reading', 'coding'],
        isStudent2: true,
      },
      nullValue: null,
    }
    // 打印测试下转换的结果如何
    console.log(generateInterface(myObject, 'Person'))
    // 最终打印结果:
    // interface Person {
    //     name: string;
    //     age: number;
    //     isStudent: boolean;
    //     hobbies: string[];
    //     address: {
    //         city: string;
    //         zipCode: number;
    //         hobbies2: string[];
    //         isStudent2: boolean;
    //     };
    //     nullValue: any;
    // }

看一下控制台呈现的结果:

看起来还不错,控制台输出的这段代码复制粘贴 就可以使用了。

欢迎关注我的原创文章:小伙伴们!我是一名热衷于前端开发的作者,致力于分享我的知识和经验,帮助其他学习前端的小伙伴们。在我的文章中,你将会找到大量关于前端开发的精彩内容。

学习前端技术是现代互联网时代中非常重要的一项技能。无论你是想成为一名专业的前端工程师,还是仅仅对前端开发感兴趣,我的文章将能为你提供宝贵的指导和知识。

在我的文章中,你将会学到如何使用HTML、CSS和JavaScript创建精美的网页。我将深入讲解每个语言的基础知识,并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者,我的文章都能够满足你的学习需求。

此外,我还会分享一些关于前端开发的最新动态和行业趋势。互联网技术在不断发展,新的框架和工具层出不穷。通过我的文章,你将会了解到最新的前端技术趋势,并了解如何应对这些变化。

我深知学习前端不易,因此我将尽力以简洁明了的方式解释复杂的概念,并提供一些易于理解的实例和案例。我希望我的文章能够帮助你更快地理解前端开发,并提升你的技能。

如果你想了解更多关于前端开发的内容,不妨关注我的原创文章。我会不定期更新,为你带来最新的前端技术和知识。感谢你的关注和支持,我们一起探讨交流技术共同进步,期待与你一同探索前端开发的奇妙世界!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/199857.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

oracle免费资源 终止实例 以及新建一台实例的折腾记录

事情的背景是这样的,我的一台oracle小鸡,不太好用的样子,有时候SSH连不上,有时候莫名其妙卡住。所以我就想把它重新安装一下系统,恢复成最初的样子。 然后在网上查资料,是有办法把系统重装一下的。但是略微…

numpy知识库:np.random.randint()用法及其使用场景举例

randint函数解析 import numpy as np# 【随机】返回[0,5)范围内的一个整数 # [0, 5) --> 左闭右开区间 int_a np.random.randint(5) # int_a 可能为 0、1、2、3、4 int_a np.random.randint(low5) # int_a 可能为 0、1、2、3、4# 【随机】返回[1,5)范围内的一个整数 int_…

分布式事务-两阶段提交2PC

2PC协议就是两阶段提交,用来解决分布式事务,分为两个阶段,分别为Prepare和Commit,也是PC由来。 第一阶段Prepare 提交事务请求 如图所示,主要流程有以下三个方面 询问:事务协调者(Manager)向所有的事务参与…

如何拥有免费的docker镜像仓库

shigen日更文章的博客写手,擅长Java、python、vue、shell等编程语言和各种应用程序、脚本的开发。记录成长,分享认知,留住感动。 hello,伙伴们,最近在研究devops的事情,发现了很有意思的东西。 就是我们所有…

基于SSM的电商购物网站设计与实现

末尾获取源码 开发语言:Java Java开发工具:JDK1.8 后端框架:SSM 前端:Vue 数据库:MySQL5.7和Navicat管理工具结合 服务器:Tomcat8.5 开发软件:IDEA / Eclipse 是否Maven项目:是 目录…

贵州乾辰谷材 以科技创新引领绝缘材料领域的新发展

贵州乾辰谷材科技有限公司,这家于2018年10月18日成立的贵州本地企业,已经在绝缘材料领域崭露头角。乾辰谷材不仅在成立短短几年内实现了快速成长,更以其科技创新能力和卓越产品性能赢得了业界和用户的广泛赞誉。 乾辰谷材的创始人王金斗先生&…

社区团购小程序源码系统 带会员功能+会员积分+会员分组+会员等级 附带部署与搭建的完整教程

社区团购小程序源码系统是一种基于微信小程序的电商系统,它通过社交电商模式,将社区居民、商家和平台紧密结合,实现便捷的线上购物和线下社区服务。该系统支持会员功能、会员积分、会员分组和会员等级等功能,为用户提供更加个性化…

SeaTunnel引擎下的SQL Server CDC解决方案:构建高效数据管道

在快速发展的数据驱动时代,实时数据处理已经成为企业决策和运营的关键因素。特别是在处理来自各种数据源的信息时,如何确保数据的及时、准确和高效同步变得尤为重要。本文着重介绍了如何利用 SqlServer CDC 源连接器在 SeaTunnel 框架下实现 SQL Server …

Spring Boot进行单元测试,一个思路解决重启低效难题!

所谓单元测试就是对功能最小粒度的测试,落实到JAVA中就是对单个方法的测试。 junit可以完成单个方法的测试,但是对于Spring体系下的web应用的单元测试是无能为力的。因为spring体系下的web应用都采用了MVC三层架构,依托于IOC,层级…

【AIGC】关于Prompt你必须知道的特性

代码和数据:https://github.com/tonyzhaozh/few-shot-learning 一、实践验证的大模型的特性 1. 大模型的偏差 示例:(文本的情感分析:一句话->P(积极)或者N(消极) Input: I hate this movie. Sentiment: Negativ…

线下渠道应该如何控价

品牌渠道中的问题,大多跟价格有关,比如低价、窜货、假货,治理好这些价格问题,也就是在解决渠道中的低价问题,所以要先了解价格,再进行治理,这样的流程化操作,可以使品牌管控好渠道价…

unity的多语言配置工具

demo下载:https://github.com/JSumC/LanguageExcel using System; using System.Collections.Generic; using System.IO; using System.Linq; using OfficeOpenXml; using UnityEngine; using UnityEngine.UI; namespace LanguageExcel {public class LETool : MonoBehaviour{…

cpu飙升问题排查以及解决

1、查看内存占用排行 top -c 2、查看服务器内存使用情况 free -h 3、查看文件夹磁盘空间大小 Linux 查看各文件夹大小命令du -h --max-depth1 (1)查看文件目录一级目录磁盘空间 du -h --max-depth1 (2)查看指定文件目录 du sh home --max-depth2 4、Linux下…

苹果手机怎么卸载微信?记得掌握这两种方法!

微信是一款社交应用程序,在聊天过程中,我们会经常发送和接收各种形式的信息。随着时间的推移,微信缓存的文件会越来越多,占用的存储空间也会逐渐增加。 卸载微信可以释放手机内存,提高手机的运行速度。那么&#xff0…

揭秘Git高手的10个秘密武器:让你的工作效率飙升!

Git和GitHub是每个软件工程师都必须了解的最基本的工具。它们是开发人员日常工作不可或缺的一部分,每天都要与之互动。 精通Git不仅能简化你的日常操作,还能显著提高生产力。在这篇文章中,我们将探讨一组能够极大提升生产力的命令。 随着对…

运维笔记111

运维笔记 Navicat中查询指定字段名所在的表名tomcat设置JVM的初始堆内存修改catalina.sh文件修改完保存并关闭tomcat启动tomcat 查询数据库连接数查询是否存在死锁 Navicat中查询指定字段名所在的表名 SELECT * FROM information_schema.COLUMNS WHERE COLUMN_NAME‘替换成你要…

基于加拿大降水分析 (CaPA) 系统的北美区域确定性降水数据集

区域确定性降水分析 (RDPA) 基于加拿大降水分析 (CaPA) 系统的区域确定性降水分析 (RDPA) 的域与业务区域模式相对应,即区域确定性预报系统 (RDPS-LAM3D),但太平洋地区除外其中 RDPA 域的西边边界相对于区域模型域稍微向东移动。RDPA 分析的分辨率与运行…

宋仕强论道之华强北的商业配套(十三)

宋仕强论道之华强北的商业配套(十三):金航标电子萨科微半导体总经理宋仕强先生发布“宋仕强论道”系列视频,分享多年学习、生活和工作经验和感悟,甚至涵盖了文学、艺术、哲学、宗教。这段时间发表的是对华强北&#xf…

如何与LEONI建立EDI连接?

莱尼LEONI是一家为汽车及其他行业提供能源数据管理产品、解决方案及服务的全球供应商。供应链范围从研发生产标准化电缆、特种电缆和数据电缆到高度复杂的布线系统和相关组件。本文将介绍如何与莱尼LEONI建立EDI连接。 什么是EDI? EDI全称Electronic Data Interch…

LeetCode.24两两交换链表中的节点

LeetCode.24两两交换链表中的节点 1.问题描述2.解题思路3.代码 1.问题描述 给你一个链表,两两交换其中相邻的节点,并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题(即,只能进行节点交换)。 示…