编者注：这篇文章于 2022 年 12 月 29 日更新，以提及新功能。
将后端 API 更改同步到客户端应用程序是前端开发人员面临的常见问题。当后端 API 接口发生变化时，可能需要手动更新客户端应用程序以防止错误或崩溃。
Phero 就是为了解决这个问题而设计的。如何使用 Mac 和 Windows 截取 Netflix 的屏幕截图它由Press Play的人员于 2020 年开发，最初创建是为了管理其软件产品的类型和接口，该产品使用大量 API 端点。Phero 是使用 TypeScript 开发的，如何在 PC 和 Android 版 Google 地图上共享自定义路线或方向适用于任何基于 TypeScript 的框架。它将处理后端代码并为前端生成类型安全的客户端。
使用 Phero，如何在 Gmail 中创建自定义邮件列表您可以像调用本地函数一样从前端调用后端服务/函数。如何在 Google 文档中使用附加组件它自 2022 年 9 月以来一直开源。
让我们仔细看看 Phero。
跳跃前进：
Phero 解决什么问题？
Phero 是如何工作的？与 Phero 合作的好处
开始使用 Phero后端设置前端设置运行 CLI 启动开发环境创建 React 客户端应用程序
使用 Phero 处理错误
部署到生产
迁移现有应用程序以使用 Phero
Phero 解决什么问题？
让我们以典型的 Node.js/Express Web API 为例。如何关闭手机和 PC 上的 Discord 通知我们公开如下端点：
# API
export enum UserRole {
ADMIN = "admin",
USER = "user",
}
export interface User {
name: string;
age: number;
role: UserRole;
}
export interface Users {
[key: number]: User;
}
app.get("users/:userId", (req, res) => {
res.send(
{
name: "Jane",
age: 30,
role: UserRole.USER
});
});
在客户端应用程序中，如何在 iPhone、Android 和 Web 上保存来自 Facebook Watch 的视频我们需要创建另一组类型/接口，如何在谷歌浏览器中禁用或启用定位服务然后转换响应 JSON 以获得类型化响应对象。
# Client App
export enum UserRole {
ADMIN = "admin",
USER = "user",
}
export interface User {
name: string;
age: number;
role: UserRole;
}
const response = await fetch(`${Root_URL}/users/1`);
const user = await response.json() as User;
这种模式存在一些问题。首先，如何在 WhatsApp 上隐藏某人的故事客户端和服务器端都有重复的类型和接口。这种重复将使应用程序难以维护。
其次，当 API 更改时（即UserType添加新的），如何在 Discord 上启用和禁用双因素身份验证 (2FA)客户端应用程序如果不更新可能会崩溃——即使您确实更新了客户端，旧版本的客户端应用程序仍然会出现同样的问题。因此，服务器和客户端都需要同时更新，如何在移动和桌面上查看 Spotify 上的歌词以确保向后兼容。
为了克服上述问题，一种常见的做法是向客户端代码添加 JSON 响应。但是额外的验证需要额外的工作并且不够安全，如何在 Canva 上创建可编辑模板因为它无法在编译时发现问题。
Phero 为这个问题提供了一个干净的解决方案。
Phero 是如何工作的？
在幕后，Phero 使用远程过程调用 (RPC)。如何更改 Microsoft Word 中的页面方向RPC 是一种通信协议，它允许一台机器上的程序调用另一台机器上的服务而无需知道它是远程的。
下图显示了使用 RPC 的 Phero 客户端和服务通信。
Phero 与客户端通过 RPC 连接的示意图
您可以使用任何基于 TypeScript 的框架来构建您的后端和前端；如何在 iPhone 和 Android 版 WhatsApp 上发送多张照片否则，支持 Phero 的应用程序包含三个组件：
客户端应用程序：您的客户端应用程序只需要在与服务器交互时使用生成的 Phero 客户端文件
服务器应用程序：服务器组件的入口点是；如何在Discord中使某人静音只要 Phero 文件公开函数，您还可以灵活地组织服务器项目结构Phero.ts
Phero 生成的代码：生成的文件是后端和前端之间的粘合剂，包括客户端存根和服务器端存根文件。存根使服务器和客户端能够使用 HTTP 协议通过 RPC 进行通信
Phero 使用 TypeScript 编译器 API 来分析类型和接口。如何删除移动和网络上的 YouTube 搜索历史记录它还生成验证器来解析客户端和服务器之间传入和传出的数据。它暴露了后端暴露的所有域类型和接口；因此，如果返回拼写错误或不正确的数据，将引发编译时错误。
与 Phero 合作的好处
Phero 的优势包括：
纯 TypeScript（不需要其他依赖项）
端到端类型安全
独立的后端和前端，就像它们没有分开一样
使用任何基于 TypeScript 的框架
开始使用 Phero
让我们来看看构建 Phero 应用程序的过程。如何在 Web 和移动设备上更改 Gmail 中的字体样式由于 Phero 是一个纯 TypeScript 库，因此唯一的依赖项是 npm 和 TypeScript。
后端设置
首先，让我们初始化一个 Node.js 应用程序。如何在 Microsoft Word 中使用不同类型的超链接我们在下面创建一个api目录。如何使用不同的表情符号对 WhatsApp 消息做出反应它可以命名为任何你想要的。
# bash script
# Create a Server folder
mkdir api
cd ./api
# Initialise the server app, and get TypeScript ready
npm init -y
npm install typescript --save-dev
npx tsc --init
# edit tsconfig.json file to add the following entries
# it is a temporary workaround until the bug is fixed in Phero CLI
{
"compilerOptions": {
...
"rootDir": "src",
"outDir": "dist"
}
}
# Add Phero to your backend project
npx phero init server
上述命令成功完成后，文件夹中就会多出一个新文件。phero.tsapi/src
# api/src/phero.ts
import { createService } from '@phero/server'
async function helloWorld(name: string): Promise<string> {
return `Hi there, ${name}!`
}
export const helloWorldService = createService({
helloWorld
})
生成的文件公开服务并准备好供客户端使用。Phero.tshelloWorld
前端设置
让我们运行以下脚本来设置客户端。如何在 Google 文档中创建和管理项目我们创建一个app子文件夹，但它可以命名为其他名称。Phero CLI 可以扫描依赖项以确定项目是 a还是project。phero-serverphero-client
# bash script
# from your project root directory, create a app subfolder
mkdir app
cd ../app
# initialise a node app
npm init -y
npm install typescript --save-dev
npx tsc --init
# Add Phero to your frontend project:
npx phero init client
该phero init client命令安装并生成一个文件。@phero/clientPhero.ts
# app/src/Phero.ts
import { PheroClient } from "./phero.generated";
const fetch = window.fetch.bind(this);
const client = new PheroClient(fetch);
async function main() {
const message = await client.helloWorldService.helloWorld('Jim')
console.log(message) // `Hi there, Jim!`
}
main()
运行 CLI 启动开发环境
现在我们可以运行 Phero CLI 来启动开发环境。
# back to the project root directory
cd ../
npx phero
上述命令启动服务端，如何在手机和网络上锁定 Facebook 个人资料同时为前端（或多个前端）生成SDK。您应该在控制台中看到以下输出：
控制台中 Phero SDK 安装的输出
在前端项目中，将生成一个文件。它是用于连接到服务器存根的 RPC 客户端存根。顾名思义，它不应手动更新。当 CLI 运行时，如何关闭 YouTube 上的缩略图预览它会自动与任何服务器端更改同步。phero.generated.ts
虽然基本设置现在已经完成，但我们无法运行客户端来证明它正在运行，如何从 Outlook for Desktop 和 Web 导出联系人因为我们还没有合适的客户端应用程序可以在浏览器中运行。
让我们构建一个 React 客户端应用程序来对其进行端到端测试。
创建 React 客户端应用程序
运行以下命令以生成 React 应用程序的框架。
npx create-react-app react-app --template typescript
然后，您可以启动应用程序，如何在 Google 文档中创建和自定义要点如下所示。
cd react-app
npm start
现在我们有了一个可用的 React 应用程序，如何在移动设备和桌面设备上的 Canva 演示文稿中添加动画所以下一步是向其中添加 Phero。
# bash script
npx phero init client
cd .. # Back to project root directory
# run Phero CLI to start the dev environment
npx phero
上面的命令将在 React 项目中生成该文件。phero.generated.ts
最后一步是打开并用以下代码片段替换原始代码：src/App.tsx
import { PheroClient } from './phero.generated';
import { useCallback, useEffect } from "react";
const phero = new PheroClient(window.fetch.bind(this))
function App() {
const getHello = useCallback(async () => {
const message = await phero.helloWorldService.helloWorld('Jim');
console.log(message);
}, [])
useEffect(() => {
getHello()
}, [getHello])
上面的代码片段将初始化 a PheroClient，如何在移动设备和桌面设备上的 Canva 中添加动画并调用该方法。helloWorldService.helloWorld
要验证该应用程序是否正常工作，如何从电报帐户注销设备请打开并打开Chrome DevTools。您可以在“网络”选项卡中看到控制台消息和客户端到服务器的 RPC 调用。http://localhost:3000/
网络选项卡中显示的客户端-服务器 RPC 调用
您可以在GitHub 存储库中找到相关的源代码。
使用 Phero 处理错误
使用 Phero，我们可以像处理本地函数一样在前端处理自定义服务器端错误。
让我们继续前面的 API 示例。如何连接两个 Amazon Echo 扬声器以获得立体声如果无法通过给定的用户 ID 找到用户，我们希望UserNotExistException在后端抛出错误。
class UserNotExistException extends Error {
constructor(userId: number) {
super()
}
}
app.get("users/:userId", (req, res) => {
const user = db.getById(userId);
if(user === null) {
throw new UserNotExistException(userId);
}
return user;
});
然后在前端，我们可以按如下方式处理错误。请注意，UserNotExistException由生成的 Phero 文件在客户端公开。
import {
PheroClient,
UserNotExistException,
} from "./phero.generated"
const fetch = window.fetch.bind(this)
const client = new PheroClient(fetch)
try {
const user = await client.userService.getUser(1)
} catch (error) {
if (error instanceof UserNotExistException ) {
console.log("User not found")
} else {
console.log("Unexpected error")
}
}
同样，我们在 Phero 的错误处理中获得了类型安全。如何在 Microsoft Outlook 和 Gmail 中发送 GIF此外，它userId在服务器端被填充为错误的属性，并且可以在客户端通过访问。error.userId
部署到生产
在本地开发环境中，默认的 Phero 服务器 API 在. 当部署到更高的环境或生产环境时，您可能需要使用不同的端口号。与任何 Node.js API 一样，可以通过在运行时传入环境变量或使用文件来配置端口号。port 3030PORT.env
例如，要在以下位置运行服务器 API ：port 8080
cd ./.build
PORT=8080 node index.js
在非本地环境中，您可能还需要使 API URl 在客户端可配置。我们可以将 URl 存储在环境变量中并将 URL 传递给PheroClient如下所示。
import { PheroClient } from "./phero.generated"
const client = new PheroClient(fetch, `${API_ROOT}`)
要构建用于部署的服务器代码包，请运行以下命令。
cd ./server
npx phero server export
这会将捆绑文件生成到一个目录中。服务器可以使用标准的 Node.js 命令启动。.build
目前，Phero 服务器可以在任何基于节点的服务器上运行。以下新的导出和部署功能可用于不同的云平台：
节点.js
谷歌云
韦塞尔
迁移现有应用程序以使用 Phero
如果您想迁移现有的服务器应用程序以使用 Phero，您可能需要先重组您的 Phero 应用程序。
Phero 没有很多限制。您只需将 定义为后端应用程序的入口点，并从 Phero 文件中导出您的服务。您可以使用任何基于 TypeScript 的框架来设计您的服务和功能。Phero.ts
假设我们需要将 Node.js/Express API 应用程序迁移到 Phero。我们需要定义需要从前端调用的清晰的函数“组”。在 Express 中，您通常会将它们分组为“ Routers”。我们可以将这些组隐藏到 Phero 中的服务中。您当前在这些路由器中拥有的所有路由都可以迁移到常规的 TypeScript 函数。
例如，这个函数：
router.post('/example-route', (req, res) => {
const data: MyData = req.body
res.send({ output: 123 })
})
路由器迁移后会变成下面这样：
async function exampleFunction(data: MyData): Promise<{ output: number }> {
return { output: 123 }
}
在设计新的 Phero 服务接口时，您应该考虑类型。如果您只使用原始类型，如字符串和数字，Phero 附带的类型安全可能对您来说有点过分了。在 Phero 后端定义良好约束的类型将帮助您在前端检测编译时的错误。
概括
Phero 是后端和前端之间的类型安全粘合剂。这是确保前端开发中更好的类型安全性的可行解决方案。使用 Phero，您可以从具有端到端类型安全性的前端调用后端函数或处理后端错误。它将帮助你写出更简洁的代码，安心重构。