如何将JSON Schema字符串转为类型安全对象以生成表单？

第一步：先把字符串转成JS对象 #

这是最基础的一步，直接用JSON.parse即可：

const schemaStr = '{"type": "object", "properties": {"name": {"type": "string"}, "age": {"type": "integer"}}, "required": ["name"]}';
const schema = JSON.parse(schemaStr);

TypeScript环境：自动生成类型，无需手写 #

如果你用TS，完全不用手动编写冗长的JSON Schema类型，有两个高效方案：

1. 使用@types/json-schema的通用类型
   先安装依赖：

npm install @types/json-schema --save-dev

给解析后的Schema加上该类型，就能获得JSON Schema核心结构的完整类型提示：

import type { JSONSchema7 } from '@types/json-schema';

const schema: JSONSchema7 = JSON.parse(schemaStr);

比如访问schema.properties、schema.required时，TS会自动提示字段类型，避免拼写或结构错误。

2. 生成表单数据的对应类型
   如果需要表单提交后的数据结构类型，用json-schema-to-typescript自动生成：

npm install json-schema-to-typescript --save-dev

代码中可异步生成类型，甚至直接写入.d.ts文件：

import { compile } from 'json-schema-to-typescript';

// 生成对应表单数据的TS类型
const formDataType = await compile(schema, 'FormData');
// 可将formDataType写入文件，或在代码中直接使用（需TS支持动态类型场景）

这样不管是Schema本身还是表单数据，都有类型保障，完全无需手动编写类型定义。

纯JavaScript环境：用AJV实现运行时类型安全 #

JS没有静态类型，但可以借助AJV确保Schema合法，让遍历过程更可靠：

1. 先校验Schema的合法性
   用AJV确认你的Schema符合规范，避免后续遍历踩坑：

import Ajv from 'ajv';
const ajv = new Ajv();

const isValidSchema = ajv.validateSchema(schema);
if (!isValidSchema) {
  throw new Error('无效的JSON Schema: ' + JSON.stringify(ajv.errors));
}

2. 遍历Schema生成表单
   直接遍历Schema核心字段，结合AJV的校验能力，确保访问的字段合法：

// 处理对象类型的Schema
if (schema.type === 'object' && schema.properties) {
  Object.entries(schema.properties).forEach(([fieldName, fieldSchema]) => {
    // 判断字段是否必填
    const isRequired = schema.required?.includes(fieldName);
    // 根据字段类型生成对应表单控件
    switch (fieldSchema.type) {
      case 'string':
        // 生成文本输入框，可结合default、enum等字段设置属性
        console.log(`文本输入框：${fieldName}，必填：${isRequired}，默认值：${fieldSchema.default}`);
        break;
      case 'integer':
      case 'number':
        // 生成数字输入框
        console.log(`数字输入框：${fieldName}，必填：${isRequired}`);
        break;
      case 'boolean':
        // 生成复选框
        console.log(`复选框：${fieldName}，必填：${isRequired}`);
        break;
      case 'array':
        // 生成数组控件（比如可重复的输入项）
        console.log(`数组控件：${fieldName}，子元素类型：${fieldSchema.items?.type}`);
        // 递归处理子元素Schema
        break;
      case 'object':
        // 递归生成嵌套表单
        console.log(`嵌套表单：${fieldName}`);
        break;
    }
  });
}

通过这种方式，虽无静态类型，但能在运行时确保操作的Schema结构合法，避免访问不存在的字段。

巧用AJV的额外能力 #

AJV不光能校验，还能提取Schema里的实用信息直接用于表单：

• 提取默认值：fieldSchema.default，可直接设为表单控件初始值
• 提取枚举选项：fieldSchema.enum，可用来生成下拉框选项列表
• 提取格式限制：fieldSchema.format（如email、date），可用来设置表单控件的校验规则

内容的提问来源于stack exchange，提问作者yumba