使用 React、NodeJS 和 ChatGPT 构建 JSON 到 Typescript 的转换器 🚀 TL;DR

2025-05-25

使用 React、NodeJS 和 ChatGPT 构建 JSON 到 Typescript 的转换器🚀

TL;DR

TL;DR

在本文中，您将学习如何使用 ChatGPT API 构建将 JSON 对象转换为 Typescript 接口的 Web 应用程序。

你为什么需要它？

许多网站都提供各种 API。
主要问题通常是在编写代码时，你的代码需要感知响应，结果导致无法完成。

解决方案是发送一个请求，获取结果，然后将其映射到接口中。
另一个选择是查看网站文档（如果有的话）并查找结果，然后将其映射到接口中。
但还有一个更简单的解决方案是发送 JSON 并用 Typescript 返回接口。很简单。

您可以使用JSON-to-typescript库来实现，但我将使用 ChatGPT 向您展示这一点，因为，您知道，我喜欢魔术🪄⭐️

模因

帮我

我已经创建了包含将 JSON 转换为 Typescript 的完整代码的 repo，请随意克隆、使用它，并给我一颗星⭐️🥰

https://github.com/novuhq/json-to-typescript-chatgpt

帮助

什么是 ChatGPT？

ChatGPT 是由OpenAI训练的 AI 语言模型，  用于生成文本并以类似人类对话的方式与用户交互。用户只需几秒钟即可提交请求，并获得各种主题的信息或问题的答案。

ChatGPT 还可以帮助编写、调试和解释代码片段。值得一提的是，ChatGPT 及其 API 目前免费向公众开放。

因此，在本文中，我们将使用它的 API 来构建 JSON 到 Typescript 转换器。

项目设置

在这里，我将指导您创建 Web 应用程序的项目环境。我们将使用 React.js 作为前端，使用 Node.js 作为后端服务器。

通过运行以下代码为 Web 应用程序创建项目文件夹：



mkdir json-to-typescript
cd json-to-typescript
mkdir client server
Enter fullscreen mode Exit fullscreen mode

设置 Node.js 服务器

导航到服务器文件夹并创建一个package.json文件。



cd server & npm init -y
Enter fullscreen mode Exit fullscreen mode

安装 Express、Nodemon 和 CORS 库。



npm install express cors nodemon
Enter fullscreen mode Exit fullscreen mode

ExpressJS是一个快速、简约的框架，它提供了在 Node.js 中构建 Web 应用程序的多种功能；  CORS是一个允许不同域之间通信的 Node.js 包；  Nodemon是一个在检测到文件更改后自动重启服务器的 Node.js 工具。

创建一个index.js文件——Web 服务器的入口点。



touch index.js
Enter fullscreen mode Exit fullscreen mode

使用 Express.js 设置 Node.js 服务器。当您http://localhost:4000/api在浏览器中访问时，下面的代码片段会返回一个 JSON 对象。



//👇🏻index.js
const express = require("express");
const cors = require("cors");
const app = express();
const PORT = 4000;

app.use(express.urlencoded({ extended: true }));
app.use(express.json());
app.use(cors());

app.get("/api", (req, res) => {
    res.json({
        message: "Hello world",
    });
});

app.listen(PORT, () => {
    console.log(`Server listening on ${PORT}`);
});
Enter fullscreen mode Exit fullscreen mode

通过将启动命令添加到package.json文件中的脚本列表中来配置 Nodemon。下面的代码片段使用 Nodemon 启动服务器。



//In server/package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon index.js"
  },
Enter fullscreen mode Exit fullscreen mode

恭喜！您现在可以使用以下命令启动服务器。



npm start
Enter fullscreen mode Exit fullscreen mode

设置 React 应用程序

通过终端导航到客户端文件夹并创建一个新的 React.js 项目。



cd client
npx create-react-app ./
Enter fullscreen mode Exit fullscreen mode

安装 用于 React 的 Monaco 编辑器和 React Copy to Clipboard库。



npm install @monaco-editor/react react-copy-to-clipboard
Enter fullscreen mode Exit fullscreen mode

