PricingLoginStart free
TypeScript Academy · 课时

端到端类型安全：模式优先工作流

从模式到客户端维护唯一可信来源

第 4 / 4 课13 个步骤

端到端类型安全：模式优先工作流 是 CoddyKit 上的免费 TypeScript Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 TypeScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 TypeScript Academy 课程共包含 4 节课。

什么是模式优先？

模式优先意味着 GraphQL schema 是唯一的事实来源。前端类型、后端解析器和 API 契约都由它派生而来，从而避免任何层出现不同步。

# The workflow:
# 1. Define schema (.graphql or SDL)
# 2. Generate server resolver types
# 3. Generate client operation types
# 4. Both sides automatically stay in sync

定义 schema

请使用 SDL 在 .graphql 文件中编写 GraphQL schema，并将其提交到代码仓库，作为客户端与服务器之间的契约。

# schema.graphql
type User {
  id: ID!
  name: String!
  email: String!
}

type Query {
  user(id: ID!): User
}

服务器：生成解析器类型

请使用 typescript-resolvers 插件运行代码生成工具，根据 schema 生成带类型的解析器签名。

# Server codegen step
npx graphql-codegen --config codegen.server.yml

客户端：生成操作类型

请使用 typescript-operations 以及 Apollo/urql 插件运行代码生成工具，根据 .graphql 操作文件生成带类型的钩子。

# Client codegen step
npx graphql-codegen --config codegen.client.yml

检测破坏性变更

请使用 graphql-inspector 检测破坏性的 schema 变更（例如删除字段或更改类型），避免这些变更进入生产环境。

npx graphql-inspector diff ./api/schema.graphql ./api/schema.new.graphql
# Reports: BREAKING: Field 'User.email' was removed

Schema 注册表

Schema 注册表（Apollo Studio、Hive）会存储 schema 版本、跟踪随时间发生的变更，并在持续集成中针对破坏性变更发出提醒。

# Push schema to Apollo Studio:
npx apollo schema:push --endpoint https://api.example.com/graphql

使用 schema 进行模拟

请使用 schema 生成模拟数据，以便在没有真实服务器的情况下开发客户端，同时确保模拟数据符合 schema。

import { buildClientSchema, introspectionFromSchema } from "graphql";
import { addMocksToSchema } from "@graphql-tools/mock";
const schema = buildClientSchema(introspectionResult);
const mockedSchema = addMocksToSchema({ schema });

tRPC 作为替代方案

对于仅使用 TypeScript 的项目，tRPC 无需 schema 语言即可提供端到端类型安全——服务器路由器类型 IS 客户端契约。

// Server: router infers types
const router = t.router({ getUser: t.procedure.query(() => fetchUser()) });
// Client: types flow automatically via inference
const { data } = trpc.getUser.useQuery();

使用 Zod + tRPC 进行验证

请将 Zod schema 与 tRPC 输入验证器结合使用，从单一定义中同时获得运行时验证和编译时类型。

const createUser = t.procedure
  .input(z.object({ name: z.string(), email: z.string().email() }))
  .mutation(({ input }) => saveUser(input));
// input: { name: string; email: string } — from Zod schema

持续集成：完整的 schema 安全流水线

模式优先安全性的完整持续集成流水线：检查 schema 规范 → 检查破坏性变更 → 运行代码生成工具 → 进行类型检查 → 运行测试。

# .github/workflows/schema.yml
- run: npx graphql-inspector validate ...
- run: npx graphql-codegen --check
- run: npx tsc --noEmit
- run: npm test

回顾：模式优先工作流

模式优先的 TypeScript：定义 SDL → 生成服务器解析器类型 → 生成客户端操作类型 → 在持续集成中检测破坏性变更。schema 是所有类型安全层的唯一事实来源。

快速检查

在模式优先工作流中，GraphQL schema 起什么作用？

在交互式课程中回答

您学到了什么

模式优先的 TypeScript 工作流会从 GraphQL schema 派生所有类型。请为服务器生成解析器类型，为客户端生成操作类型，在持续集成中检测破坏性变更，并将 schema 维护为所有层之间的契约。

免费开始

用 AI 导师学习 TypeScript — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程
101
课程
352
免费开始学习查看完整课程

常见问题解答

「端到端类型安全：模式优先工作流」课时是免费的吗？

是的 — 「端到端类型安全：模式优先工作流」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 TypeScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 TypeScript Academy 课程共包含 4 节课。

「端到端类型安全：模式优先工作流」这节课中我会学到什么？

从模式到客户端维护唯一可信来源 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 TypeScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 TypeScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。

「端到端类型安全：模式优先工作流」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 TypeScript Academy 课中编写并运行代码吗？

能。每节 TypeScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 从 GraphQL 模式生成 TypeScript 类型
  2. 使用 GraphQL 代码生成器创建带类型的解析器
  3. 使用 Apollo 和 urql 构建带类型的 GraphQL 客户端
  4. 端到端类型安全：模式优先工作流
← 返回 TypeScript Academy