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

最新推荐文章于 2024-08-30 09:14:41 发布

俊哥前端工程师

最新推荐文章于 2024-08-30 09:14:41 发布

阅读量1k

点赞数 14

CC 4.0 BY-SA版权

分类专栏： JavaScript相关语法文章标签： javascript 开发语言 ecmascript 前端 vue.js typescript json

本文链接：https://blog.youkuaiyun.com/ForForever9/article/details/134682651

JavaScript相关语法专栏收录该内容

37 篇文章

订阅专栏

本文介绍了一种方法，通过编写函数将JavaScript对象自动转换为TypeScript接口，减少手动定义接口的工作量，适用于提高前端开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如今的前端开发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;
    // }