Add JSON to TypeScript converter, WIP 2

Author: k.golikov

src/pages/jsonToTypeScriptPage/JsonToTypeScriptPage.tsx

@@ -8,6 +8,8 @@ import { editor } from 'monaco-editor';
 import { useDebouncedMemo } from '../../hooks/debouncedMemo';
 import getTypeScriptType from './utils/getTypeScriptType';
 import parseJsonObject from './utils/parseJsonObject';
+import ExportType from './types/ExportType';
+import getAllTypeScriptTypeDeclarations from './utils/getAllTypeScriptTypeDeclarations';
 
 const jsonEditorOptions: editor.IStandaloneEditorConstructionOptions = {
     minimap: { enabled: false }
@@ -29,7 +31,7 @@ const JsonToTypeScriptPage = () => {
             }
 
             const typeScriptType = getTypeScriptType('Root', parseJsonObject(JSON.parse(json)));
-            return 'const result = ' + JSON.stringify(typeScriptType, undefined, 4);
+            return getAllTypeScriptTypeDeclarations(typeScriptType, 'Root', ExportType.ES_MODULE);
         },
         [json],
         50

src/pages/jsonToTypeScriptPage/types/ExportType.ts

@@ -0,0 +1,7 @@
+enum ExportType {
+    NONE = 'NONE',
+    ES_MODULE = 'ES_MODULE',
+    COMMONJS = 'COMMONJS'
+}
+
+export default ExportType;

src/pages/jsonToTypeScriptPage/types/typescript.ts

@@ -1,22 +1,93 @@
 import { JsonPrimitive } from './json';
 import { IObject } from './common';
+import getTypeScriptTypeReference from '../utils/getTypeScriptTypeReference';
+import mapObject from '../../../utils/mapObject';
+import ExportType from './ExportType';
 
