如果你是一名前端开发人员，并且正在使用 GraphQL 来处理你的 API 查询，你可能会遇到生成 TypeScript 接口的问题。幸运的是，npm 上有一个神奇的包 graphql-schema-to-interfaces 可以帮助我们自动化生成 TypeScripts 接口。
什么是 graphql-schema-to-interfaces？
graphql-schema-to-interfaces 是一个基于 GraphQL schema 自动生成 TypeScript 接口定义的包。它可以帮助我们自动化生成 TypeScript 接口，并且减少了手写接口的复杂度和出错率。
如何使用 graphql-schema-to-interfaces？
首先，我们需要安装该包。我们可以运行以下命令：
npm install graphql-schema-to-interfaces --save-dev
接下来，我们需要在我们的 TypeScript 代码中导入该包并使用它来生成接口定义。请看以下示例代码：
-- -------------------- ---- -------
------ - ----------------- - ---- -------------------------------
------ - -- -- ---- -----
----- -------- - --------------------
----- -------------- - -------------------
-------------- ----------
----------- ----------------
---
---------------------- --------------- ----- -- -
-- ----- -
-----------------
-
---在上面的代码中，我们导入了 graphql-schema-to-interfaces 并调用了 generateNamespace 函数，该函数会读取 schema.json 文件并自动生成 TypeScript 接口。最后，我们将生成的 TypeScript 接口写入到 generatedTypes.ts 文件中。
示例代码
让我们假设我们有一个 GraphQL 查询：
query {
users {
id
name
email
}
}该查询会返回一组用户对象，每个用户对象包含 id、name 和 email 字段。现在，我们来使用 graphql-schema-to-interfaces 自动生成 TypeScript 接口定义。
首先，我们需要将该查询转换成一个 GraphQL schema。我们可以使用 graphql-tools 包来进行转换。以下是一个示例 schema：
-- -------------------- ---- -------
----- - -------------------- - - -------------------------
----- -------- - -
---- ---- -
--- ---
----- -------
------ -------
-
---- ----- -
------ ------
-
--
----- --------- - -
------ -
------ -- -- -
- --- ---- ----- ------- ------ ------------------ --
- --- ---- ----- ------- ------ ------------------ --
--
--
--
----- ------ - ---------------------- --------- --------- ---
现在，我们已经有了 GraphQL schema，接下来我们来使用 graphql-schema-to-interfaces 自动生成 TypeScript 接口定义。以下是一个示例代码：
-- -------------------- ---- -------
------ - ----------------- - ---- -------------------------------
------ - -- -- ---- -----
----- -------- - --------------------
----- -------------- - -------------------
-------------- ----------
----------- -------
---
---------------------- --------------- ----- -- -
-- ----- -
-----------------
-
---
在上面的代码中，我们调用了 generateNamespace 函数，并将参数 namespaceName 设置为 MyTypes，将参数 schemaText 设置为上面的示例 schema。生成的 TypeScript 接口定义将写入到文件 generatedTypes.ts 中。
生成的 TypeScript 接口定义如下：
-- -------------------- ---- -------
------ --------- ------- -
------ --------- ----- -
----------- --------
------ ------------- - --------
-
------ --------- ---- -
----------- -------
--- -------
----- -------
------ -------
-
-
现在，我们可以在我们的 TypeScript 代码中使用生成的接口定义了：
-- -------------------- ---- -------
------ - ------- - ---- -------------------
----- ---------- - ----
----- -
----- -
--
----
-----
-
-
--
---- --------- - -----------------------
结论
使用 graphql-schema-to-interfaces 可以帮助我们自动化生成 TypeScript 接口定义，从而减少手写接口的复杂度和出错率。它可以让我们更加专注于业务逻辑的实现，并提高代码质量。希望这篇文章对你有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600558d281e8991b448d61e2