JSON转TypeScript - 生成接口和类型在线

粘贴JSON即时生成TypeScript接口、类型和枚举。将API响应转为类型安全的代码 — 100%浏览器处理。

常见问题

什么是JSON转TypeScript转换器？

JSON转TypeScript转换器是一种自动从JSON数据生成TypeScript接口或类型别名的工具。无需手动为API响应或配置文件编写类型定义，只需粘贴示例JSON对象，工具就会为每个字段推断正确的TypeScript类型，包括嵌套对象、数组和可空值。

如何从JSON生成TypeScript接口？

只需将JSON数据粘贴到左侧的输入字段中。工具将立即在右侧的输出面板中生成TypeScript接口。您可以通过设置根接口名称、在'interface'和'type'语法之间选择、切换'export'关键字等选项来自定义输出。

应该使用TypeScript interface还是type alias？

两者都可以用于定义对象形状，但有所不同。接口通常首选用于对象定义，因为它们可以用'extends'扩展并通过声明合并来合并。类型别名更加通用，可以表示联合、交叉和基本类型。

转换器如何处理嵌套的JSON对象？

当工具遇到嵌套对象时，会为其创建一个单独的命名接口。例如，如果您的JSON有一个包含'address'子对象的'user'对象，工具会生成'User'接口和'Address'接口。您也可以在选项中选择'内联嵌套类型'来直接在父接口中定义。

使用此工具时我的JSON数据安全吗？

是的，完全安全。此工具使用客户端JavaScript在您的浏览器中处理所有内容。您的JSON数据永远不会离开您的计算机——没有服务器上传、没有API调用、没有数据存储。

工具如何处理JSON中的null值？

当JSON字段具有null值时，工具会生成与null的联合类型，如'field?: string | null'。属性用'?'修饰符标记为可选。这确保您的TypeScript类型准确表示数据的可空特性。

包含混合类型的数组会怎样？

如果JSON数组包含不同类型的元素，工具会生成联合数组类型，如'(string | number)[]'。空数组类型为'unknown[]'。

代码示例

// JSON to TypeScript interface generator
function jsonToTypeScript(json, rootName = 'Root') {
  const interfaces = [];

  function inferType(value, name) {
    if (value === null) return 'null';
    if (Array.isArray(value)) {
      if (value.length === 0) return 'unknown[]';
      const types = [...new Set(value.map((item) => inferType(item, name + 'Item')))];
      const typeStr = types.length > 1 ? `(${types.join(' | ')})` : types[0];
      return `${typeStr}[]`;
    }
    if (typeof value === 'object') {
      const interfaceName = toPascalCase(name);
      const properties = Object.entries(value).map(([key, val]) => {
        const type = inferType(val, key);
        const optional = val === null ? '?' : '';
        return `  ${key}${optional}: ${type};`;
      });
      interfaces.push(`interface ${interfaceName} {\n${properties.join('\n')}\n}`);
      return interfaceName;
    }
    return typeof value;
  }

  function toPascalCase(str) {
    return str.replace(/(^|[-_ ])(\w)/g, (_, __, c) => c.toUpperCase());
  }

  const parsed = JSON.parse(json);
  inferType(parsed, rootName);
  return interfaces.reverse().join('\n\n');
}

const json = '{"name": "Alice", "age": 30, "address": {"city": "NYC"}}';
console.log(jsonToTypeScript(json));

JSON转TypeScript - 生成接口和类型 在线