Monaco Editor for React是一个简单的包，用于向 React 应用程序添加代码编辑器，而 React Copy to Clipboard包允许我们通过单击按钮来复制和粘贴内容。

从 React 应用程序中删除冗余文件，例如徽标和测试文件，并更新App.js文件以显示“Hello World”，如下所示。



function App() {
    return (
        <div>
            <p>Hello World!</p>
        </div>
    );
}
export default App;
Enter fullscreen mode Exit fullscreen mode

导航到src/index.css文件并复制以下代码。它包含设计此项目所需的所有 CSS。



@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap");

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Space Grotesk", sans-serif;
}
.app {
    width: 100%;
    min-height: 100vh;
}
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
}
.header__container {
    width: 100%;
    display: flex;
    align-items: center;
    height: 10vh;
    background-color: #e0f2fe;
}
.header__right {
    display: flex;
    align-items: center;
}
.runBtn {
    padding: 10px 5px;
    width: 100px;
    margin-right: 10px;
    cursor: pointer;
    border: none;
    border-radius: 3px;
    box-shadow: 0 0 1px 1px #e0e0ea;
    background-color: #065f46;
    outline: none;
    color: #fff;
}
.header {
    border: 1px solid #ddd;
    padding: 10px 20px;
    border: 1px solid #e8e2e2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0.5;
    height: 100%;
}
.code__container {
    display: flex;
    height: 95vh;
    width: 100%;
    align-items: flex-start;
}
.minimap {
    display: none;
}
.editor {
    padding: 10px 0px;
    width: 100%;
}
.code,
.output {
    width: 50vw;
}
.deleteIcon {
    height: 25px;
    color: #cf0a0a;
    cursor: pointer;
}
.copyIcon {
    height: 25px;
    color: #3e54ac;
    cursor: pointer;
}
Enter fullscreen mode Exit fullscreen mode

构建应用程序用户界面

在这里，我们将创建 JSON 到 Typescript 转换器的用户界面，以便用户在屏幕左侧添加 JSON 对象，并在屏幕右侧查看 Typescript 中的结果。

开始

首先，在文件夹icons中创建一个文件夹client/src。该icons文件夹将包含上图中的删除和复制图标。



cd client/src
mkdir icons
cd icons
touch Copy.js Delete.js
Enter fullscreen mode Exit fullscreen mode

更新文件以包含来自HeroiconsCopy.js的 SVG 图标 。



import React from "react";

const Copy = () => {
    return (
        <svg
            xmlns='http://www.w3.org/2000/svg'
            viewBox='0 0 24 24'
            fill='currentColor'
            className='w-6 h-6 copyIcon'
        >
            <path d='M7.5 3.375c0-1.036.84-1.875 1.875-1.875h.375a3.75 3.75 0 013.75 3.75v1.875C13.5 8.161 14.34 9 15.375 9h1.875A3.75 3.75 0 0121 12.75v3.375C21 17.16 20.16 18 19.125 18h-9.75A1.875 1.875 0 017.5 16.125V3.375z' />
            <path d='M15 5.25a5.23 5.23 0 00-1.279-3.434 9.768 9.768 0 016.963 6.963A5.23 5.23 0 0017.25 7.5h-1.875A.375.375 0 0115 7.125V5.25zM4.875 6H6v10.125A3.375 3.375 0 009.375 19.5H16.5v1.125c0 1.035-.84 1.875-1.875 1.875h-9.75A1.875 1.875 0 013 20.625V7.875C3 6.839 3.84 6 4.875 6z' />
        </svg>
    );
};

export default Copy;
Enter fullscreen mode Exit fullscreen mode

将以下代码复制到Delete.js文件中。它将为删除按钮渲染一个 SVG 图标。



import React from "react";

