npm 包 @gql2ts/types 使用教程

介绍

在前端开发中,GraphQL 是一种常用的数据查询语言,它可以大幅提高开发效率和数据的可扩展性。然而,与之配套的 TypeScript 的类型定义常常需要手动编写,而这样的过程非常繁琐,容易出错。为此,npm 包 @gql2ts/types 应运而生,它实现了将 GraphQL schema 编译为 TypeScript 类型定义的功能,帮助开发者避免手写类型定义的烦恼。

安装

使用 npm 包管理器安装 @gql2ts/types 这个 npm 包:

--- ------- -------------

使用

命令行

如果你想在命令行中执行 @gql2ts/types,可以使用下述命令:

------ -------- -------------- -------- --------------- -------

其中:

  • --schema 指定该命令的输入 graphql schema 文件路径。
  • --output 指定该命令的输出 TypeScript 类型定义文件路径。
  • --watch 表示开启监听模式。

以上命令的输出结果将被储存在指定的输出路径下。

在代码中使用

@gql2ts/types 也提供了一种在代码中使用的方式。

首先,引入相关依赖:

------ - ------------------- -------- ------------- - ---- ----------
------ ------ ---- ----------------

接着,利用 introspectionQuery 获取 GraphQL schema 数据,如下所示:

----- ---------- - ----- --------------- --------------------

其中,schema 是包括所有 GraphQL 类型的实例的 GraphQLSchema 对象。

最后,调用 gql2ts 函数,将 schema 数据转化为 TypeScript 类型的定义:

----- ----------- - ---------------------- -- ---- -----------------

其中的 'MySchemaTypes' 表示 TypeScript 类型定义的名称。

示例代码

------ - ------------------- -------- ------------- - ---- ----------
------ ------ ---- ----------------

----- ------- ------------- - --------------------
----- ---------- - ----- --------------- --------------------

----- ----------- - ---------------------- -- ---- -----------------

-------------------------

总结

使用 @gql2ts/types,我们可以将手动编写的 TypeScript 类型定义转化为自动生成的代码。它可以省去许多冗长手写类型定义的过程,提高了开发效率并减少了代码中的错误率。因此,对于有关 GraphQL 和 TypeScript 的开发者来说,学习和使用 @gql2ts/types 是非常有指导性的。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/192733


