自动生成typescript类型声明工具实现详解

 更新时间:2023年04月04日 10:58:01   作者:forrest酱  
这篇文章主要为大家介绍了自动生成typescript类型声明工具实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

在TypeScript 项目中,我们经常需要使用声明一系列的ts类型。然而,手动写的效率实在太低,编写一个自动生成ts类型的工具可以解放生产力。 实现一个工具将 JSON 数据转换为 TypeScript 类型定义,从而让 TypeScript 项目更高效的开发。

一、实现的功能

  • 将 JSON 数据转换为 TypeScript 类型定义。
  • 支持嵌套的复杂类型,如数组和对象。
  • 支持自定义类型名称和命名空间。
  • 支持将转换后的 TypeScript 类型定义保存为文件。

二、工具使用方法

1.在线playground使用:在线json转ts类型声明

2.已经发布到npm:my-json-to-ts - npm (npmjs.com)

运行效果如下动图:

安装工具:

npm install -g my-json-to-ts

运行工具:

my-json-to-ts input.json output.ts

其中 input.json 是要转换的 JSON 文件路径,output.ts 是转换后的 TypeScript 文件路径。

--name 类型名称    # 指定转换后的类型名称,默认为 JsonType
--namespace 命名空间 # 指定转换后的命名空间,默认为无
--no-file          # 不将转换后的 TypeScript 类型定义保存为文件

三、实现思路

  • 读取输入的 JSON 文件,解析成 JSON 对象。
  • 遍历 JSON 对象,根据不同的类型生成对应的 TypeScript 类型定义字符串。
  • 如果指定了类型名称和命名空间,则在生成的 TypeScript 类型定义字符串前面添加对应的声明。
  • 如果指定了保存文件,则将生成的 TypeScript 类型定义字符串写入文件。

四、使用示例

以下是将JSON 数据和转换后的 TypeScript 类型定义示例:

🚲简单的JSON 数据

{
  "name": "John",
  "age": 30,
  "address": {
    "city": "New York",
    "state": "NY"
  },
  "hobbies": [
    "reading",
    "traveling"
  ]
}

🚲输出对应简单的类型定义

interface JsonType {
  name: string;
  age: number;
  address: {
    city: string;
    state: string;
  };
  hobbies: string[];
}

✈复杂的JSON 数据

{
  "name": "John",
  "age": 30,
  "address": {
    "city": "New York",
    "state": "NY",
    "postalCode": 10001
  },
  "friends": [
    {
      "name": "Jane",
      "age": 28,
      "address": {
        "city": "Los Angeles",
        "state": "CA"
      }
    },
    {
      "name": "Bob",
      "age": 35,
      "address": {
        "city": "Chicago",
        "state": "IL"
      }
    }
  ],
  "hobbies": [
    "reading",
    "traveling",
    {
      "name": "swimming",
      "location": "pool"
    }
  ]
}

✈输出对应复杂类型定义

interface JsonType {
  name: string;
  age: number;
  address: {
    city: string;
    state: string;
    postalCode: number;
  };
  friends: {
    name: string;
    age: number;
    address: {
      city: string;
      state: string;
    };
  }[];
  hobbies: (string | {
    name: string;
    location: string;
  })[];
}

五、具体实现代码

首先引入两个 Node.js 模块:fs-extracommanderfs-extra 是一个简化了 Node.js 文件系统模块的封装,而 commander 是一个命令行工具的库,可以方便地解析命令行参数。

接下来定义一个函数 jsonToTs,用于将 JSON 数据转换为 TypeScript 类型定义字符串。该函数采用递归的方式遍历 JSON 数据,生成对应的 TypeScript 类型定义。如果 JSON 数据是数组,则递归处理其中的每个元素;如果是对象,则递归处理其中的每个属性。最终,该函数返回一个 TypeScript 类型定义字符串。

然后定义了两个异步函数,readJsonwriteTs,分别用于读取 JSON 文件和将 TypeScript 类型定义字符串写入文件。