const Delete = () => {
    return (
        <svg
            xmlns='http://www.w3.org/2000/svg'
            viewBox='0 0 24 24'
            fill='currentColor'
            className='w-6 h-6 deleteIcon'
        >
            <path
                fillRule='evenodd'
                d='M16.5 4.478v.227a48.816 48.816 0 013.878.512.75.75 0 11-.256 1.478l-.209-.035-1.005 13.07a3 3 0 01-2.991 2.77H8.084a3 3 0 01-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 01-.256-1.478A48.567 48.567 0 017.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 013.369 0c1.603.051 2.815 1.387 2.815 2.951zm-6.136-1.452a51.196 51.196 0 013.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 00-6 0v-.113c0-.794.609-1.428 1.364-1.452zm-.355 5.945a.75.75 0 10-1.5.058l.347 9a.75.75 0 101.499-.058l-.346-9zm5.48.058a.75.75 0 10-1.498-.058l-.347 9a.75.75 0 001.5.058l.345-9z'
                clipRule='evenodd'
            />
        </svg>
    );
};

export default Delete;
Enter fullscreen mode Exit fullscreen mode

更新App.js文件以呈现标题元素，如下所示。



import React from "react";
import Delete from "./icons/Delete";
import Copy from "./icons/Copy";

const App = () => {
    const handleSubmit = () => {
        console.log("Run Button Clicked");
    };

    return (
        <main className='app'>
            <header className='header__container'>
                <div className='header'>
                    <h3>JSON</h3>
                    <div className='header__right'>
                        <button className='runBtn' onClick={handleSubmit}>
                            RUN
                        </button>
                        <Delete />
                    </div>
                </div>

                <div className='header'>
                    <h3>Typescript</h3>
                    <Copy />
                </div>
            </header>

            <div className='code__container'></div>
        </main>
    );
};

export default App;
Enter fullscreen mode Exit fullscreen mode

上面的代码片段显示了 Web 应用程序的标题组件。在接下来的部分中，我将指导您如何将 Monaco 代码编辑器添加到 React 应用程序中。

将 Monaco 代码编辑器添加到 React

Monaco Editor 是一款著名的基于 Web 技术的代码编辑器，它为 VS Code 提供支持，只需一行集成即可支持多种编程语言。

我们在上一节中安装了库。接下来，将其导入到App.js文件中，如下所示。



import React, { useState } from "react";
import Delete from "./icons/Delete";
import Copy from "./icons/Copy";
import Editor from "@monaco-editor/react";

const App = () => {
    const [value, setValue] = useState("");
    const [output, setOutput] = useState("");
    const handleSubmit = () => {
        console.log("Run Button Clicked");
    };

    return (
        <main className='app'>
            <header className='header__container'>
                <div className='header'>
                    <h3>JSON</h3>
                    <div className='header__right'>
                        <button className='runBtn' onClick={handleSubmit}>
                            RUN
                        </button>
                        <Delete />
                    </div>
                </div>

                <div>
                    <h3>Typescript</h3>
                    <Copy />
                </div>
            </header>

            <div className='code__container'>
                <div className='code'>
                    <Editor
                        height='90vh'
                        className='editor'
                        defaultLanguage='json'
                        defaultValue='{ }'
                        value={value}
                        onChange={(value) => setValue(value)}
                    />
                </div>
                <div className='output'>
                    <Editor
                        height='90vh'
                        className='editor'
                        defaultLanguage='typescript'
                        options={{
                            domReadOnly: true,
                            readOnly: true,
                        }}
                        defaultValue=''
                        value={output}
                        onChange={(value) => setOutput(value)}
                    />
                </div>
            </div>
        </main>
    );
};

export default App;
Enter fullscreen mode Exit fullscreen mode
  • 从上面的代码片段来看，
    • 我Editor从 Monaco Editor 包中导入了该组件。
    • 第一个编辑器组件接受诸如高度、值、语言和onChange事件道具等道具。
    • 第二个编辑器组件接受与第一个相同的道具，但带有一个额外的道具，options因为它是只读的，所以可以防止用户编辑其值。

界面

如何在 Node.js 中与 ChatGPT 进行通信

在本节中，您将学习如何在 Node.js 服务器中通过 ChatGPT 的 API 与其通信。我们会将用户提供的 JSON 代码发送到 API，以便将其转换为相应的 Typescript 代码。具体步骤如下：

通过运行以下代码安装 OpenAI API Node.js 库。