猜你喜欢

  • npm 包 @activeledger/activedefinitions 使用教程

    什么是 @activeledger/activedefinitions @activeledger/activedefinitions 是一个用于在 Activeledger 区块链平台上定义交易结构...

    5 年前
  • npm 包 @types/ethereumjs-tx 使用教程

    简介 ethereumjs-tx 是一个 Node.js 模块,用于创建、加密和签名 Ethereum 交易。@types/ethereumjs-tx 是它的 TypeScript 类型定义包,为 T...

    5 年前
  • npm 包 semaphore-async-await 使用教程

    前言 在编写前端代码的过程中,我们经常需要控制并发的数量来避免对服务器造成过大的压力,这时候可以使用 semaphore-async-await 这个 npm 包来辅助我们实现控制并发的效果。

    5 年前
  • npm 包 @types/hdkey 使用教程

    在区块链开发中,我们常常需要使用 HD 钱包来管理多个地址。而 HD 钱包的生成过程需要用到 HD 钥匙(hdkey)。 @types/hdkey 是一个 TypeScript 定义文件,可以帮我们在...

    5 年前
  • npm 包 @ledgerhq/hw-transport-u2f 使用教程

    前言 @ledgerhq/hw-transport-u2f 是一个用于连接 Ledger 硬件钱包的 npm 包。它是一种通用的传输层,可以与多种硬件设备一起使用,支持 USB、蓝牙、NFC 等多种连...

    5 年前
  • npm 包 @ledgerhq/hw-app-eth 使用教程

    前言 在区块链应用开发中,与硬件钱包进行通信是必不可少的一环。这里介绍一款使用 npm 包 @ledgerhq/hw-app-eth 与 Ledger 硬件钱包进行以太坊交互的方法。

    5 年前
  • npm 包 @0x/sol-tracing-utils 使用教程

    简要介绍 @0x/sol-tracing-utils 是一款专业的以太坊智能合约跟踪工具,可以帮助开发者更好地了解合约的执行流程,同时支持本地环境和远程环境的跟踪功能,如以太坊 ropsten 网络、...

    5 年前
  • npm 包 @types/lodash.values 使用教程

    在前端开发中,我们经常需要使用到一些实用的工具库,比如 Lodash。Lodash 是一个 JavaScript 工具库,具有良好的兼容性、健壮性和高效性,因此在许多前端项目中得到了广泛的应用。

    5 年前
  • npm 包 @types/lodash.foreach 使用教程

    在前端开发中,经常需要对数组和对象进行遍历和操作,因此使用lodash中的foreach方法非常方便和实用。但如果使用TypeScript进行开发,需要使用@types/lodash.foreach这...

    5 年前
  • npm包 @0x/ts-doc-gen 使用教程

    在前端开发中,代码注释是非常重要的,特别是在开发大型项目时。我们需要好的文档来帮助我们了解代码如何工作,以及更快地跟踪问题。然而,在生成文档时,我们面临着许多问题,这就是为什么我们需要一个强大的代码文...

    5 年前
  • npm 包 chai-bignumber 使用教程

    前言 在前端开发中,我们常常会遇到与数字相关的问题,例如精度问题、比较大小等。默认的 JavaScript 对于大数字的处理能力有限,因此我们需要借助一些库来解决这些问题。

    5 年前
  • npm 包 @types/web3-provider-engine 使用教程

    前言 在以太坊开发中,web3.js 非常重要,而 web3.js 依赖的一个组件就是 web3-provider-engine,它是一个多功能的虚拟以太坊客户端,可以自定义以太坊网络,并可以处理多种...

    5 年前
  • npm 包 ethereumjs-blockstream 使用教程

    前言 区块链技术一直以来备受瞩目,而以太坊作为最著名的智能合约平台之一,其底层技术也是备受开发者关注。习惯于使用 JavaScript 的前端开发者自然希望能够通过 npm 包的形式在自己的代码中使用...

    5 年前
  • npm 包 @0x/web3-wrapper 使用教程

    介绍 @0x/web3-wrapper 是一个为 @0x/project 等以太坊的 dApp 提供的 Web3.js 接口封装包,可以用来在 JavaScript 项目中与以太坊区块链进行交互。

    5 年前
  • npm 包 @0x/tslint-config 使用教程

    在前端领域,代码质量一直是一个非常重要的话题。随着 TypeScript 越来越受到前端开发者的欢迎,对于代码质量的要求也越来越高。TSLint 是一个非常流行的 TypeScript 静态代码分析工...

    5 年前
  • npm 包 @aaa-backend-stack/tslint-rules 使用教程

    介绍 @aaa-backend-stack/tslint-rules 是一个用 TypeScript 编写的 TSLint 规则包,专门为后端 Node.js 应用的代码质量和安全性进行提升。

    5 年前
  • npm 包 @types/cli 使用教程

    在前端开发的过程中,我们经常需要使用命令行工具来完成一些工作,比如打包、压缩、部署等。而在 TypeScript 中,我们需要用到类型定义文件来让编译器正确地识别代码中使用的类型。

    5 年前
  • npm 包 @vue/cli-plugin-typescript 使用教程

    简介 @vue/cli-plugin-typescript 是一个 Vue.js 的插件,用于在 Vue 项目中支持 TypeScript。它可以使得 TypeScript 与 Vue.js 应用更加...

    5 年前
  • npm 包 @trongnd/ts-nodemon 使用教程

    在前端开发过程中,我们常常需要修改代码并实时查看效果。但是,每次修改之后都需要手动重启服务,这极大地浪费了我们的时间和精力。 为了解决这个问题,我们可以使用 nodemon 工具来监控文件变化并自动重...

    5 年前
  • npm 包 @8xprotocol/base-contract 使用教程

    本文介绍如何使用 npm 包 @8xprotocol/base-contract,以便在前端项目中使用以太坊智能合约。 概述 @8xprotocol/base-contract 是一个为了方便在前...

    5 年前

相关推荐

    暂无文章