-export class TypeScriptUnknown {
+export interface ITypeScriptType {
+    stringifyReference(): string;
+}
+
+export interface IDeclarableTypeScriptType {
+    readonly name: string;
+    stringifyDeclaration(exportType?: ExportType): string;
+    stringifyDeclarationBody(): string;
+}
+
+export class TypeScriptUnknown implements ITypeScriptType {
     public readonly isUnknown = true;
+
+    stringifyReference(): string {
+        return 'unknown';
+    }
 }
 
-export class TypeScriptInterface extends IObject<TypeScriptType> {
+export class TypeScriptInterface extends IObject<TypeScriptType> implements ITypeScriptType, IDeclarableTypeScriptType {
     public constructor(public readonly name: string, public readonly fields: Record<string, TypeScriptType>) {
         super(fields);
     }
+
+    stringifyDeclaration(exportType?: ExportType): string {
+        return `${getExportKeyword(exportType)}interface ${this.name} ${this.stringifyDeclarationBody()}`;
+    }
+
+    stringifyDeclarationBody(): string {
+        return (
+            '{\n' +
+            mapObject(this.fields, (key, value) => {
+                return `    ${key}: ${getTypeScriptTypeReference(value)};`;
+            }).join('\n') +
+            '\n}'
+        );
+    }
+
+    stringifyReference(): string {
+        return this.name;
+    }
 }
 
-export class TypeScriptArray {
+export class TypeScriptArray implements ITypeScriptType {
     public constructor(public readonly type: TypeScriptType) {}
+
+    stringifyReference(): string {
+        const typeReference = getTypeScriptTypeReference(this.type);
+
+        if (this.type instanceof TypeScriptUnion) {
+            return `Array<${typeReference}>`;
+        }
+
+        return `${typeReference}[]`;
+    }
+}
+
+export class TypeScriptUnion implements ITypeScriptType {
+    //, IDeclarableTypeScriptType {
+    public constructor(public readonly name: string, public readonly types: TypeScriptType[]) {}
+
+    // stringifyDeclaration(exportType?: ExportType): string {
+    //     return `${getExportKeyword(exportType)}type ${this.name} = ${this.stringifyDeclarationBody()};`;
+    // }
+
+    stringifyDeclarationBody(): string {
+        return this.types.map(getTypeScriptTypeReference).join(' | ');
+    }
+
+    stringifyReference(): string {
+        return this.stringifyDeclarationBody();
+    }
 }
 
-export class TypeScriptUnion {
+//TODO add tuples support
+export class TypeScriptTuple implements ITypeScriptType {
     public constructor(public readonly name: string, public readonly types: TypeScriptType[]) {}
+
+    stringifyDeclarationBody(): string {
+        return '[' + this.types.map(getTypeScriptTypeReference).join(', ') + ']';
+    }
+
+    stringifyReference(): string {
+        return this.stringifyDeclarationBody();
+    }
 }
 
 export type TypeScriptType =
@@ -25,3 +96,11 @@ export type TypeScriptType =
     | TypeScriptArray
     | TypeScriptUnion
     | TypeScriptUnknown;
+
+const getExportKeyword = (exportType: ExportType = ExportType.NONE) => {
+    return {
+        [ExportType.NONE]: '',
+        [ExportType.ES_MODULE]: 'export ',
+        [ExportType.COMMONJS]: 'module.exports = '
+    }[exportType];
+};

src/pages/jsonToTypeScriptPage/utils/getAllTypeScriptTypeDeclarableTypes.ts

@@ -0,0 +1,32 @@
+import {
+    IDeclarableTypeScriptType,
+    TypeScriptArray,
+    TypeScriptType,
+    TypeScriptUnion,
+    TypeScriptUnknown
+} from '../types/typescript';
+import { isString } from 'lodash';
+import mapObject from '../../../utils/mapObject';
+
+const getAllTypeScriptTypeDeclarableTypes = (type: TypeScriptType): IDeclarableTypeScriptType[] => {
+    if (isString(type) || type instanceof TypeScriptUnknown) {
+        return []; //getTypeScriptTypeDeclaration(type, name, exportType)
+    }
+
+    if (type instanceof TypeScriptUnion) {
+        return type.types.flatMap((innerType) => getAllTypeScriptTypeDeclarableTypes(innerType));
+    }
+
+    if (type instanceof TypeScriptArray) {
+        return getAllTypeScriptTypeDeclarableTypes(type.type);
+    }
+
+    return [
+        ...mapObject(type.fields, (fieldName, fieldType) => getAllTypeScriptTypeDeclarableTypes(fieldType)).flatMap(
+            (value) => value
+        ),
+        type
+    ];
+};
+
+export default getAllTypeScriptTypeDeclarableTypes;

src/pages/jsonToTypeScriptPage/utils/getAllTypeScriptTypeDeclarations.ts

@@ -0,0 +1,12 @@
+import getAllTypeScriptTypeDeclarableTypes from './getAllTypeScriptTypeDeclarableTypes';
+import { TypeScriptType } from '../types/typescript';
+import getTypeScriptTypeDeclaration from './getTypeScriptTypeDeclaration';
+import ExportType from '../types/ExportType';
+
+const getAllTypeScriptTypeDeclarations = (type: TypeScriptType, name: string, exportType?: ExportType) => {
+    return getAllTypeScriptTypeDeclarableTypes(type)
+        .map((declarable) => getTypeScriptTypeDeclaration(declarable as TypeScriptType, name, exportType))
+        .join('\n\n');
+};
+
+export default getAllTypeScriptTypeDeclarations;

src/pages/jsonToTypeScriptPage/utils/getTypeScriptTypeDeclaration.ts

@@ -0,0 +1,17 @@
+import { TypeScriptType } from '../types/typescript';
+import { isString } from 'lodash';
+import ExportType from '../types/ExportType';
+
+const getTypeScriptTypeDeclaration = (type: TypeScriptType, name: string, exportType?: ExportType): string => {
+    if (isString(type)) {
+        return `type ${name} = ${type};`;
+    }
+
+    if ('stringifyDeclaration' in type) {
+        return type.stringifyDeclaration(exportType);
+    }
+
+    return '';
+};
+
+export default getTypeScriptTypeDeclaration;

src/pages/jsonToTypeScriptPage/utils/getTypeScriptTypeReference.ts

@@ -0,0 +1,12 @@
+import { TypeScriptType } from '../types/typescript';
+import { isString } from 'lodash';
+
+const getTypeScriptTypeReference = (type: TypeScriptType): string => {
+    if (isString(type)) {
+        return type;
+    }
+
+    return type.stringifyReference();
+};
+
+export default getTypeScriptTypeReference;