npm install openai
Enter fullscreen mode Exit fullscreen mode

在此登录或创建 OpenAI 帐户 

点击Personal导航栏，View API从菜单栏中选择密钥来创建一个新的密钥。

个人的

将 API 密钥复制到计算机上的安全位置；我们很快就会用到它。

将以下代码复制到index.js文件中，配置 API。将 的值替换apiKey为您的 API 密钥。



const { Configuration, OpenAIApi } = require("openai");

const configuration = new Configuration({
    apiKey: "<YOUR_API_KEY>",
});

const openai = new OpenAIApi(configuration);
Enter fullscreen mode Exit fullscreen mode

在服务器上创建一个 POST 路由，它将接受来自前端的 JSON 代码并生成其 Typescript 等效项。



app.post("/convert", (req, res) => {
    console.log(req.body);
});
Enter fullscreen mode Exit fullscreen mode

更新文件handleSubmit中的函数App.js，将用户提供的 JSON 对象发送到/convert服务器上的端点。



const handleSubmit = () => {
    fetch("http://localhost:4000/convert", {
        method: "POST",
        body: JSON.stringify({
            value,
        }),
        headers: {
            "Content-Type": "application/json",
        },
    })
        .then((res) => res.json())
        .then((data) => {
            setOutput(data.response);
        })
        .catch((err) => console.error(err));
};
Enter fullscreen mode Exit fullscreen mode

/convert按照如下所示更新端点。



app.post("/convert", async (req, res) => {
    //👇🏻 Destructure the JSON object
    let { value } = req.body;

    //👇🏻 the ChatGPT prompt
    const prompt = `Convert the JSON object into Typescript interfaces \n ${value} Please, I need the only the code, I don't need any explanations.`;

    const completion = await openai.createChatCompletion({
        model: "gpt-3.5-turbo",
        messages: [{ role: "user", content: prompt }],
    });
    res.json({
        message: "Successful",
        response: completion.data.choices[0].message.content,
    });
});
Enter fullscreen mode Exit fullscreen mode

上面的代码片段从 React 应用接收 JSON 对象，使用 JSON 代码创建提示，并将其发送给 ChatGPT API。包含该代码的 Typescript 等效版本的响应将被发送回客户端。

由于我们已经从 Node.js 服务器检索了响应，因此向应用程序添加加载状态以便在请求待处理时通知用户。

首先，创建一个Loading.js文件并将下面的代码复制到该文件中。



import React from "react";

const Loading = () => {
    return (
        <div className='loading'>
            <h2>Loading...</h2>
        </div>
    );
};

export default Loading;
Enter fullscreen mode Exit fullscreen mode

在文件中添加加载状态App.js。



const [loading, setLoading] = useState(false);
Enter fullscreen mode Exit fullscreen mode

更新handleSubmit函数，当用户点击运行按钮或者请求成功时更新加载状态。



const handleSubmit = () => {
    //👇🏻 sets to true
    setLoading(true);
    fetch("http://localhost:4000/convert", {
        method: "POST",
        body: JSON.stringify({
            value,
        }),
        headers: {
            "Content-Type": "application/json",
        },
    })
        .then((res) => res.json())
        .then((data) => {
            //👇🏻 sets to false
            setLoading(false);
            setOutput(data.response);
        })
        .catch((err) => console.error(err));
};
Enter fullscreen mode Exit fullscreen mode

有条件地渲染包含输出的第二个代码编辑器，如下所示。



return (
    <main className='app'>
        {/* -- other UI components --*/}
        <div className='code__container'>
            <div className='code'>
                <Editor
                    height='90vh'
                    className='editor'
                    defaultLanguage='json'
                    defaultValue='{ }'
                    value={value}
                    onChange={(value) => setValue(value)}
                />
            </div>

            <div className='output'>
                {loading ? (
                    <Loading />
                ) : (
                    <Editor
                        height='90vh'
                        className='editor'
                        defaultLanguage='typescript'
                        options={{
                            domReadOnly: true,
                            readOnly: true,
                        }}
                        defaultValue=''
                        value={output}
                        onChange={(value) => setOutput(value)}
                    />
                )}
            </div>
        </div>
    </main>
);
Enter fullscreen mode Exit fullscreen mode

