在现代化的 JavaScript 应用程序中，GraphQL 已经变得越来越流行。GraphQL 使得前端应用程序从后端可以请求精准的数据，这极大地降低了前端应用程序的复杂性。但是，在使用 GraphQL 进行开发时，我们需要面对一个问题：如何有效地为前端代码生成 GraphQL 的类型定义？
@graphql-codegen/typescript 是一个优秀的 npm 包，能够帮助我们自动从 GraphQL 的 schema 中为 JavaScript 生成 TypeScript 类型定义，因此它成为了开发 GraphQL 应用程序的必备工具之一。
本篇教程将带你入门 @graphql-codegen/typescript 的使用，从安装到使用一步一步教你。最后，我们还将演示一些示例代码，让你更好地理解如何使用它。
安装
首先，你需要安装 @graphql-codegen/typescript 这个 npm 包。你可以使用以下命令来完成这个步骤：
npm install --save-dev @graphql-codegen/typescript graphql
我们还需要保证我们已经安装了 GraphQL 这个包，因为 @graphql-codegen/typescript 包依赖于该包。
配置
随后，我们需要在项目的根目录下创建一个名为 codegen.yml 的文件来配置 @graphql-codegen/typescript。你可以按照以下示例进行配置：
schema: http://localhost:3000/graphql
documents:
- './src/**/*.graphql'
generates:
./graphql-types.ts:
plugins:
- 'typescript'
- 'typescript-operations'这个配置定义了 GraphQL 的 schema 定义文件和 GraphQL 的操作定义文件的位置，并指定了输出文件的位置与 @graphql-codegen/typescript 所使用的生成器插件。当你在项目中更新你的 schema 或者你项目的 GraphQL 文件时，@graphql-codegen/typescript 将自动地生成并更新你的 TypeScript 类型定义文件。
使用
现在，我们已经完成了 @graphql-codegen/typescript 的安装和配置，接下来我们可以开始使用这个包来生成 TypeScript 的类型定义文件。
首先，我们需要在项目中定义 GraphQL Schema，将其保存到于上文配置文件中指定的位置。@graphql-codegen/typescript 将自动从这个 schema 中生成 TypeScript 的类型定义。
接下来，我们还需要在项目中声明 GraphQL 的操作定义文件。这个文件应该类似于这样：
-- -------------------- ---- -------
----- -------- -
----- -
--
----
---------
-
-
-------- -------------- -------- -
----------------- -
----- -----
-- -
--
----
---------
-
-
-------- ----------------- ----- -
----------------- -
--- ---
---------- ----
-- -
-- --- ---------- ---
-
-最后，我们需要执行以下命令：
npx graphql-codegen
这个命令将会自动地根据你的 schema 定义文件和操作定义文件获取所有的 GraphQL 的类型定义，并生成必要的 TypeScript 类型定义文件。
示例代码
在下面的代码示例中，我们将展示如何使用 @graphql-codegen/typescript 从一个 GraphQL schema 中生成 TypeScript 类型定义。
先看一下以下的 GraphQL Schema 定义：
-- -------------------- ---- ------- ---- ---- - --- ---- ----- ------- ------------ ------ ---------- -------- - ---- ----- - ------ -------- - ----- --------------- - ----- ------- ------------ ------ - ---- ----------------- - ----- ---- - ---- -------- - ----------------- ------------------ ------------------ -
我们使用以下命令来安装和配置 @graphql-codegen/typescript 包：
npm install --save-dev @graphql-codegen/typescript graphql
schema: http://localhost:3000/graphql
documents:
- './src/**/*.graphql'
generates:
./graphql-types.ts:
plugins:
- 'typescript'
- 'typescript-operations'接下来，我们就可以在项目中声明以下的 GraphQL 操作定义：
-- -------------------- ---- -------
-------- -------------- -------- -
----------------- -
----- -----
-- -
---- -
--
----
-----------
---------
-
-
-最后，我们在 TypeScript 中即可使用以下定义的类型进行开发：
-- -------------------- ---- -------
------ - ---------------- ------------------------ - ---- -----------------
----- ---------- - ----- ------ ------- -- -
----- ------ - ----- --------------------
----------------
------------------------
---
--------- ------------------
---------- -
-----
--
--
----- --------- - ------------------------------
-- ---
-总结
本篇文章介绍了 @graphql-codegen/typescript 的安装，配置和使用，这是一个非常实用的 npm 包，可以帮助我们自动生成 TypeScript 类型定义文件，从而方便我们在开发 GraphQL 应用程序时的类型检查和类型指导。希望这篇文章能够对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/148471