前言
最近在写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