当用户提交JSON对象进行转换时，会立即显示Loading组件，直到请求成功，然后将结果显示在代码编辑器上。

成功的

恭喜！🎊 应用程序即将完成。接下来，让我们添加一些额外的功能，例如通过单击按钮复制所有 Typescript 代码，以及通过单击按钮清除输入编辑器的所有内容。

如何通过单击按钮复制 Typescript 代码

在这里，您将学习如何使用React-copy-toclipboard库在单击按钮时复制和粘贴内容  。

您已在本教程开始时安装了该软件包。接下来，App.js按照以下步骤将其导入到文件中。



import { CopyToClipboard } from "react-copy-to-clipboard";
Enter fullscreen mode Exit fullscreen mode

App.js在文件中创建一个在内容成功复制后运行的函数。



const copyToClipBoard = () => alert(`Copied ✅`);
Enter fullscreen mode Exit fullscreen mode

将CopyToClipboard包中的组件包裹在 SVG 图标周围，如下所示。



<CopyToClipboard text={output} onCopy={copyToClipBoard}>
    <span>
        <Copy />
    </span>
</CopyToClipboard>
Enter fullscreen mode Exit fullscreen mode

该CopyToClipboard组件接受一个文本道具 - 包含要复制的内容和一个onCopy道具 - 在复制内容时运行的函数。

通过单击按钮删除所有用户输入

要删除所有用户的输入，请将value状态作为 prop传递到<Delete/>组件中。



<Delete setValue={setValue} />
Enter fullscreen mode Exit fullscreen mode

value当用户单击删除图标时更新状态。




import React from "react";



const Delete = ({ setValue }) => {

    return (

        <svg

            xmlns='http://www.w3.org/2000/svg'

            viewBox='0 0 24 24'

            fill='currentColor'

            className='w-6 h-6 deleteIcon'

            onClick={() => setValue("{ }")}

        >

            <path

                fillRule='evenodd'

                d='M16.5 4.478v.227a48.816 48.816 0 013.878.512.75.75 0 11-.256 1.478l-.209-.035-1.005 13.07a3 3 0 01-2.991 2.77H8.084a3 3 0 01-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 01-.256-1.478A48.567 48.567 0 017.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 013.369 0c1.603.051 2.815 1.387 2.815 2.951zm-6.136-1.452a51.196 51.196 0 013.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 00-6 0v-.113c0-.794.609-1.428 1.364-1.452zm-.355 5.945a.75.75 0 10-1.5.058l.347 9a.75.75 0 101.499-.058l-.346-9zm5.48.058a.75.75 0 10-1.498-.058l-.347 9a.75.75 0 001.5.058l.345-9z'

                clipRule='evenodd'

            />

        </svg>

    );

};



export default Delete;
Enter fullscreen mode Exit fullscreen mode




结论

到目前为止，你已经了解到，

  • ChatGPT 是什么
  • 如何在 React 应用中添加高效的代码编辑器，
  • 如何在 Node.js 中与 ChatGPT 进行通信，以及
  • 如何在 React 中单击按钮时复制内容。

本教程将引导您了解使用 ChatGPT API 构建应用程序的示例。借助该 API，您可以创建功能强大的应用程序，应用于各个领域，例如翻译、问答、代码解释或生成等。

本教程的源代码可以在这里找到：

https://github.com/novuhq/json-to-typescript

感谢您的阅读！

帮我

我已经创建了包含将 JSON 转换为 Typescript 的完整代码的 repo，请随意克隆、使用它，并给我一颗星⭐️🥰

https://github.com/novuhq/json-to-typescript-chatgpt

文章来源：https://dev.to/novu/building-a-json-to-typescript-converter-with-react-nodejs-and-chatgpt-46p2
Devto 翻译
PREV
使用 React、Socket.io 和 Push Notifications 构建实时事件警报系统 🚀
NEXT
使用 React、NodeJS 构建论坛