基于JS实现将JSON数据转换为TypeScript类型声明的工具
作者：forrest酱
在TypeScript 项目中，我们经常需要使用声明一系列的ts类型。然而，手动写的效率实在太低，本文就实现一个工具将 JSON 数据转换为 TypeScript 类型定义，需要的可以参考一下
在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 类型定义保存为文件。
到此这篇关于基于JS实现将JSON数据转换为TypeScript类型声明的工具的文章就介绍到这了,更多相关JS实现JSON转TypeScript类型声明内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
原生JS实现简单屏幕截图2023-04-04
uniapp使用navigateBack方法返回上级页面并刷新的简单示例2023-03-03
uniapp页面跳转的五种方式总结2023-03-03
JavaScript模拟实现简单的MVC的示例详解2023-04-04
JS监听变量改变的实现2023-04-04
一问了解JavaScript中的元数据2023-04-04
TypeScript类型实现加减乘除的方法2023-04-04
JavaScript使用Promise实现并发请求数限制2023-04-04
美国设下计谋,用娘炮文化重塑日本,已影响至中国2021-11-19
时空伴随者是什么意思?时空伴随者介绍2021-11-09
工信部称网盘企业免费用户最低速率应满足基本下载需求，天翼云盘回应：坚决支持，始终2021-11-05
2022年放假安排出炉：五一连休5天 2022年所有节日一览表2021-10-26
电脑版 - 返回首页
2006-2023 脚本之家 JB51.Net , All Rights Reserved.
苏ICP备14036222号
