Json-to-TypeScript: add object type declaration type option (interface, type)

Author: k.golikov

src/pages/jsonToTypeScriptPage/JsonToTypeScriptPage.tsx

@@ -16,7 +16,11 @@ import getLocalStorageKey from '../../utils/getLocalStorageKey';
 import JsonToTypeScriptConversionSelectableOptions, {
     NameTransformer
 } from './types/JsonToTypeScriptConversionSelectableOptions';
-import JsonToTypeScriptConversionOptions, { NullType, UnknownType } from './types/JsonToTypeScriptConversionOptions';
+import JsonToTypeScriptConversionOptions, {
+    NullType,
+    ObjectDeclaration,
+    UnknownType
+} from './types/JsonToTypeScriptConversionOptions';
 import { camelCase, kebabCase, snakeCase } from 'lodash';
 import pascalCase from '../../utils/pascalCase';
 import JsonToTypeScriptSettings from './components/JsonToTypeScriptSettings';
@@ -39,7 +43,8 @@ const defaultSelectableConversionOptions: JsonToTypeScriptConversionSelectableOp
     fieldNameTransformer: NameTransformer.NONE,
     isTuplesEnabled: false,
     nullType: NullType.NULL,
-    unknownType: UnknownType.UNKNOWN
+    unknownType: UnknownType.UNKNOWN,
+    objectDeclaration: ObjectDeclaration.INTERFACE
 };
 
 const nameTransformers: Readonly<Record<NameTransformer, (name: string) => string>> = {

src/pages/jsonToTypeScriptPage/components/JsonToTypeScriptSettings.tsx

@@ -9,7 +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';
+import { NullType, ObjectDeclaration, UnknownType } from '../types/JsonToTypeScriptConversionOptions';
 
 interface Props {
     options: JsonToTypeScriptConversionSelectableOptions;
@@ -101,11 +101,22 @@ const JsonToTypeScriptSettings: FunctionComponent<Props> = ({ options, setOption
                     <Select.Option key={NullType.UNDEFINED}>undefined</Select.Option>
                 </Select>
             </label>
+            <label className={styles.formItem}>
+                <span className={styles.label}>Object declaration</span>
+                <Select
+                    className={styles.input}
+                    value={options.objectDeclaration}
+                    onChange={handleOptionChange('objectDeclaration')}
+                >
+                    <Select.Option key={ObjectDeclaration.INTERFACE}>Interface</Select.Option>
+                    <Select.Option key={ObjectDeclaration.TYPE}>Type</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>
             </label>
-
             <label className={classNames('mt-1', styles.formItem)}>
                 <Switch checked={options.isTuplesEnabled} onChange={handleOptionChange('isTuplesEnabled')} />
                 <Text className="ms-3">

src/pages/jsonToTypeScriptPage/types/JsonToTypeScriptConversionOptions.ts

@@ -10,6 +10,11 @@ export enum UnknownType {
     ANY = 'any'
 }
 
+export enum ObjectDeclaration {
+    INTERFACE = 'INTERFACE',
+    TYPE = 'TYPE'
+}
+
 interface JsonToTypeScriptConversionOptions {
     exportType?: ExportType;
     isReversedOrder?: boolean;
@@ -19,6 +24,7 @@ interface JsonToTypeScriptConversionOptions {
     isTuplesEnabled?: boolean;
     nullType?: NullType;
     unknownType?: UnknownType;
+    objectDeclaration?: ObjectDeclaration;
 }
 
 export default JsonToTypeScriptConversionOptions;

src/pages/jsonToTypeScriptPage/types/typescript.ts

@@ -3,7 +3,7 @@ import getTypeScriptTypeReference from '../utils/getTypeScriptTypeReference';
 import mapObject from '../../../utils/mapObject';
 import ExportType from './ExportType';
 import { filter, isObject, isString } from 'lodash';
-import JsonToTypeScriptConversionOptions from './JsonToTypeScriptConversionOptions';
+import JsonToTypeScriptConversionOptions, { ObjectDeclaration } from './JsonToTypeScriptConversionOptions';
 import isValidJsIdentifier, { isValidTsTypeFieldName } from '../../../utils/isValidJsIdentifier';
 
 export interface ITypeScriptType {
@@ -67,13 +67,22 @@ export class TypeScriptObjectField implements IDeclarable {
     }
 }
 
-export class TypeScriptInterface implements ITypeScriptType, IDeclarableTypeScriptType {
+export class TypeScriptObject implements ITypeScriptType, IDeclarableTypeScriptType {
     public constructor(public name: string, public readonly fields: Record<string, TypeScriptObjectField>) {}
 
     stringifyDeclaration(options: JsonToTypeScriptConversionOptions): string {
-        return `${getExportKeyword(options.exportType)}interface ${this.stringifyReference(
-            options
-        )} ${this.stringifyDeclarationBody(options)}`;
+        const exportKeyword = getExportKeyword(options.exportType);
+        const name = this.stringifyReference(options);
+        const declarationBody = this.stringifyDeclarationBody(options);
+
+        const declarationType = options.objectDeclaration ?? ObjectDeclaration.INTERFACE;
+
+        const declarations: Readonly<Record<ObjectDeclaration, string>> = {
+            [ObjectDeclaration.INTERFACE]: `${exportKeyword}interface ${name} ${declarationBody}`,
+            [ObjectDeclaration.TYPE]: `${exportKeyword}type ${name} = ${declarationBody};`
+        };
+
+        return declarations[declarationType];
     }
 
     stringifyDeclarationBody(options: JsonToTypeScriptConversionOptions): string {
@@ -130,7 +139,6 @@ export class TypeScriptUnion extends TypeScriptTypesCombination {
     }
 }
 
-//TODO add tuples support
 export class TypeScriptTuple extends TypeScriptTypesCombination {
     public constructor(public name: string, public readonly types: TypeScriptType[]) {
         super(name, types);
@@ -147,7 +155,7 @@ export class TypeScriptTuple extends TypeScriptTypesCombination {
 
 export type TypeScriptType =
     | JsonPrimitive
-    | TypeScriptInterface
+    | TypeScriptObject
     | TypeScriptArray
     | TypeScriptUnion
     | TypeScriptTuple

src/pages/jsonToTypeScriptPage/utils/getTypeScriptType.ts

@@ -1,7 +1,7 @@
 import { JsonArray, JsonType } from '../types/json';
 import {
     TypeScriptArray,
-    TypeScriptInterface,
+    TypeScriptObject,
     TypeScriptObjectField,
     TypeScriptTuple,
     TypeScriptType,
@@ -51,7 +51,7 @@ const getTypeScriptType = (
         }
     }
 
-    return new TypeScriptInterface(
+    return new TypeScriptObject(
         typeName,
         chain(jsonType.fields)
             .mapValues((field, name) => {

src/pages/jsonToTypeScriptPage/utils/mergeTypeScriptTypes.ts

@@ -1,7 +1,7 @@
 import { chain, isString, uniq } from 'lodash';
 import {
     TypeScriptArray,
-    TypeScriptInterface,
+    TypeScriptObject,
     TypeScriptObjectField,
     TypeScriptType,
     TypeScriptUnion
@@ -21,7 +21,7 @@ const mergeTypeScriptTypes = (
         return a === b ? singleType : bothTypes;
     }
 
-    if (a instanceof TypeScriptInterface && b instanceof TypeScriptInterface) {
+    if (a instanceof TypeScriptObject && b instanceof TypeScriptObject) {
         const aKeys = Object.keys(a.fields);
         const bKeys = Object.keys(b.fields);
 
@@ -61,7 +61,7 @@ const mergeTypeScriptTypes = (
             }, {} as Record<string, TypeScriptObjectField>)
             .value();
 
-        return new TypeScriptInterface(a.name, mergedFields);
+        return new TypeScriptObject(a.name, mergedFields);
     }
 
     if (a instanceof TypeScriptArray && b instanceof TypeScriptArray) {