GraphQL 是一种优秀的查询语言，在前端开发中受到了广泛的应用。使用 TypeScript 可以让代码更加的规范和易于维护。在这篇文章中，我们将介绍如何使用 npm 包 graphql-typescript-definitions 来将 GraphQL 的 Schema 转化为 TypeScript 声明，并最终生成一个 TypeScript 定义文件。
准备工作
在使用 graphql-typescript-definitions 的时候，需要先安装相应的软件和工具：
TypeScript：使用 npm 包管理器来安装，命令为：
npm install -g typescript
GraphQL：使用 npm 包管理来安装，命令为：
npm install graphql
graphql-typescript-definitions：使用 npm 包管理来安装，命令为：
npm install graphql-typescript-definitions
使用 graphql-typescript-definitions
安装完成后，在项目根目录下创建一个名为 types 的文件夹，用来存放生成的 TypeScript 定义文件。然后，在 package.json 中添加以下命令：
"scripts": {
"gen-types": "graphql-typescript-definitions <schema.json> <output.ts> --deriveFieldTypeName --enumPrefix"
}其中，
<schema.json>：指定 GraphQL 的 Schema 文件路径，可以是远程的 URL 地址，也可以是本地的文件路径。本文以本地路径为例，即项目根目录下的 schema.json；<output.ts>：指定 TypeScript 定义文件的输出路径和文件名，如 ./types/schema.ts；--deriveFieldTypeName：指定是否自动从字段名中推断类型，如果启用，会将类名、字段名和类型名通过 _ 隔开；--enumPrefix：指定是否要在所有枚举类型的名称前面追加一个前缀，如E。
接下来，我们运行该命令即可生成 TypeScript 定义文件：
npm run gen-types
在运行命令之后，我们在 types 文件夹下成功生成了一个 schema.ts 的文件，文件内容如下：
-- -------------------- ---- -------
------ ---- ----- - -
------------ --------
------- -------------------
------- -------------------------
--
------ ---- ---- - -
------------ -------
---- ---------------------
------- -------------------------
-------- -------------------------
--
------ ---- ----------------- -
------ - ---------
------- - ---------
-
------ ---- ------- ------- ------ -------- --------- - --- -- ----- --- ------
------ ---- ------- - -
--- -------
------- -------
-------- --------
---- -------
------ -------
--
------ ---- -------- - - - -----
------ ---- -------- - -
------------ -----------
--------- ------------
--
------ ---- ------------------------ - -------
------ ------------------
------- ------------------
---
------ ---- --------------- - -
------------ -----------
--------- -------
------------ -------
---- --------------
------- --------------
-------- --------------
---
--可以看到，该文件定义了 Query、Book、Mutation 等 TypeScript 类型，还定义了相应类型的变量和方法，方便我们在 TypeScript 中使用。
示例代码
为了更好地理解上述内容，我们可以通过一个简单的 GraphQL 示例来进行实践。
首先，我们需要定义一个 GraphQL 的 Schema，在项目根目录下创建一个文件名为 schema.graphql 的文件，输入以下内容：
-- -------------------- ---- ------- ---- ----- - ------ ------- ------ ------ - ---- ---- - --- -- ------ ------ ------- ------ - ---- -------- - -------------- -------- ------- --------- ---- - ------ - ------ ----- --------- -------- -
然后，在命令行中运行以下命令，将该 Schema 转化为 JSON 格式：
graphql schema.graphql --json > schema.json
接着，我们在项目中安装必要的 npm 包并生成 TypeScript 定义文件：
npm install -g typescript npm install graphql graphql-typescript-definitions npm run gen-types
最后，我们可以在 TypeScript 中使用该文件中定义的类型和方法。在项目中创建一个 app.ts 文件，在其中引入生成的 TypeScript 类型：
-- -------------------- ---- -------
------ - ------------- ------------- - ---- -----------------
------ - ---------------- ------------------------ - ---- -----------------
----- ------ - --- --------------
---- --------------------------------
------ --- ---------------
---
----- ----------------- - -
-------- --------------- -------- -------- -------- -
-------------- ------- ------- -------- -
--
-----
------
-
-
--
----- ---------- ------------------------ - -
------ -------- -----
------- ----- ----
--
--------------------------------
--------- ------------------
---------
-------------- -- ---------------------如果一切正常，我们可以在命令行中运行以下命令启动应用：
npm install apollo-client@3.4.17 @apollo/react-hooks graphql-tag npm install webpack webpack-cli webpack-dev-server npm install @types/react @types/react-dom @types/react-router-dom npm run start
在浏览器中访问 http://localhost:8080 网址，则可以看到向服务器添加新书的消息。
总结
本篇文章介绍了如何使用 npm 包 graphql-typescript-definitions 将 GraphQL 的 Schema 转化为 TypeScript 声明，并最终生成一个 TypeScript 定义文件。在使用该工具的过程中，需要准备好必要的软件和工具，并按照传递相应的参数运行命令即可。通过一个示例代码，我们可以更好地理解如何在 TypeScript 中使用该文件中定义的类型和方法。GraphQL 和 TypeScript 的组合可以让代码更加规范和易于维护，开发者们应该引起足够重视。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f3cd9aedbf7be33b25670d3