什么是 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;