Json-to-TypeScript: add null and unknown options (can be changed to undefined and any)

k.golikov · k.golikov · commit 82594dad3b73 · 2022-05-02T22:47:55.000+05:00
diff --git a/src/pages/jsonToTypeScriptPage/JsonToTypeScriptPage.tsx b/src/pages/jsonToTypeScriptPage/JsonToTypeScriptPage.tsx
@@ -16,7 +16,7 @@ import getLocalStorageKey from '../../utils/getLocalStorageKey';
 import JsonToTypeScriptConversionSelectableOptions, {
     NameTransformer
 } from './types/JsonToTypeScriptConversionSelectableOptions';
-import JsonToTypeScriptConversionOptions from './types/JsonToTypeScriptConversionOptions';
+import JsonToTypeScriptConversionOptions, { NullType, UnknownType } from './types/JsonToTypeScriptConversionOptions';
 import { camelCase, kebabCase, snakeCase } from 'lodash';
 import pascalCase from '../../utils/pascalCase';
 import JsonToTypeScriptSettings from './components/JsonToTypeScriptSettings';
@@ -37,7 +37,9 @@ const defaultSelectableConversionOptions: JsonToTypeScriptConversionSelectableOp
     isReversedOrder: true,
     typeNameTransformer: NameTransformer.PASCAL_CASE,
     fieldNameTransformer: NameTransformer.NONE,