最后定义一个名为 jsonToTsFile 的函数,该函数接收命令行参数并将其传递给 jsonToTs 函数,然后将生成的 TypeScript 类型定义字符串保存到文件中。如果命令行参数中指定了不保存文件,则该函数将直接将 TypeScript 类型定义字符串输出到控制台。

  const fs = require('fs-extra');
  const commander = require('commander');
  /**
   * 将 JSON 数据转换为 TypeScript 类型定义
   * @param {Object} object - 要转换的 JSON 对象
   * @param {string} [name=JsonType] - 转换后的类型名称
   * @param {string} [namespace] - 转换后的命名空间
   * @returns {string} - 转换后的 TypeScript 类型定义字符串
   */
  function jsonToTs(object, name = 'JsonType', namespace) {
      const getType = value => {
          let typeRes = ``;
          if (Array.isArray(value)) {
              value.forEach(item => {
                  let subType = getType(item);
                  if (typeRes.split('|').indexOf(subType) < 0) {
                      typeRes += subType
                      typeRes += "|"
                  }
              })
              typeRes = typeRes.substring(0, typeRes.length - 1)
               if (typeRes.split('|').length > 1) {
                  return `(${typeRes})[]`;
                } else {
                  return `${typeRes}[]`;
                }
          }
          if (typeof value === 'object' && value !== null) {
              const props = Object.entries(value)
                  .map(([key, val]) => `${key}: ${getType(val)}`)
                  .join('; ');
              return `{ ${props} }`;
          }
          return typeof value;
      };
      const type = getType(object);
      const declaration = `interface ${name} ${type}`;
      return namespace ? `namespace ${namespace} { \r\n ${declaration} \r\n}` : declaration;
  }
  /**
   * 读取文件并解析成 JSON 对象
   * @param {string} path - 文件路径
   * @returns {Promise<Object>} - JSON 对象
   */
  async function readJson(path) {
      const content = await fs.readFile(path, 'utf8');
      return JSON.parse(content);
  }
  /**
   * 将 TypeScript 类型定义字符串写入文件
   * @param {string} content - TypeScript 类型定义字符串
   * @param {string} path - 文件路径
   * @returns {Promise<void>}
   */
  async function writeTs(content, path) {
      await fs.writeFile(path, content, 'utf8');
  }
  /**
   * 将 JSON 数据转换为 TypeScript 类型定义
   * @param {string} inputPath - 输入 JSON 文件路径
   * @param {string} outputPath - 输出 TypeScript 文件路径
   * @param {string} [options.name=JsonType] - 转换后的类型名称
   * @param {string} [options.namespace] - 转换后的命名空间
   * @param {boolean} [options.noFile] - 不将 TypeScript 类型定义保存为文件
   * @returns {Promise<void>}
   */
  async function jsonToTsFile(inputPath, outputPath, options) {
      const { name, namespace, noFile } = options
      try {
          const object = await readJson(inputPath);
          const type = jsonToTs(object, name, namespace);
          if (noFile) {
              console.log(type);
          } else {
              await writeTs(type, outputPath);
              console.log(`Type definition saved to ${outputPath}`);
          }
      } catch (err) {
          console.error(err.message);
      }
  }
  const program = new commander.Command();
  program
      .arguments('<input> <output>')
      .option('--no-file', 'do not save to file')
      .option('-s, --namespace <namespace>', 'type namespace')
      .option('-n, --name <name>', 'type name', 'JsonType')
      .action(jsonToTsFile);
  program.parse(process.argv);

六、写在最后

这个工具可以极大地提高在 TypeScript 项目中编写类型声明的效率。通过输入一个 JSON 数据,它可以自动生成对应的 TypeScript 类型定义,支持复杂类型,如数组和对象,并支持自定义类型名称和命名空间。此外,还可以选择将转换后的 TypeScript 类型定义保存为文件。

以上就是自动生成typescript类型声明工具实现详解的详细内容,更多关于自动生成typescript类型声明的资料请关注脚本之家其它相关文章!

相关文章

  • Typescript使用装饰器实现接口字段映射与Mock实例

    Typescript使用装饰器实现接口字段映射与Mock实例

    这篇文章主要为大家介绍了Typescript使用装饰器实现接口字段映射与Mock实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • 使用three.js 画渐变的直线

    使用three.js 画渐变的直线

    这篇文章主要介绍了使用three.js 画渐变的直线的相关资料以及具体的实例代码,有需要的小伙伴可以参考下
    2016-06-06
  • TypeScript快速上手—html中使用ts的两种方法

    TypeScript快速上手—html中使用ts的两种方法

    TypeScript使用命令行编译器tsc或其他工具手动执行编译,在html使用s时编译为JavaScript,那么有没有办法简化过程,不编译直接使用,本文介绍html中使用TypeScript的两种方法
    2024-07-07
  • 前端轻量级MVC框架CanJS详解

    前端轻量级MVC框架CanJS详解

    你可能听说了这个新MVC框架: CanJS。还有什么比用它来创建一个联系人Web App更能深入了解它的办法呢?当看完这篇教程,你将全面了解用它的什么工具来创建你自己的Web App。
    2014-09-09
  • TypeScript 基本数据类型实例详解

    TypeScript 基本数据类型实例详解

    这篇文章主要为大家介绍了TypeScript 基本数据类型实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • TypeScript前端上传文件到MinIO示例详解

    TypeScript前端上传文件到MinIO示例详解

    这篇文章主要为大家介绍了TypeScript前端上传文件到MinIO示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • TS中Array.reduce提示没有与此调用匹配的重载解析

    TS中Array.reduce提示没有与此调用匹配的重载解析

    这篇文章主要为大家介绍了TS中Array.reduce提示没有与此调用匹配的重载解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • 详解Typescript 严格模式有多严格

    详解Typescript 严格模式有多严格

    这篇文章主要为大家介绍了Typescript 严格模式有多严格实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • 基于Javascript实现页面商品个数增减功能

    基于Javascript实现页面商品个数增减功能

    本文给大家介绍基于Javascript实现页面商品个数增减功能,通过点击数量增减个数,代码分为前端页面,后台返回代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2019-07-07
  • JavaScript可视化图表库D3.js API中文参考

    JavaScript可视化图表库D3.js API中文参考

    这篇文章主要介绍了JavaScript可视化图表库D3.js API中文参考,本文对常用的API给出一中文翻译,需要的朋友可以参考下
    2015-01-01

最新评论