什么是 ChatGPT ？
ChatGPT 是一种由 OpenAI 训练的 AI 语言模型，可以生成文本并以类似人类的
对话方式与用户进行交互。用户可以在短短几秒钟内提交请求并获得信息或从广
泛的主题中获得问题的答案。
ChatGPT 还有助于编写、调试和解释代码片段。 值得一提的是，ChatGPT 及其
API 目前免费开放给公众使用。
因此在本文中，我们将使用它的 API 构建一个 JSON 到 Typescript 的转换器
项目设置
在这里，我们会为 Web 应用创建项目环境。 我们将在前端使用 React.js，在后
端使用 Node.js
通过运行以下代码为 Web 应用创建项目文件夹：
mkdir json-to-typescript-cncd 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 对象
//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 应用
通过终端导航到根目录并创建一个新的 React.js 项目
npm create vite@latest
✔ Project name: client
✔ Select a framework: › React
✔ Select a variant: › JavaScript
cd client
npm i 复制代码
在 client 目录安装 Monaco Editor for React 和 React Copy to Clipboard 库
npm install @monaco-editor/react react-copy-to-clipboard 复制代码
Monaco Editor for React 是一个十分简单的包，用于将代码编辑器添加到 React
应用程序，而 React Copy to Clipboard 包允许我们通过单击按钮复制和粘贴内容
从 React 应用程序中删除多余的文件，并更新 App.jsx 文件以显示 “Hello
World” ，如下所示。
function App() {
return (
<div>
<p>Hello World!</p>
</div>
);
}export default App;复制代码
如下所示，更新 src/index.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;
