当前位置：首页 > news >正文

JSON转TypeScript接口核心JS实现

news 2026/5/11 23:59:49

JSON转TypeScript接口核心JS实现

这篇只讲核心 JS 逻辑：一段 JSON 是如何一步步变成 TypeScript 接口代码的。

在线工具网址：https://see-tool.com/json-to-typescript
工具截图：

1）状态与入口函数

先看最核心的状态和入口：

constjsonInput=ref('')constoutputData=ref('')constinterfaceName=ref('RootObject')constuseType=ref(false)constoptionalProps=ref(true)consterrorMessage=ref('')constconvert=()=>{constinput=jsonInput.value.trim()if(!input){outputData.value=''errorMessage.value=''return}try{constparsed=JSON.parse(input)if(parsed===null||(typeofparsed!=='object'&&!Array.isArray(parsed))){errorMessage.value='根节点必须是对象或数组'outputData.value=''return}constrootName=interfaceName.value.trim()||'RootObject'outputData.value=jsonToTypeScript(parsed,rootName)errorMessage.value=''}catch(error){errorMessage.value=`JSON 解析失败：${error.message}`outputData.value=''}}

这里做了三件事：输入清洗、JSON 解析、调用生成器。只要这一步跑通，工具就能稳定输出。

2）类型名生成：先合法，再去重

JSON 字段名常常不规范，比如有空格、短横线、数字开头，所以类型名要先标准化：

consttoPascalCase=(value,fallback='Item')=>{constcleaned=String(value||'').replace(/[^A-Za-z0-9_$\s]/g,' ').trim()if(!cleaned)returnfallbackconstparts=cleaned.split(/\s+/).filter(Boolean)constcombined=parts.map(part=>part.charAt(0).toUpperCase()+part.slice(1)).join('')return/^[A-Za-z_$]/.test(combined)?combined:fallback}constnormalizeInterfaceName=(value,fallback='RootObject')=>{if(!value)returnfallbackreturntoPascalCase(value,fallback)||fallback}

嵌套对象会不断生成新接口名，所以还要处理重名：

constinterfaceNames=newSet()constprocessedNames=newSet()constgenerateInterfaceName=(base,suffix='')=>{constbaseNormalized=normalizeInterfaceName(base,'RootObject')constsuffixNormalized=suffix?toPascalCase(suffix):''constname=`${baseNormalized}${suffixNormalized}`if(!interfaceNames.has(name)&&!processedNames.has(name)){interfaceNames.add(name)returnname}letcounter=2while(interfaceNames.has(`${name}${counter}`)||processedNames.has(`${name}${counter}`)){counter+=1}constfinalName=`${name}${counter}`interfaceNames.add(finalName)returnfinalName}

3）类型推断：递归处理对象和数组

真正的核心在inferType：

constinferType=(value,key,parentName)=>{if(value===null)return'null'if(Array.isArray(value)){if(value.length===0)return'any[]'constelementTypes=newSet(value.map(item=>inferType(item,'Item',parentName)))consttypes=Array.from(elementTypes)constinner=types.length===1?types[0]:`(${types.join(' | ')})`return`${inner}[]`}if(typeofvalue==='object'){constnestedName=generateInterfaceName(parentName,key)processObject(value,nestedName)returnnestedName}if(typeofvalue==='string')return'string'if(typeofvalue==='number')return'number'if(typeofvalue==='boolean')return'boolean'return'any'}

比如[{ id: 1 }, { id: "2" }]会得到(RootItem | RootItem2)[]或联合类型形式，保证类型信息不丢。

4）对象转声明文本

推断完类型后，要拼成最终代码：

constformatPropertyKey=key=>{constvalue=String(key)constidentifier=/^[A-Za-z_$][A-Za-z0-9_$]*$/returnidentifier.test(value)?value:JSON.stringify(value)}constprocessObject=(obj,name)=>{if(processedNames.has(name))returnprocessedNames.add(name)constoptionalMark=optionalProps.value?'?':''constlines=[]lines.push(useType.value?`export type${name}= {`:`export interface${name}{`)Object.entries(obj).forEach(([key,value])=>{consttsType=inferType(value,key,name)constpropertyKey=formatPropertyKey(key)lines.push(`${propertyKey}${optionalMark}:${tsType};`)})lines.push('}')interfaces.push(lines.join('\n'))}

如果根节点本身是数组，再补一行根类型：

if(Array.isArray(json)){constarrayType=inferType(json,'Item',baseName)constrootLine=`export type${baseName}=${arrayType};`returninterfaces.length?`${interfaces.join('\n\n')}\n\n${rootLine}`:rootLine}

5）实时转换触发

输入实时更新，但不希望每敲一个字都立即解析，所以用了防抖：

letdebounceTimer=nullconstscheduleConvert=()=>{if(debounceTimer)clearTimeout(debounceTimer)debounceTimer=setTimeout(()=>{convert()},400)}watch(jsonInput,scheduleConvert)watch(interfaceName,scheduleConvert)watch([useType,optionalProps],convert)