feat: json to typescript

components.d.ts

@@ -110,6 +110,7 @@ declare module '@vue/runtime-core' {
     JsonMinify: typeof import('./src/tools/json-minify/json-minify.vue')['default']
     JsonToCsv: typeof import('./src/tools/json-to-csv/json-to-csv.vue')['default']
     JsonToToml: typeof import('./src/tools/json-to-toml/json-to-toml.vue')['default']
+    JsonToTs: typeof import('./src/tools/json-to-ts/json-to-ts.vue')['default']
     JsonToYaml: typeof import('./src/tools/json-to-yaml-converter/json-to-yaml.vue')['default']
     JsonViewer: typeof import('./src/tools/json-viewer/json-viewer.vue')['default']
     JwtParser: typeof import('./src/tools/jwt-parser/jwt-parser.vue')['default']
@@ -130,21 +131,16 @@ declare module '@vue/runtime-core' {
     NCode: typeof import('naive-ui')['NCode']
     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
-    NDivider: typeof import('naive-ui')['NDivider']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
     NFormItem: typeof import('naive-ui')['NFormItem']
-    NGi: typeof import('naive-ui')['NGi']
-    NGrid: typeof import('naive-ui')['NGrid']
     NH1: typeof import('naive-ui')['NH1']
     NH3: typeof import('naive-ui')['NH3']
     NIcon: typeof import('naive-ui')['NIcon']
     NInputNumber: typeof import('naive-ui')['NInputNumber']
-    NLabel: typeof import('naive-ui')['NLabel']
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
-    NSpin: typeof import('naive-ui')['NSpin']
     NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
     OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']
     PasswordStrengthAnalyser: typeof import('./src/tools/password-strength-analyser/password-strength-analyser.vue')['default']
@@ -159,6 +155,7 @@ declare module '@vue/runtime-core' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     RsaKeyPairGenerator: typeof import('./src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue')['default']
+    SafelinkDecoder: typeof import('./src/tools/safelink-decoder/safelink-decoder.vue')['default']
     SlugifyString: typeof import('./src/tools/slugify-string/slugify-string.vue')['default']
     SpanCopyable: typeof import('./src/components/SpanCopyable.vue')['default']
     SqlPrettify: typeof import('./src/tools/sql-prettify/sql-prettify.vue')['default']

locales/en.yml

@@ -320,6 +320,10 @@ tools:
     title: JSON to TOML
     description: Parse and convert JSON to TOML.
 
+  json-to-ts:
+    title: JSON to TS
+    description: Parse and convert JSON to TS.
+
   device-information:
     title: Device information
     description: Get information about your current device (screen size, pixel-ratio, user agent, ...)

locales/vi.yml

@@ -307,10 +307,15 @@ tools:
   hash-text:
     title: Mã hóa văn bản
     description: 'Mã hóa một chuỗi văn bản bằng cách sử dụng các hàm bạn cần: MD5, SHA1, SHA256, SHA224, SHA512, SHA384, SHA3 hoặc RIPEMD160'
+
   json-to-toml:
     title: Chuyển đổi JSON sang TOML
     description: Phân tích và chuyển đổi JSON sang TOML.
   
+  json-to-ts:
+    title: Chuyển đổi JSON sang TS
+    description: Phân tích và chuyển đổi JSON sang TS.
+
   device-information:
     title: Thông tin thiết bị
     description: Lấy thông tin về thiết bị hiện tại của bạn (kích thước màn hình, tỷ lệ pixel, user agent, ...)

locales/zh.yml

@@ -316,6 +316,10 @@ tools:
     title: JSON 转 TOML
     description: 解析JSON并将其转换为TOML。
 
+  json-to-ts:
+    title: JSON 转 TS
+    description: 解析JSON并将其转换为TS。
+
   device-information:
     title: 设备信息
     description: 获取有关当前设备的信息（屏幕大小、像素比率、用户代理…）

package.json

@@ -64,6 +64,7 @@
     "highlight.js": "^11.7.0",
     "iarna-toml-esm": "^3.0.5",
     "ibantools": "^4.3.3",
+    "json-to-ts": "^1.7.0",
     "json5": "^2.2.3",
     "jwt-decode": "^3.1.2",
     "libphonenumber-js": "^1.10.28",

src/components/TextareaCopyable.vue

@@ -7,6 +7,7 @@ import sqlHljs from 'highlight.js/lib/languages/sql';
 import xmlHljs from 'highlight.js/lib/languages/xml';
 import yamlHljs from 'highlight.js/lib/languages/yaml';
 import iniHljs from 'highlight.js/lib/languages/ini';
+import tsHljs from 'highlight.js/lib/languages/typescript';
 import { useCopy } from '@/composable/copy';
 
 const props = withDefaults(
@@ -30,6 +31,7 @@ hljs.registerLanguage('html', xmlHljs);
 hljs.registerLanguage('xml', xmlHljs);
 hljs.registerLanguage('yaml', yamlHljs);
 hljs.registerLanguage('toml', iniHljs);
+hljs.registerLanguage('ts', tsHljs);
 
 const { value, language, followHeightOf, copyPlacement, copyMessage } = toRefs(props);
 const { height } = followHeightOf.value ? useElementSize(followHeightOf) : { height: ref(null) };

src/tools/index.ts

@@ -18,6 +18,7 @@ import { tool as emojiPicker } from './emoji-picker';
 import { tool as passwordStrengthAnalyser } from './password-strength-analyser';
 import { tool as yamlToToml } from './yaml-to-toml';
 import { tool as jsonToToml } from './json-to-toml';
+import { tool as jsonToTS } from './json-to-ts';
 import { tool as tomlToYaml } from './toml-to-yaml';
 import { tool as tomlToJson } from './toml-to-json';
 import { tool as jsonToCsv } from './json-to-csv';
@@ -104,6 +105,7 @@ export const toolsByCategory: ToolCategory[] = [
       yamlToToml,
       jsonToYaml,
       jsonToToml,
+      jsonToTS,
       listConverter,
       tomlToJson,
       tomlToYaml,

src/tools/json-to-ts/index.ts

@@ -0,0 +1,13 @@
+import { Braces } from '@vicons/tabler';
+import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';
+
+export const tool = defineTool({
+  name: translate('tools.json-to-ts.title'),
+  path: '/json-to-ts',
+  description: translate('tools.json-to-ts.description'),
+  keywords: ['json', 'parse', 'typescript', 'convert', 'transform'],
+  component: () => import('./json-to-ts.vue'),
+  icon: Braces,
+  createdAt: new Date('2024-05-25'),
+});

src/tools/json-to-ts/json-to-ts.e2e.spec.ts

@@ -0,0 +1,45 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Tool - JSON to TS', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/json-to-ts');
+  });
+
+  test('Has correct title', async ({ page }) => {
+    await expect(page).toHaveTitle('JSON to TS - IT Tools');
+  });
+
+  test('JSON is parsed and outputs clean TS', async ({ page }) => {
+    await page.getByTestId('input').fill(`
+{
+   "foo": "bar",
+   "list": {
+      "name": "item",
+      "another": {
+         "key": "value"
+      }
+   }
+}
+    `.trim());
+
+    const generatedJson = await page.getByTestId('area-content').innerText();
+
+    expect(generatedJson.trim()).toEqual(
+      `
+      interface DataProps {
+        foo: string;
+        list: List;
+      }
+      
+      interface List {
+        name: string;
+        another: Another;
+      }
+      
+      interface Another {
+        key: string;
+      }
+   `.trim(),
+    );
+  });
+});

src/tools/json-to-ts/json-to-ts.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import JSON2TS from 'json-to-ts';
+import JSON5 from 'json5';
+import { withDefaultOnError } from '../../utils/defaults';
+import type { UseValidationRule } from '@/composable/validation';
+
+function convertJsonToTs(value: string) {
+  return JSON2TS(JSON5.parse(value), { rootName: 'DataProps' }).join('\n\n').trim();
+}
+
+function transformer(value: string) {
+  return value.trim() === '' ? '' : withDefaultOnError(() => convertJsonToTs(value), '');
+}
+
+const rules: UseValidationRule<string>[] = [
+  {
+    validator: (v: string) => v === '' || JSON5.parse(v),
+    message: 'Provided JSON is not valid.',
+  },
+];
+</script>
+
+<template>
+  <format-transformer
+    input-label="Your JSON"
+    input-placeholder="Paste your JSON here..."
+    output-label="TS from your JSON"
+    output-language="toml"
+    :input-validation-rules="rules"
+    :transformer="transformer"
+  />
+</template>