蹭大家都过年了,我再卷一卷,两天写完的项目,一款在线工具json数据转ts类型【json-to-ts-typing】

171 阅读2分钟

前言

最近在写ts项目,接口返回数据,类型要一个一个写我闲麻烦就自己写了一个

使用vite快速的创建一个项目 vitejs.dev/

技术栈:react、react18、vite、vite3.x、antd、antd5.x、typescritp

用到的库

codemirror、react-codemirror2、@cyly/json2ts

  • codemirror: codemirror.net/5/index.htm…

  • CodeMirror是一个用 JavaScript 为浏览器实现的多功能文本编辑器。它专门用于编辑代码,并带有多种语言模式和插件 ,可实现更高级的编辑功能。

  • 丰富的编程 API和 CSS主题系统可用于自定义 CodeMirror 以适合您的应用程序,并使用新功能对其进行扩展。

  • react-codemirror2: github.com/scniro/reac…

  • react-codemirror2带有不受控和受控组件的概念。UnControlled由一个主要由codemirror自身内部工作驱动的简单包装器组成,同时Controlled要求用户进行状态管理,防止代码镜像更改,除非通过value. 后者将提供更多控制,并且可能更适合redux繁重的应用程序。

  • @cyly/json2ts: github.com/ChpShy/json…

  • 使用编译原理,解析Json,输出 TS 类型

  • json-parse > transform > codegen

  • 支持的参数

  • splitType

  • boolean。默认:true。是否分离对象,分离的话,会将json内的对象作为单独的 type 类型

  • parseArray

  • boolean。默认:false。是否解析数组。默认返回Array< any >

  • required

  • boolean。默认:true。是否都是必须。设为false则为:{ a?: number};

  • semicolon

  • boolean。默认:false。是否使用分号结尾。设为true则为:{a: number; b: string;}

  • typePrefix

  • string。默认:''。命名的前缀。如设为User:UserKeyName$0

  • typeSuffix

  • string。默认:Type。命名的后缀。如设为Temp:KeyName$0Temp

  • indent

  • number。 Default:2。 输出格式化的缩进

  • comment

  • 'inline' | 'block' | false。 默认false。是否输出注释

  • optimizeArrayOptional

  • boolean. 默认false。优化数组内对象的值是否可选。例如: [{a: 1, b: 3}, {b: 2}] will be Array<{a: number; b?: number}>

  • genType

  • 'type' | 'interface'. 默认type. 输出 type 或 interface

github

json-to-ts-typing/

线上体验地址

hzdjs.cn/json-to-ts-…