前言
GraphQL 是一种由 Facebook 开发的数据查询语言和运行时。它不同于传统的 RESTful API，它可以让客户端指定需要从服务器获取哪些数据。GraphQL 对于前端开发来说非常有用，并且越来越受欢迎。TypeScript 是一种由 Microsoft 开发的 JavaScript 超集语言，它为开发者提供了更好的类型检查和编程体验。在这篇文章中，我们将介绍如何在 TypeScript 中使用 GraphQL。
安装 GraphQL
要在 TypeScript 中使用 GraphQL，我们需要先安装它。我们可以使用 npm 或者 yarn 进行安装：
npm install graphql
或者
yarn add graphql
创建一个简单的 GraphQL 查询
下面我们来创建一个简单的 GraphQL 查询，它会从一个 books 数组中获取一些书的详细信息。我们先来看一下查询的代码：
query {
books {
id
title
author
publishedYear
}
}上面的查询代码很简单，它查询了 books 数组中的书的 id、title、author 和 publishedYear 等信息。下面我们来看一下如何将上面的查询代码转换为 TypeScript 代码。
首先，我们需要定义一个类型接口，用于定义 books 数组中每本书的属性。在 TypeScript 中，我们可以使用 interface 来定义类型：
interface Book {
id: string;
title: string;
author: string;
publishedYear: number;
}然后，我们需要定义一个 books 数组，用于存储所有的书。我们可以像这样定义：
-- -------------------- ---- -------
----- ------ ------ - -
-
--- ----
------ ---- ------ -------
------- -------- ---------
-------------- -----
--
-
--- ----
------ ------ ------ --- --- -------------- -------
------- ----- ---------
-------------- -----
--
-
--- ----
------ --- ---- - -------------
------- ------- -----
-------------- -----
--
--最后，我们需要使用 graphql 库中的 buildSchema 函数，构建一个 GraphQL schema。在 schema 中，我们可以定义我们接受的不同类型的查询。把我们之前定义的查询字符串传递进去即可：
-- -------------------- ---- -------
------ - ----------- - ---- ----------
----- ------ - -------------
---- ---- -
--- -------
------ -------
------- -------
-------------- ----
-
---- ----- -
------ --------
-
---现在我们已经定义好了 GraphQL 查询的模型和类型，我们可以使用 graphql 库中的 graphql 函数来完成查询了。我们可以像这样完成查询：
-- -------------------- ---- -------
------ - ------- - ---- ----------
--------------- -
----- -
----- -
--
-----
------
-------------
-
-
-- - ----- --
-------------- -- ---------------------上面的代码会输出以下内容：
-- -------------------- ---- -------
-
------- -
-------- -
-
----- ----
-------- ---- ------ -------
--------- -------- ---------
---------------- ----
--
-
----- ----
-------- ------ ------ --- --- ------------- -------
--------- ----- ---------
---------------- ----
--
-
----- ----
-------- --- ---- - -------------
--------- ------- -----
---------------- ----
-
-
-
-结论
在这篇文章中，我们学习了如何在 TypeScript 中使用 GraphQL。我们创建了一个简单的 GraphQL 查询，然后将其转换成了 TypeScript 代码。如果你打算在你的项目中使用 GraphQL，那么 TypeScript 和 GraphQL 的结合是非常有力的，你应该尝试一下这种结合。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67720ba06d66e0f9aad3fc4d