GraphQL 是一种用于 API 的查询语言，它不同于传统的 RESTful API。在 GraphQL 中，客户端可以指定需要的数据，并得到与请求相对应的精确响应。同时，TypeScript 是一种现代化的 JavaScript 的超集，它为 JavaScript 添加了类型系统和其他大量的特性。使用 TypeScript 可以使代码更加稳定和易于维护。在本文中，我们将介绍如何使用 TypeScript 进行 GraphQL 开发。
1. 安装依赖
首先，我们需要安装一个用于处理 GraphQL 的包。可以使用官方的 graphql 包进行操作，也可以使用其他的开源工具，如 graphql-tools 和 apollo-server-express。在这里，我们以 apollo-server-express 作为示例：
$ npm install apollo-server-express
还需要安装一些类型定义文件：
$ npm install graphql @types/graphql apollo-server-express @types/apollo-server-express express @types/express --save-dev
2. 创建模型
模型是构建 GraphQL API 的基础。我们可以使用类来定义 GraphQL 的类型。例如，我们定义 User 类型如下：
class User { id: string; name: string; }
接下来，我们定义一个用户的数据源，它将返回一个 User 类型的数组：
const users: User[] = [ { id: '1', name: 'Alice' }, { id: '2', name: 'Bob' }, { id: '3', name: 'Charlie' }, ];
3. 定义查询
我们可以使用 graphql 的 buildSchema 函数来定义一个查询。例如，我们定义一个查询，它将返回所有的 User：
-- -------------------- ---- ------- ------ - ----------- - ---- ---------- ----- ------ - ------------- ---- ---- - --- ---- ----- ------- - ---- ----- - ------ ------ - ---展开代码
这个查询定义了一个 User 类型和一个查询 users，并且它将返回一个 User 类型的数组。
接下来，我们将定义实现 users 查询的 rootValue。在这个例子中，我们将返回所有的用户：
const rootValue = { users: () => users, };
4. 创建服务器
创建一个 Express 服务器，将 apollo-server-express 的 graphqlExpress 和 graphiqlExpress 中间件添加到服务器上：
-- -------------------- ---- ------- ------ - -- ------- ---- ---------- ------ - --------------- --------------- - ---- ------------------------ ----- --- - ---------- ------------------- ---------------- ------- --------- ---- -------------------- ----------------- ------------ ---------- ---- ---------------- -- -- - -------------------- ------ -- ------- -- -------------------------------- ---展开代码
现在，当你访问 http://localhost:3000/graphiql 时，你应该可以看到一个优秀的交互式 GraphQL IDE。在其中，在左侧 pane 中输入如下查询：
{ users { id name } }
点击右侧的“ Run ”按钮后，应该可以看到所有的用户的信息。
5. 添加修改查询
接下来我们来添加一个修改查询 createUser。定义 schema 如下：
-- -------------------- ---- ------- ----- ------ - ------------- ---- ---- - --- ---- ----- ------- - ---- ----- - ------ ------ - ---- -------- - ---------------- --------- ---- - ---展开代码
这个定义了一个 createUser 的 mutation，它将会返回一个 User 类型。现在，我们将实现它：
const rootValue = { users: () => users, createUser: ({ name }) => { const user = { id: users.length + 1, name }; users.push(user); return user; }, };
现在，当你在 GraphiQL 中运行这个 mutation：
mutation { createUser(name: "David") { id name } }
你应该可以看到一个新的用户被创建了，并且返回了用户的信息。
6. 结论
使用 TypeScript 进行 GraphQL 开发是一种非常轻松自然的方式。我们可以定义类来表示 GraphQL 的类型，使用 buildSchema 函数来定义查询和 mutation，然后使用 rootValue 来实现这些查询和 mutation。总之，GraphQL 在 API 设计中确实是一个有用的工具。在使用 TypeScript 开发它的时候，我们可以使用所有 TypeScript 的优点和工具来提高开发效率和代码质量。
完整代码如下：
-- -------------------- ---- ------- ------ - -- ------- ---- ---------- ------ - --------------- --------------- - ---- ------------------------ ------ - ----------- - ---- ---------- ----- ---- - --- ------- ----- ------- - ----- ------ ------ - - - --- ---- ----- ------- -- - --- ---- ----- ----- -- - --- ---- ----- --------- -- -- ----- ------ - ------------- ---- ---- - --- ---- ----- ------- - ---- ----- - ------ ------ - ---- -------- - ---------------- --------- ---- - --- ----- --------- - - ------ -- -- ------ ----------- -- ---- -- -- - ----- ---- - - --- ------------ - -- ---- -- ----------------- ------ ----- -- -- ----- --- - ---------- ------------------- ---------------- ------- --------- ---- -------------------- ----------------- ------------ ---------- ---- ---------------- -- -- - -------------------- ------ -- ------- -- -------------------------------- ---展开代码
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67760cc56d66e0f9aa095aeb