-    isTuplesEnabled: false
+    isTuplesEnabled: false,
+    nullType: NullType.NULL,
+    unknownType: UnknownType.UNKNOWN
 };
 
 const nameTransformers: Readonly<Record<NameTransformer, (name: string) => string>> = {
diff --git a/src/pages/jsonToTypeScriptPage/components/JsonToTypeScriptSettings.tsx b/src/pages/jsonToTypeScriptPage/components/JsonToTypeScriptSettings.tsx
@@ -9,6 +9,7 @@ import ExportType from '../types/ExportType';
 import Text from 'antd/lib/typography/Text';
 import classNames from 'classnames';
 import { CloseOutlined } from '@ant-design/icons';
+import { NullType, UnknownType } from '../types/JsonToTypeScriptConversionOptions';
 
 interface Props {
     options: JsonToTypeScriptConversionSelectableOptions;
@@ -82,6 +83,24 @@ const JsonToTypeScriptSettings: FunctionComponent<Props> = ({ options, setOption
                     <Select.Option key={NameTransformer.SCREAMING_SNAKE_CASE}>SCREAMING_SNAKE_CASE</Select.Option>
                 </Select>
             </label>
+            <label className={styles.formItem}>
+                <span className={styles.label}>Unknown type</span>
+                <Select
+                    className={styles.input}
+                    value={options.unknownType}
+                    onChange={handleOptionChange('unknownType')}
+                >
+                    <Select.Option key={UnknownType.UNKNOWN}>unknown</Select.Option>
+                    <Select.Option key={UnknownType.ANY}>any</Select.Option>
+                </Select>
+            </label>
+            <label className={styles.formItem}>
+                <span className={styles.label}>Null type</span>
+                <Select className={styles.input} value={options.nullType} onChange={handleOptionChange('nullType')}>
+                    <Select.Option key={NullType.NULL}>null</Select.Option>
+                    <Select.Option key={NullType.UNDEFINED}>undefined</Select.Option>
+                </Select>
+            </label>
             <label className={classNames('mt-1', styles.formItem)}>
                 <Switch checked={options.isReversedOrder} onChange={handleOptionChange('isReversedOrder')} />
                 <span className="ms-3">Reverse declarations</span>
diff --git a/src/pages/jsonToTypeScriptPage/types/JsonToTypeScriptConversionOptions.ts b/src/pages/jsonToTypeScriptPage/types/JsonToTypeScriptConversionOptions.ts
@@ -1,12 +1,24 @@
 import ExportType from './ExportType';
 
+export enum NullType {
+    NULL = 'null',
+    UNDEFINED = 'undefined'
+}
+
+export enum UnknownType {
+    UNKNOWN = 'unknown',
+    ANY = 'any'
+}
+
 interface JsonToTypeScriptConversionOptions {
     exportType?: ExportType;
     isReversedOrder?: boolean;
     fieldNameTransformer?: (fieldName: string) => string;
     typeNameTransformer?: (typeName: string) => string;
     rootTypeName: string;
     isTuplesEnabled?: boolean;
+    nullType?: NullType;
+    unknownType?: UnknownType;
 }
 
 export default JsonToTypeScriptConversionOptions;
diff --git a/src/pages/jsonToTypeScriptPage/types/typescript.ts b/src/pages/jsonToTypeScriptPage/types/typescript.ts
@@ -7,11 +7,11 @@ import JsonToTypeScriptConversionOptions from './JsonToTypeScriptConversionOptio
 import isValidJsIdentifier, { isValidTsTypeFieldName } from '../../../utils/isValidJsIdentifier';
 
 export interface ITypeScriptType {
-    stringifyReference(): string;
+    stringifyReference(options: JsonToTypeScriptConversionOptions): string;
 }
 
 export interface IDeclarable {
-    stringifyDeclarationBody(): string;
+    stringifyDeclarationBody(options: JsonToTypeScriptConversionOptions): string;
 }
 
 export interface IDeclarableTypeScriptType extends IDeclarable {
@@ -35,67 +35,67 @@ export class DeclarableTypeScriptType implements IDeclarableTypeScriptType {
 
         return `${getExportKeyword(options.exportType)}type ${stringifyTypeName(
             this.name
-        )} = ${this.stringifyDeclarationBody()};`;
+        )} = ${this.stringifyDeclarationBody(options)};`;
     }
 
-    stringifyDeclarationBody(): string {
+    stringifyDeclarationBody(options: JsonToTypeScriptConversionOptions): string {
         if (isString(this.type)) {
-            return this.type;
+            return getTypeScriptTypeReference(this.type, options);
         }
 
         return 'stringifyDeclarationBody' in this.type
-            ? this.type.stringifyDeclarationBody()
+            ? this.type.stringifyDeclarationBody(options)
             : 'stringifyReference' in this.type
-            ? this.type.stringifyReference()
+            ? this.type.stringifyReference(options)
             : '';
     }
 }
 
 export class TypeScriptUnknown implements ITypeScriptType {
     public readonly isUnknown = true;
 
-    stringifyReference(): string {
-        return 'unknown';
+    stringifyReference(options: JsonToTypeScriptConversionOptions): string {
+        return options.unknownType ?? 'unknown';
     }
 }
 
 export class TypeScriptObjectField implements IDeclarable {
     public constructor(public readonly type: TypeScriptType, public readonly isOptional = false) {}
 
-    stringifyDeclarationBody(): string {
-        return `${this.isOptional ? '?' : ''}: ${getTypeScriptTypeReference(this.type)}`;
+    stringifyDeclarationBody(options: JsonToTypeScriptConversionOptions): string {
+        return `${this.isOptional ? '?' : ''}: ${getTypeScriptTypeReference(this.type, options)}`;
     }
 }
 
 export class TypeScriptInterface implements ITypeScriptType, IDeclarableTypeScriptType {
     public constructor(public name: string, public readonly fields: Record<string, TypeScriptObjectField>) {}
 
-    stringifyDeclaration({ exportType }: JsonToTypeScriptConversionOptions): string {
-        return `${getExportKeyword(
-            exportType
-        )}interface ${this.stringifyReference()} ${this.stringifyDeclarationBody()}`;
+    stringifyDeclaration(options: JsonToTypeScriptConversionOptions): string {
+        return `${getExportKeyword(options.exportType)}interface ${this.stringifyReference(
+            options
+        )} ${this.stringifyDeclarationBody(options)}`;
     }
 
-    stringifyDeclarationBody(): string {
+    stringifyDeclarationBody(options: JsonToTypeScriptConversionOptions): string {
         return (
             '{\n' +
             mapObject(this.fields, (key, field) => {
-                return `    ${stringifyFieldName(key)}${field.stringifyDeclarationBody()};`;
+                return `    ${stringifyFieldName(key)}${field.stringifyDeclarationBody(options)};`;
             }).join('\n') +
             '\n}'
         );
     }
 
-    stringifyReference(): string {
+    stringifyReference(options: JsonToTypeScriptConversionOptions): string {
         return stringifyTypeName(this.name);
     }
 }
 
 export class TypeScriptArray implements ITypeScriptType {
     public constructor(public readonly type: TypeScriptType) {}
 
-    stringifyReference(): string {
-        const typeReference = getTypeScriptTypeReference(this.type);
+    stringifyReference(options: JsonToTypeScriptConversionOptions): string {
+        const typeReference = getTypeScriptTypeReference(this.type, options);
 
         if (this.type instanceof TypeScriptUnion) {
             return `Array<${typeReference}>`;
@@ -108,7 +108,7 @@ export class TypeScriptArray implements ITypeScriptType {
 export abstract class TypeScriptTypesCombination implements ITypeScriptType {
     protected constructor(public name: string, public readonly types: TypeScriptType[]) {}
 
-    abstract stringifyReference(): string;
+    abstract stringifyReference(options: JsonToTypeScriptConversionOptions): string;
 }
 
 export class TypeScriptUnion extends TypeScriptTypesCombination {
@@ -121,12 +121,12 @@ export class TypeScriptUnion extends TypeScriptTypesCombination {
     //     return `${getExportKeyword(exportType)}type ${this.name} = ${this.stringifyDeclarationBody()};`;
     // }
 
-    stringifyDeclarationBody(): string {
-        return this.types.map(getTypeScriptTypeReference).join(' | ');
+    stringifyDeclarationBody(options: JsonToTypeScriptConversionOptions): string {
+        return this.types.map((type) => getTypeScriptTypeReference(type, options)).join(' | ');
     }
 
-    stringifyReference(): string {
-        return this.stringifyDeclarationBody();
+    stringifyReference(options: JsonToTypeScriptConversionOptions): string {
+        return this.stringifyDeclarationBody(options);
     }
 }
 
@@ -136,12 +136,12 @@ export class TypeScriptTuple extends TypeScriptTypesCombination {
         super(name, types);
     }
 
-    stringifyDeclarationBody(): string {
-        return '[' + this.types.map(getTypeScriptTypeReference).join(', ') + ']';
+    stringifyDeclarationBody(options: JsonToTypeScriptConversionOptions): string {
+        return '[' + this.types.map((type) => getTypeScriptTypeReference(type, options)).join(', ') + ']';
     }
 
-    stringifyReference(): string {
-        return this.stringifyDeclarationBody();
+    stringifyReference(options: JsonToTypeScriptConversionOptions): string {
+        return this.stringifyDeclarationBody(options);
     }
 }
 
diff --git a/src/pages/jsonToTypeScriptPage/utils/getTypeScriptTypeReference.ts b/src/pages/jsonToTypeScriptPage/utils/getTypeScriptTypeReference.ts
@@ -1,12 +1,17 @@
 import { TypeScriptType } from '../types/typescript';
 import { isString } from 'lodash';
+import JsonToTypeScriptConversionOptions from '../types/JsonToTypeScriptConversionOptions';
 
-const getTypeScriptTypeReference = (type: TypeScriptType): string => {
+const getTypeScriptTypeReference = (type: TypeScriptType, options: JsonToTypeScriptConversionOptions): string => {
     if (isString(type)) {
+        if (type === 'null') {
+            return options.nullType ?? type;
+        }
+
         return type;
     }
 
-    return type.stringifyReference();
+    return type.stringifyReference(options);
 };
 
 export default getTypeScriptTypeReference;

Original file line number	Diff line number	Diff line change
`@@ -7,11 +7,11 @@ import JsonToTypeScriptConversionOptions from './JsonToTypeScriptConversionOptio`
`7`	`7`	`import isValidJsIdentifier, { isValidTsTypeFieldName } from '../../../utils/isValidJsIdentifier';`
`8`	`8`
`9`	`9`	`export interface ITypeScriptType {`
`10`		`- stringifyReference(): string;`
	`10`	`+ stringifyReference(options: JsonToTypeScriptConversionOptions): string;`
`11`	`11`	`}`
`12`	`12`
`13`	`13`	`export interface IDeclarable {`
`14`		`- stringifyDeclarationBody(): string;`
	`14`	`+ stringifyDeclarationBody(options: JsonToTypeScriptConversionOptions): string;`
`15`	`15`	`}`
`16`	`16`
`17`	`17`	`export interface IDeclarableTypeScriptType extends IDeclarable {`
`@@ -35,67 +35,67 @@ export class DeclarableTypeScriptType implements IDeclarableTypeScriptType {`
`35`	`35`
`36`	`36`	return `${getExportKeyword(options.exportType)}type ${stringifyTypeName(
`37`	`37`	`this.name`
`38`		- )} = ${this.stringifyDeclarationBody()};`;
	`38`	+ )} = ${this.stringifyDeclarationBody(options)};`;
`39`	`39`	`}`
`40`	`40`
`41`		`- stringifyDeclarationBody(): string {`
	`41`	`+ stringifyDeclarationBody(options: JsonToTypeScriptConversionOptions): string {`
`42`	`42`	`if (isString(this.type)) {`
`43`		`- return this.type;`
	`43`	`+ return getTypeScriptTypeReference(this.type, options);`
`44`	`44`	`}`
`45`	`45`
`46`	`46`	`return 'stringifyDeclarationBody' in this.type`
`47`		`- ? this.type.stringifyDeclarationBody()`
	`47`	`+ ? this.type.stringifyDeclarationBody(options)`
`48`	`48`	`: 'stringifyReference' in this.type`
`49`		`- ? this.type.stringifyReference()`
	`49`	`+ ? this.type.stringifyReference(options)`
`50`	`50`	`: '';`
`51`	`51`	`}`
`52`	`52`	`}`
`53`	`53`
`54`	`54`	`export class TypeScriptUnknown implements ITypeScriptType {`
`55`	`55`	`public readonly isUnknown = true;`
`56`	`56`
`57`		`- stringifyReference(): string {`
`58`		`- return 'unknown';`
	`57`	`+ stringifyReference(options: JsonToTypeScriptConversionOptions): string {`
	`58`	`+ return options.unknownType ?? 'unknown';`
`59`	`59`	`}`
`60`	`60`	`}`
`61`	`61`
`62`	`62`	`export class TypeScriptObjectField implements IDeclarable {`
`63`	`63`	`public constructor(public readonly type: TypeScriptType, public readonly isOptional = false) {}`
`64`	`64`
`65`		`- stringifyDeclarationBody(): string {`
`66`		- return `${this.isOptional ? '?' : ''}: ${getTypeScriptTypeReference(this.type)}`;
	`65`	`+ stringifyDeclarationBody(options: JsonToTypeScriptConversionOptions): string {`
	`66`	+ return `${this.isOptional ? '?' : ''}: ${getTypeScriptTypeReference(this.type, options)}`;
`67`	`67`	`}`
`68`	`68`	`}`
`69`	`69`
`70`	`70`	`export class TypeScriptInterface implements ITypeScriptType, IDeclarableTypeScriptType {`
`71`	`71`	`public constructor(public name: string, public readonly fields: Record<string, TypeScriptObjectField>) {}`
`72`	`72`
`73`		`- stringifyDeclaration({ exportType }: JsonToTypeScriptConversionOptions): string {`
`74`		- return `${getExportKeyword(
`75`		`- exportType`
`76`		- )}interface ${this.stringifyReference()} ${this.stringifyDeclarationBody()}`;
	`73`	`+ stringifyDeclaration(options: JsonToTypeScriptConversionOptions): string {`
	`74`	+ return `${getExportKeyword(options.exportType)}interface ${this.stringifyReference(
	`75`	`+ options`
	`76`	+ )} ${this.stringifyDeclarationBody(options)}`;
`77`	`77`	`}`
`78`	`78`
`79`		`- stringifyDeclarationBody(): string {`
	`79`	`+ stringifyDeclarationBody(options: JsonToTypeScriptConversionOptions): string {`
`80`	`80`	`return (`
`81`	`81`	`'{\n' +`
`82`	`82`	`mapObject(this.fields, (key, field) => {`
`83`		- return ` ${stringifyFieldName(key)}${field.stringifyDeclarationBody()};`;
	`83`	+ return ` ${stringifyFieldName(key)}${field.stringifyDeclarationBody(options)};`;
`84`	`84`	`}).join('\n') +`
`85`	`85`	`'\n}'`
`86`	`86`	`);`
`87`	`87`	`}`
`88`	`88`
`89`		`- stringifyReference(): string {`
	`89`	`+ stringifyReference(options: JsonToTypeScriptConversionOptions): string {`
`90`	`90`	`return stringifyTypeName(this.name);`
`91`	`91`	`}`
`92`	`92`	`}`
`93`	`93`
`94`	`94`	`export class TypeScriptArray implements ITypeScriptType {`
`95`	`95`	`public constructor(public readonly type: TypeScriptType) {}`
`96`	`96`
`97`		`- stringifyReference(): string {`
`98`		`- const typeReference = getTypeScriptTypeReference(this.type);`
	`97`	`+ stringifyReference(options: JsonToTypeScriptConversionOptions): string {`
	`98`	`+ const typeReference = getTypeScriptTypeReference(this.type, options);`
`99`	`99`
`100`	`100`	`if (this.type instanceof TypeScriptUnion) {`
`101`	`101`	return `Array<${typeReference}>`;
`@@ -108,7 +108,7 @@ export class TypeScriptArray implements ITypeScriptType {`
`108`	`108`	`export abstract class TypeScriptTypesCombination implements ITypeScriptType {`
`109`	`109`	`protected constructor(public name: string, public readonly types: TypeScriptType[]) {}`
`110`	`110`
`111`		`- abstract stringifyReference(): string;`
	`111`	`+ abstract stringifyReference(options: JsonToTypeScriptConversionOptions): string;`
`112`	`112`	`}`
`113`	`113`
`114`	`114`	`export class TypeScriptUnion extends TypeScriptTypesCombination {`
`@@ -121,12 +121,12 @@ export class TypeScriptUnion extends TypeScriptTypesCombination {`
`121`	`121`	// return `${getExportKeyword(exportType)}type ${this.name} = ${this.stringifyDeclarationBody()};`;
`122`	`122`	`// }`
`123`	`123`
`124`		`- stringifyDeclarationBody(): string {`
`125`		`- return this.types.map(getTypeScriptTypeReference).join(' \| ');`
	`124`	`+ stringifyDeclarationBody(options: JsonToTypeScriptConversionOptions): string {`
	`125`	`+ return this.types.map((type) => getTypeScriptTypeReference(type, options)).join(' \| ');`
`126`	`126`	`}`
`127`	`127`
`128`		`- stringifyReference(): string {`
`129`		`- return this.stringifyDeclarationBody();`
	`128`	`+ stringifyReference(options: JsonToTypeScriptConversionOptions): string {`
	`129`	`+ return this.stringifyDeclarationBody(options);`
`130`	`130`	`}`
`131`	`131`	`}`
`132`	`132`
`@@ -136,12 +136,12 @@ export class TypeScriptTuple extends TypeScriptTypesCombination {`
`136`	`136`	`super(name, types);`
`137`	`137`	`}`
`138`	`138`
`139`		`- stringifyDeclarationBody(): string {`
`140`		`- return '[' + this.types.map(getTypeScriptTypeReference).join(', ') + ']';`
	`139`	`+ stringifyDeclarationBody(options: JsonToTypeScriptConversionOptions): string {`
	`140`	`+ return '[' + this.types.map((type) => getTypeScriptTypeReference(type, options)).join(', ') + ']';`
`141`	`141`	`}`
`142`	`142`
`143`		`- stringifyReference(): string {`
`144`		`- return this.stringifyDeclarationBody();`
	`143`	`+ stringifyReference(options: JsonToTypeScriptConversionOptions): string {`
	`144`	`+ return this.stringifyDeclarationBody(options);`
`145`	`145`	`}`
`146`	`146`	`}`
`147`	`147`