Json-To-TypeScript: add tuple support (unstable)

Author: k.golikov

src/pages/jsonToTypeScriptPage/JsonToTypeScriptPage.tsx

@@ -94,7 +94,11 @@ const JsonToTypeScriptPage = () => {
             } catch (e) {
                 setError(getErrorMessage(e));
 
-                return noResult;
+                if (e instanceof SyntaxError) {
+                    return noResult;
+                } else {
+                    throw e;
+                }
             }
         },
         [json, conversionOptions],

src/pages/jsonToTypeScriptPage/components/JsonToTypeScriptSettings.tsx

@@ -2,7 +2,7 @@ import React, { Dispatch, FunctionComponent, SetStateAction } from 'react';
 import JsonToTypeScriptConversionSelectableOptions, {
     NameTransformer
 } from '../types/JsonToTypeScriptConversionSelectableOptions';
-import { Button, Col, Input, Select, Switch, Tooltip } from 'antd';
+import { Button, Col, Input, Select, Switch, Tag } from 'antd';
 import useChangeStateHandler from '../../../hooks/useChangeStateHandler';
 import styles from './JsonToTypeScriptSettings.module.scss';
 import ExportType from '../types/ExportType';
@@ -88,13 +88,13 @@ const JsonToTypeScriptSettings: FunctionComponent<Props> = ({ options, setOption
             </label>
 
             <label className={classNames('mt-1', styles.formItem)}>
-                <Switch checked={options.isTuplesEnabled} onChange={handleOptionChange('isTuplesEnabled')} disabled />
-                <Tooltip title="Coming soon" placement="bottom">
-                    <Text className="ms-3" type="secondary">
-                        Enable tuples
-                        {/*<Text italic type="secondary" className="ms-2">Coming soon</Text>*/}
-                    </Text>
-                </Tooltip>
+                <Switch checked={options.isTuplesEnabled} onChange={handleOptionChange('isTuplesEnabled')} />
+                <Text className="ms-3">
+                    Enable tuples{' '}
+                    <Tag color="warning" className="ms-1">
+                        unstable
+                    </Tag>
+                </Text>
             </label>
         </Col>
     );

src/pages/jsonToTypeScriptPage/types/typescript.ts

@@ -105,9 +105,17 @@ export class TypeScriptArray implements ITypeScriptType {
     }
 }
 
