基于JS实现将JSON数据转换为TypeScript类型声明的工具
作者:forrest酱 发布时间:2023-06-12 16:20:44
在TypeScript 项目中,我们经常需要使用声明一系列的ts类型。然而,手动写的效率实在太低,编写一个自动生成ts类型的工具可以解放生产力。 实现一个工具将 JSON 数据转换为 TypeScript 类型定义,从而让 TypeScript 项目更高效的开发。
一、实现的功能
将 JSON 数据转换为 TypeScript 类型定义。
支持嵌套的复杂类型,如数组和对象。
支持自定义类型名称和命名空间。
支持将转换后的 TypeScript 类型定义保存为文件。
二、工具使用方法
已经发布到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-extra
和 commander
。fs-extra
是一个简化了 Node.js 文件系统模块的封装,而 commander
是一个命令行工具的库,可以方便地解析命令行参数。
接下来定义一个函数 jsonToTs
,用于将 JSON 数据转换为 TypeScript 类型定义字符串。该函数采用递归的方式遍历 JSON 数据,生成对应的 TypeScript 类型定义。如果 JSON 数据是数组,则递归处理其中的每个元素;如果是对象,则递归处理其中的每个属性。最终,该函数返回一个 TypeScript 类型定义字符串。
然后定义了两个异步函数,readJson
和 writeTs
,分别用于读取 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)
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 类型定义保存为文件。
来源:https://juejin.cn/post/7217304466077024312
猜你喜欢
- asp中我们可以利用ERR对象来判断sql语句执行是否成功:SQL="Insert INTO TABLE(F1,F2) value
- 临近下班的时候,突然想到统计热门文章的问题。以前我所知道的热门文章统计,基本有这么几种:按点击数排序 该方法最大的问题在于热门的文章会越来越
- 用户体验(User Experience,简称UE)是用户在使用产品过程中建立起来的一种纯主观感受。在基于Web的产品设计中,UE是一个相对
- 权重初始化对于训练神经网络至关重要,好的初始化权重可以有效的避免梯度消失等问题的发生。在pytorch的使用过程中有几种权重初始化的方法供大
- Css Reset是什么? 有些同行叫 "css复位",有些可能叫 "默认css".....相信看完
- 昨天还和裕波沟通我没有准备ppt,想以另一种互动的方式来交流。后来想想,每个人都准备了,我不准备也不太好意思,呵呵。今天在webrebuil
- 在某些情况下,比如自动补全(auto complete)的输入框中,需要使用keyup事件来监听键盘的输入以迅速作出回应。关键在于keyup
- 表单外观的美化很多时候,我们仅仅为了实现数据采集这个功能来使用表单,常看到的表单都是“千人一面”、毫无
- 大大小小也搞过一些数据库设计,见过一些其他人的设计,看过些书,总结总结,经验谈。选表类型:大家都知道mysql的myisam表适合读操作大,
- 内容摘要: 模拟网页下拉菜单中有几个比较关键的CSS属性:position、left、top、
- 实现一个AuditLog的功能,是B/S结构专案。 每个用户可以登录系统,在程序中操作数据(添加,更新和删除)需要实现记录操作跟踪。是谁添加
- 数据库中提取长长的文章,总是有碍网页的排版布局。所以,想固定地提取一部分字符,然后后面有……替代。相关推荐:当标题不能显示完整的时候 1、原
- 前文主要纠正title用法上的几点误区,其实除链接和表单的常规标签用法。在内容组织方面还有大潜力待发掘,比如写网志经常会有针对词、短语说明的
- /*Bresenham画圆算法*/var arc = function(x0,y0,r){/*起点坐标x0,y
- 前言亲人工作考试,公司给的题库好像是直接从数据库导出的表格Excel形式,在移动端上非常难看,需要不断左右上下滑动,看不了多少题眼就瞎了,遂
- 一.前言众所周知:没有对象怎么办?那就new一个!那么在JS中,当我们new一个对象的时候,这个new关键字内部都干了什么呢?现在我们就来剖
- MySQL使用环境变量TMPDIR的值作为保存临时文件的目录的路径名。如果未设置TMPDIR,MySQL将使用系统的默认值,通常为/tmp、
- df.dropna()函数用于删除dataframe数据中的缺失数据,即 删除NaN数据.官方函数说明:DataFrame.dropna(a
- 最近,我有机会研究对视觉设计作用的常见误解,这些误解仍然盛行于行政主管、产品主管,工程经理和市场专家中。设计团队成员如何说明这些认识是错误的
- PDO::quotePDO::quote — 为SQL语句中的字符串添加引号。(PHP 5 >= 5.1.0, PECL pdo &g