介绍
在前端开发中，GraphQL 是一种常用的数据查询语言，它可以大幅提高开发效率和数据的可扩展性。然而，与之配套的 TypeScript 的类型定义常常需要手动编写，而这样的过程非常繁琐，容易出错。为此，npm 包 @gql2ts/types 应运而生，它实现了将 GraphQL schema 编译为 TypeScript 类型定义的功能，帮助开发者避免手写类型定义的烦恼。
安装
使用 npm 包管理器安装 @gql2ts/types 这个 npm 包：
npm install @gql2ts/types
使用
命令行
如果你想在命令行中执行 @gql2ts/types，可以使用下述命令：
gql2ts --schema schema.graphql --output schema-types.ts --watch
其中：
--schema指定该命令的输入 graphql schema 文件路径。--output指定该命令的输出 TypeScript 类型定义文件路径。--watch表示开启监听模式。
以上命令的输出结果将被储存在指定的输出路径下。
在代码中使用
@gql2ts/types 也提供了一种在代码中使用的方式。
首先，引入相关依赖：
import { introspectionQuery, graphql, GraphQLSchema } from 'graphql';
import gql2ts from '@gql2ts/types';接着，利用 introspectionQuery 获取 GraphQL schema 数据，如下所示：
const schemaData = await graphql(schema, introspectionQuery);
其中，schema 是包括所有 GraphQL 类型的实例的 GraphQLSchema 对象。
最后，调用 gql2ts 函数，将 schema 数据转化为 TypeScript 类型的定义：
const schemaTypes = gql2ts(schemaData.data as any, 'MySchemaTypes');
其中的 'MySchemaTypes' 表示 TypeScript 类型定义的名称。
示例代码
-- -------------------- ---- ------- ------ - ------------------- -------- ------------- - ---- ---------- ------ ------ ---- ---------------- ----- ------- ------------- - -------------------- ----- ---------- - ----- --------------- -------------------- ----- ----------- - ---------------------- -- ---- ----------------- -------------------------
总结
使用 @gql2ts/types，我们可以将手动编写的 TypeScript 类型定义转化为自动生成的代码。它可以省去许多冗长手写类型定义的过程，提高了开发效率并减少了代码中的错误率。因此，对于有关 GraphQL 和 TypeScript 的开发者来说，学习和使用 @gql2ts/types 是非常有指导性的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/192733