-export class TypeScriptUnion implements ITypeScriptType {
+export abstract class TypeScriptTypesCombination implements ITypeScriptType {
+    protected constructor(public name: string, public readonly types: TypeScriptType[]) {}
+
+    abstract stringifyReference(): string;
+}
+
+export class TypeScriptUnion extends TypeScriptTypesCombination {
     //, IDeclarableTypeScriptType {
-    public constructor(public name: string, public readonly types: TypeScriptType[]) {}
+    public constructor(public name: string, public readonly types: TypeScriptType[]) {
+        super(name, types);
+    }
 
     // stringifyDeclaration(exportType?: ExportType): string {
     //     return `${getExportKeyword(exportType)}type ${this.name} = ${this.stringifyDeclarationBody()};`;
@@ -123,8 +131,10 @@ export class TypeScriptUnion implements ITypeScriptType {
 }
 
 //TODO add tuples support
-export class TypeScriptTuple implements ITypeScriptType {
-    public constructor(public name: string, public readonly types: TypeScriptType[]) {}
+export class TypeScriptTuple extends TypeScriptTypesCombination {
+    public constructor(public name: string, public readonly types: TypeScriptType[]) {
+        super(name, types);
+    }
 
     stringifyDeclarationBody(): string {
         return '[' + this.types.map(getTypeScriptTypeReference).join(', ') + ']';
@@ -140,6 +150,7 @@ export type TypeScriptType =
     | TypeScriptInterface
     | TypeScriptArray
     | TypeScriptUnion
+    | TypeScriptTuple
     | TypeScriptUnknown;
 
 const getExportKeyword = (exportType: ExportType = ExportType.NONE) => {

src/pages/jsonToTypeScriptPage/utils/getAllTypeScriptTypeInnerDeclarableTypes.ts

@@ -3,7 +3,7 @@ import {
     IDeclarableTypeScriptType,
     TypeScriptArray,
     TypeScriptType,
-    TypeScriptUnion,
+    TypeScriptTypesCombination,
     TypeScriptUnknown
 } from '../types/typescript';
 import { isObject, isString } from 'lodash';
@@ -19,7 +19,7 @@ const getAllTypeScriptTypeInnerDeclarableTypes = (
         return []; //getTypeScriptTypeDeclaration(type, name, exportType)
     }
 
-    if (type instanceof TypeScriptUnion) {
+    if (type instanceof TypeScriptTypesCombination) {
         return type.types.flatMap((innerType) => getAllTypeScriptTypeInnerDeclarableTypes(innerType, options, true));
     }
 

src/pages/jsonToTypeScriptPage/utils/getJsonType.ts

@@ -4,7 +4,7 @@ import { chain, isArray, isBoolean, isNil, isObject, isString, mapValues } from
 const getJsonType = (object: unknown): JsonType => {
     if (isObject(object)) {
         if (isArray(object)) {
-            return new JsonArray(chain(object).map(getJsonType).uniq().value()); //TODO remove `uniq` here?
+            return new JsonArray(chain(object).map(getJsonType).value());
         }
 
         return new JsonObject(

src/pages/jsonToTypeScriptPage/utils/getTypeScriptType.ts

@@ -1,5 +1,12 @@
 import { JsonArray, JsonType } from '../types/json';
-import { TypeScriptArray, TypeScriptInterface, TypeScriptObjectField, TypeScriptType } from '../types/typescript';
+import {
+    TypeScriptArray,
+    TypeScriptInterface,
+    TypeScriptObjectField,
+    TypeScriptTuple,
+    TypeScriptType,
+    TypeScriptUnknown
+} from '../types/typescript';
 import { chain, isString } from 'lodash';
 import { singular } from 'pluralize';
 import getMergedTypeScriptTypes from './mergeTypeScriptTypesList';
@@ -23,10 +30,25 @@ const getTypeScriptType = (
     }
 
     if (jsonType instanceof JsonArray) {
-        const typeScriptTypes = jsonType.types.map((type) => getTypeScriptType(arrayElementName, type, options));
-        const mergedTypeScriptTypes = getMergedTypeScriptTypes(typeScriptTypes);
+        if (options.isTuplesEnabled) {
+            if (jsonType.types.length === 0) {
+                return new TypeScriptTuple('', []);
+            }
 
-        return new TypeScriptArray(mergedTypeScriptTypes);
+            const typeScriptTypes = jsonType.types.map((type) => getTypeScriptType(arrayElementName, type, options));
+            // const mergedType = getMergedTypeScriptTypes(typeScriptTypes, options);
+
+            return new TypeScriptTuple(arrayElementName, typeScriptTypes);
+        } else {
+            if (jsonType.types.length === 0) {
+                return new TypeScriptArray(new TypeScriptUnknown());
+            }
+
+            const typeScriptTypes = jsonType.types.map((type) => getTypeScriptType(arrayElementName, type, options));
+            const mergedType = getMergedTypeScriptTypes(typeScriptTypes, options);
+
+            return new TypeScriptArray(mergedType);
+        }
     }
 
     return new TypeScriptInterface(

src/pages/jsonToTypeScriptPage/utils/mergeTypeScriptTypes.ts

@@ -7,8 +7,13 @@ import {
     TypeScriptUnion
 } from '../types/typescript';
 import getTypeScriptUnion from './getTypeScriptUnion';
+import JsonToTypeScriptConversionOptions from '../types/JsonToTypeScriptConversionOptions';
 
-const mergeTypeScriptTypes = (a: TypeScriptType, b: TypeScriptType): TypeScriptType => {
+const mergeTypeScriptTypes = (
+    a: TypeScriptType,
+    b: TypeScriptType,
+    options: JsonToTypeScriptConversionOptions
+): TypeScriptType => {
     const singleType = a;
     const bothTypes = getTypeScriptUnion('', [a, b]);
 
@@ -49,7 +54,7 @@ const mergeTypeScriptTypes = (a: TypeScriptType, b: TypeScriptType): TypeScriptT
 
                 const isOptional = aField.isOptional || bField.isOptional;
 
-                const mergedFieldType = mergeTypeScriptTypes(aField.type, bField.type);
+                const mergedFieldType = mergeTypeScriptTypes(aField.type, bField.type, options);
 
                 result[fieldKey] = new TypeScriptObjectField(mergedFieldType, isOptional);
                 return result;
@@ -60,7 +65,7 @@ const mergeTypeScriptTypes = (a: TypeScriptType, b: TypeScriptType): TypeScriptT
     }
 
     if (a instanceof TypeScriptArray && b instanceof TypeScriptArray) {
-        const mergedTypes = mergeTypeScriptTypes(a.type, b.type);
+        const mergedTypes = mergeTypeScriptTypes(a.type, b.type, options);
         return new TypeScriptArray(mergedTypes);
     }
 
@@ -89,7 +94,7 @@ const mergeTypeScriptTypes = (a: TypeScriptType, b: TypeScriptType): TypeScriptT
         }
 
         const unionObject = union.types[unionSameTypeIndex];
-        union.types[unionSameTypeIndex] = mergeTypeScriptTypes(unionObject, notUnion);
+        union.types[unionSameTypeIndex] = mergeTypeScriptTypes(unionObject, notUnion, options);
         return union;
     }
 

src/pages/jsonToTypeScriptPage/utils/mergeTypeScriptTypesList.ts

@@ -1,14 +1,18 @@
 import { TypeScriptType } from '../types/typescript';
 import mergeTypeScriptTypes from './mergeTypeScriptTypes';
+import JsonToTypeScriptConversionOptions from '../types/JsonToTypeScriptConversionOptions';
 
 //TODO
-const getMergedTypeScriptTypes = (types: TypeScriptType[]): TypeScriptType => {
+const getMergedTypeScriptTypes = (
+    types: TypeScriptType[],
+    options: JsonToTypeScriptConversionOptions
+): TypeScriptType => {
     return types.reduce((result, value) => {
         if (result === undefined) {
             return value;
         }
 
-        return mergeTypeScriptTypes(result, value);
+        return mergeTypeScriptTypes(result, value, options);
     }, undefined as unknown as TypeScriptType);
 };