在前端开发中，我们通常需要处理来自后端或其他数据源的 JSON 数据。这些数据可能非常复杂，包含不同类型的属性，甚至嵌套对象和数组。为了更好地使用这些数据，我们希望将其转换为 TypeScript 类型定义，以获得类型检查和代码智能提示的好处。
起因
假设我们有一个包含混合类型的 JSON 数据文件 input.json：
json
{
"name": "moment",
"age": 30,
"hobbies": ["篮球", 7, true],
"address": {
"street": "二仙桥",
"city": "陕西西安"
}
}我们想要将这个 JSON 数据转换为 TypeScript 类型定义，以便在 TypeScript 代码中使用它，但由于数据中包含了混合类型的数组和嵌套对象，这并不是一个简单的任务。
实现思路
为了将混合类型的 JSON 数据转换为 TypeScript 类型定义，我们需要执行以下步骤：
-
创建一个函数
generateTsCode，该函数将接受 JSON 数据和类型名称作为参数。 -
在函数内部，初始化一个 TypeScript 类型定义字符串，例如
interface MyType {. -
定义一个用于处理属性值的函数
processValue，该函数将检查属性值的类型，并生成相应的 TypeScript 类型定义。 -
遍历 JSON 数据的属性，对每个属性调用
processValue函数，生成相应的属性声明。 -
如果属性是数组，我们使用联合类型来表示不同元素的类型；如果是对象，我们递归调用
processValue函数以处理嵌套对象；否则，我们直接生成属性的类型声明。 -
最后，在 TypeScript 类型定义字符串的末尾，添加
}来结束类型定义。 -
返回生成的 TypeScript 类型定义字符串。
-
在主程序中，读取包含混合类型的 JSON 数据的文件，将其解析为 JavaScript 对象。
-
定义要生成的 TypeScript 类型的名称。
-
调用
generateTsCode函数来生成 TypeScript 类型定义。 -
将生成的 TypeScript 类型定义写入文件，以供在 TypeScript 代码中使用。
代码示例
以下是完整的代码示例：
javascript
const fs = require("fs");
// 定义一个函数，用于生成 TypeScript 类型定义
function generateTsCode(obj, typeName) {
// 初始化 TypeScript 类型定义字符串
let tsCode = `interface ${typeName} {\n`;
// 定义一个处理属性值的函数
function processValue(value, key, indent) {
if (Array.isArray(value)) {
// 如果属性是数组，定义联合类型数组
tsCode += `${indent}${key}: (`;
for (const item of value) {
const type =
typeof item === "number"
? "number"
: typeof item === "string"
? "string"
: typeof item === "boolean"
? "boolean"
: "any";
tsCode += `${type} | `;
}
tsCode = tsCode.slice(0, -2); // 移除最后的 " | "
tsCode += `)[];\n`;
} else if (typeof value === "object" && !Array.isArray(value)) {
// 如果属性是嵌套对象，递归处理
tsCode += `${indent}${key}: {\n`;
processObject(value, `${indent} `);
tsCode += `${indent}};\n`;
} else {
// 否则，直接生成属性
const type =
typeof value === "number"
? "number"
: typeof value === "string"
? "string"
: typeof value === "boolean"
? "boolean"
: "any";
tsCode += `${indent}${key}: ${type};\n`;
}
}
// 定义一个处理对象的函数
function processObject(obj, indent) {
for (const key in obj) {
const value = obj[key];
processValue(value, key, indent);
}
}
// 调用处理对象的函数，从根对象开始生成类型定义
processObject(obj, " ");
// 完成 TypeScript 类型定义字符串
tsCode += `}\n`;
return tsCode;
}
// 读取包含混合类型数组的 JSON 数据的文件
const jsonCode = fs.readFileSync("input.json", "utf-8");
// 将 JSON 代码解析为 JavaScript 对象
const jsonObj = JSON.parse(jsonCode);
// 定义 TypeScript 类型的名称
const typeName = "MyType";
// 调用生成 TypeScript 类型定义的函数
const tsTypeCode = generateTsCode(jsonObj, typeName);
// 将生成的 TypeScript 类型代码写入文件
fs.writeFileSync("output.ts", tsTypeCode, "utf-8");
// 输出转换完成的信息
console.log("JSON 转换为 TypeScript 类型完成！");总结
通过上述代码示例，我们演示了如何将包含混合类型的 JSON 数据转换为 TypeScript 类型定义。这个过程涉及到定义一个处理函数，检查属性值的类型，以及递归处理嵌套对象和数组。最终，我们将生成的 TypeScript 类型定义写入文件，以供在 TypeScript 代码中使用。
通过这种方式，可以使我们更加快速地定义一个 ts 的类型，让我们有更多的时间去做业务的编码。
最后分享两个我的两个开源项目,它们分别是:
这两个项目都会一直维护的,如果你也喜欢,欢迎 star 🚗🚗🚗