基于 ChatGPT 和 React 搭建 JSON 转 TS 的 Web 应用

hello 大家好，这篇文章想跟大家聊聊 基于 ChatGPT 和 React 搭建 JSON 转 TS 的 Web 应用，如果大家遇到任何问题，欢迎联系我，点击此处咨询>>

在本文中，你将学习如何使用 ChatGPT API 构建一个将 JSON 对象转换为 Typescript interface 的 Web 应用

💡 欢迎加入「🌍独立全栈开发交流群」，一起学习交流前端和Node端技术

为什么你需要它？

许多网站为不同的场景提供 API

简单的解决方案是发送 JSON 并返回 Typescript 中的interface

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

​

什么是 ChatGPT ？

ChatGPT 是一种由 OpenAI 训练的 AI 语言模型，可以生成文本并以类似人类的对话方式与用户进行交互。用户可以在短短几秒钟内提交请求并获得信息或从广泛的主题中获得问题的答案。

ChatGPT 还有助于编写、调试和解释代码片段。 值得一提的是，ChatGPT 及其 API 目前免费开放给公众使用。

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

项目设置

在这里，我们会为 Web 应用创建项目环境。 我们将在前端使用 React.js，在后端使用 Node.js

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

mkdir json-to-typescript-cn
cd json-to-typescript-cn

设置 Node.js 服务端

进入 server 目录并创建一个 package.json 文件

mkdir server

cd server & npm init -y

安装 Express， Nodemon ， CORS， dotenv 包

npm install express cors nodemon dotenv

ExpressJS 是一个快速、极简的框架，它提供了多种用于在 Node.js 中构建 Web 应用程序的功能； CORS 是一个允许不同域之间通信的 Node.js 包，而 Nodemon 是一个在检测到文件更改后自动重启服务器的 Node.js 工具。Dotenv 是一个零依赖模块，它将环境变量从 .env 文件加载到 process.env 中。

创建一个 index.js 文件作为 Web 服务器的入口

touch index.js

 使用 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(`Node.js 服务正在监听 ${PORT} 端口 ...`);
});

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

//在 server/package.json 文件中

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

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

npm start

设置 React 应用