简介
在前端应用中，GraphQL 已经变得越来越流行，它是一个强类型的查询语言，可以提升前端开发调用后端 API 接口时的开发体验和效率。而 @graphql-codegen/typescript-type-graphql 就是一个基于 GraphQL schema 自动生成 TypeScript 类型定义的 npm 包，它可以将一个 GraphQL schema 自动生成相应的 TypeScript 类型定义代码。
安装
在使用该 npm 包时，首先需要安装 @graphql-codegen 和 typescript 两个依赖包，可以通过如下命令进行安装：
npm install --save-dev @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-type-graphql typescript
安装完成后，你可以在项目根目录中创建一个 codegen.yml 配置文件，用于配置生成 TypeScript 类型定义的规则和选项。
配置
以下是一个基本的 codegen.yml 配置文件示例：
-- -------------------- ---- -------
---------- ----
------- --------------------------
----------
-----------------------
--------
- ------------
- -------------------------
-------
------------- ----
------------ ----------------------------------
-------- -
--------- -------
----- --------------- -----
-在 config 中，你可以配置以下选项：
enumsAsTypes：是否将枚举类型保留为 TypeScript 类型contextType：提供一个可选的 context 类型的路径（目前支持的格式有./path/to/your/context#MyContext或者@your-module/your-package#MyContext）scalars：GraphQL 标量类型与 TypeScript 类型的映射（默认是{ DateTime: "Date", JSON: "Record<string, any>" }）
示例
以下是一个简单的 GraphQL schema 文件示例（schema.graphql）：
-- -------------------- ---- ------- ---- ----- - ------ ------- - ---- -------- - ---------------- -------- ------ --------- ----- - ---- ---- - --- --- ----- ------- ------ ------- -
对于该 GraphQL schema 文件，在 codegen.yml 中配置 typescript-type-graphql 插件后，执行下面命令：
npx graphql-codegen --config codegen.yml
则将会在项目根目录的 generated/graphql.ts 文件中生成如下 TypeScript 代码：
-- -------------------- ---- ------- ------ ---- ------- - - --- ------ ------- ------ -------- ------- ---- ------ ------ ------ --- --- ---------- ------ ---- ---------- - ---- --- ----- ---------- ------- -- --- ---- --------- ------- -- --------- --- --- --- ------ ------ ---- ---------- ---- ------ -- ------- ---- ---------- ------- -- ----- ------ - ------ ---- ----- - - ------------ ------- ------ ----------------- - ------ ---- -------- - - ------------ ---------- ----------- ---- - ------ ---- ---- - - ------------ ------ --- ------------- ----- ----------------- ------ ----------------- -
这样，我们就可以通过自动生成的 TypeScript 类型来在前端应用中进行编程了。
结论
@graphql-codegen/typescript-type-graphql 包可以节省开发者手动编写生成 TypeScript 类型定义的过程，节省了时间和心力，同时保证了代码的类型严谨性。在日常的前端开发中，可以考虑使用该 npm 包进行开发，提升开发体验和效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/192739