前端静态站点Web框架【免费下载链接】gatsbyReact-based framework with performance, scalability, and security built in.项目地址https://gitcode.com/gh_mirrors/ga/gatsby点击查看免费下载GraphQL Typegen 是 Gatsby 内置的代码生成能力在启动gatsby develop时它会基于当前站点的 GraphQL Schema 与页面查询自动生成 TypeScript 类型声明让组件中拿到查询结果的同时就获得完整类型提示。本指南以官方示例项目 examples/using-graphql-typegen 为骨架结合 Gatsby 源码packages/gatsby/src/services/graphql-typegen.ts、packages/gatsby/src/utils/graphql-typegen/讲解开启方式、配置项、生成产物、Queries全局命名空间的用法以及如何在 VSCode 中实现 GraphQL 自动补全。读完本文你将能把一个普通的 Gatsby TypeScript 项目改造成“查询即类型”的强类型开发体验。一、示例项目速览本示例是一个最小化的 Gatsby TypeScript 站点核心文件如下文件作用examples/using-graphql-typegen/gatsby-config.ts站点配置通过graphqlTypegen: true开启类型生成examples/using-graphql-typegen/gatsby-node.ts用createSchemaCustomization收紧类型空值语义examples/using-graphql-typegen/src/pages/index.tsx首页使用Queries.IndexPageQuery类型化查询结果examples/using-graphql-typegen/src/components/info.tsx组件通过Queries.SiteInformationFragment消费 fragment 类型examples/using-graphql-typegen/src/pages/404.tsx404 页面examples/using-graphql-typegen/graphql.config.js供 IDE 的 GraphQL 语言服务读取的配置入口examples/using-graphql-typegen/tsconfig.jsonTypeScript 配置开启strict严格模式examples/using-graphql-typegen/package.json依赖与脚本定义二、快速开始在示例目录下安装依赖并启动开发服务器npm install --legacy-peer-deps npm run develop其中npm run develop实际执行的是gatsby develop见 package.json 中的scripts字段。启动成功后你会看到两处新产物src/gatsby-types.d.ts—— 汇总的 TypeScript 类型声明文件.cache/typegen/目录 —— 包含类型生成所需的中间产物详见下文“生成产物”一节。之后就可以继续执行npm run lint # 运行 ESLint含 GraphQL 相关规则 npm run typecheck # 运行 tsc --noEmit 做全量类型检查示例中typecheck脚本对应tsc --noEmitlint脚本对应eslint --ignore-path .gitignore .配合lint:fixnpm run lint -- --fix可自动修复问题。三、开启与配置graphqlTypegen开启方式非常简单在gatsby-config.ts中设置graphqlTypegen: trueimport type { GatsbyConfig } from gatsby const config: GatsbyConfig { siteMetadata: { title: using-graphql-typegen, siteUrl: https://www.yourdomain.tld, description: Example project for GraphQL Typegen in Gatsby. }, graphqlTypegen: true, plugins: [ gatsby-transformer-remark, { resolve: gatsby-source-filesystem, options: { name: pages, path: ./src/pages/ } } ] }; export default config配置项与默认值graphqlTypegen除了布尔值还支持对象形式传入更细粒度配置。该配置在 packages/gatsby/src/joi-schemas/joi.ts 中定义并校验配置键类型默认值说明typesOutputPathstringsrc/gatsby-types.d.tsTypeScript 类型声明文件的输出路径documentSearchPathsstring[][./gatsby-node.ts, ./plugins/**/gatsby-node.ts]额外扫描的“文档”GraphQL 查询搜索路径generateOnBuildbooleanfalse是否在gatsby build时也生成类型默认只在 develop 时生成从 packages/gatsby/src/utils/graphql-typegen/ts-codegen.ts 的源码可以看到默认值定义export const DEFAULT_TYPES_OUTPUT_PATH src/gatsby-types.d.ts export const DEFAULT_DOCUMENT_SEARCH_PATHS [ ./gatsby-node.ts, ./plugins/**/gatsby-node.ts, ]需要注意默认的documentSearchPaths只包含gatsby-node.ts与插件中的文件站点页面与组件中的查询是通过 Gatsby 的页面查询机制单独收集的不在此配置范围内。当你在gatsby-node.ts中以graphql模板字符串写查询例如用于createPages的数据查询时这些查询也会被纳入类型生成。生成器内部默认行为类型生成基于 GraphQL Code Generator 的 typescript 插件但覆盖了部分默认配置见 ts-codegen.ts例如avoidOptionals: true—— 避免生成所有字段都是可选的宽泛类型immutableTypes: true—— 生成只读readonly字段因为数据来自数据层、不应被修改maybeValue: T | null—— 可空值统一表达为T | nullnoExport: true—— 不导出最终统一挂到全局命名空间enumsAsTypes: true—— 枚举以 type 而非 enum 形式生成更适合.d.tsscalars映射 —— 内置对Date、JSON以及gatsby-plugin-image的GatsbyImageData的类型映射useTypeImports: true—— 使用import type {}语法引入类型。四、生成产物解析从 packages/gatsby/src/services/graphql-typegen.ts 可以看到类型生成服务依次执行三件事await writeGraphQLSchema(directory, schema) await writeGraphQLFragments(directory, definitions) await writeTypeScriptTypes(directory, schema, definitions, graphqlTypegenOptions)对应的输出文件由 packages/gatsby/src/utils/graphql-typegen/file-writes.ts 定义产物内容.cache/typegen/schema.graphql当前站点的完整 GraphQL Schema由store.getState().schema得到.cache/typegen/fragments.graphql站点中收集到的所有 GraphQL Fragment 定义来自definitions.cache/typegen/graphql.config.json供 IDE 与工具使用的 GraphQL 配置schema 与文档路径等src/gatsby-types.d.ts面向用户的 TypeScript 类型声明含Queries全局命名空间其中src/gatsby-types.d.ts的默认输出路径可通过typesOutputPath配置项修改。五、使用Queries全局命名空间类型生成后站点的每个具名查询与 fragment 都会在全局命名空间Queries下生成对应类型命名规则为Queries.查询名或Queries.Fragment名。页面查询的类型化首页 src/pages/index.tsx 展示了标准用法import * as React from react import { graphql, PageProps } from gatsby const IndexPage ({ data }: PagePropsQueries.IndexPageQuery) { return ( main pSite title: {data.site?.siteMetadata.title}/p pDescription: {data.site?.siteMetadata.description}/p /main ) } export default IndexPage export const query graphql query IndexPage { site { siteMetadata { title description } ...SiteInformation } } 关键点在于PagePropsQueries.IndexPageQueryPageProps的泛型参数会被映射到data属性的类型而Queries.IndexPageQuery正是由 Typegen 根据同名查询query IndexPage自动生成的。此后data的取值都会有完整的字段提示与类型校验。Fragment 的类型化fragment 同样会生成类型。组件 src/components/info.tsx 中import * as React from react import { graphql } from gatsby const Info ({ buildTime }: { buildTime?: Queries.SiteInformationFragment[buildTime] }) { return pBuild time: {buildTime}/p } export default Info export const query graphql fragment SiteInformation on Site { buildTime } 这里直接通过索引访问类型Queries.SiteInformationFragment[buildTime]提取出buildTime字段的类型在该示例的 schema 自定义下为string。这种方式让组件 prop 类型与 GraphQL 查询保持单一来源避免手写类型与查询不同步。六、用createSchemaCustomization收紧空值语义Gatsby 推断出的类型默认可能为可空T | null。如果确定某些字段必然存在可以通过createSchemaCustomization定义 schema让生成的 TS 类型不再是可空类型。示例 gatsby-node.ts 中import { GatsbyNode } from gatsby export const createSchemaCustomization: GatsbyNode[createSchemaCustomization] ({ actions }) { actions.createTypes( type Site { siteMetadata: SiteMetadata! } type SiteMetadata { title: String! siteUrl: String! description: String! } ) }!非空标记会传导到生成的类型声明了title: String!后src/pages/index.tsx中siteMetadata.title的类型就是string而非string | null从而省去大量空值判断。这是让类型生成更精确的关键技巧——推断 schema 的“尽量宽松”与显式 schema 的“精确可控”之间应以显式定义为准。七、VSCode 中的 GraphQL 自动补全当gatsby develop正在运行时你可以让 IDE 直接获得 GraphQL 的自动补全、跳转与校验能力。示例项目提供了 graphql.config.js// Youll need to run gatsby develop before this file exists module.exports require(./.cache/typegen/graphql.config.json)该文件只是把 Gatsby 生成的.cache/typegen/graphql.config.json再暴露给 IDE 工具链。使用时需要满足在 VSCode 中安装 GraphQL 官方扩展VSCode Marketplace 中的 “GraphQL” 扩展先运行gatsby develop确保.cache/typegen/graphql.config.json已生成在.tsx文件的graphql模板字符串内即可获得字段补全、片段提示与语法校验。注意graphql.config.js依赖gatsby develop先执行因此首次打开项目时若尚未启动开发服务器该文件会因找不到目标而报错——这是预期行为先启动开发服务器即可。八、源码级原理类型生成如何被触发从源码调用链可以完整还原类型生成的执行路径gatsby develop启动后状态机在初始化与服务阶段注册类型生成步骤见 packages/gatsby/src/services/index.ts、packages/gatsby/src/state-machines/develop/actions.ts核心逻辑位于 packages/gatsby/src/services/graphql-typegen.ts从 Redux store 读取schema、definitions与config.graphqlTypegen配置然后依次写出 schema、fragments 与 TypeScript 类型该服务以reporter.activityTimer(Generating GraphQL and TypeScript types)的形式向终端报告进度失败时通过activity.panicOnBuild抛出错误码12100并中止构建写入 TypeScript 类型的实现位于 packages/gatsby/src/utils/graphql-typegen/ts-codegen.ts其中NAMESPACE Queries见该文件第 26 行正是全局命名空间名称的来源。generateOnBuild配置项则决定了gatsby build生产构建时是否也执行同样的生成流程默认仅在develop时生成避免生产构建被类型生成拖慢。九、与现有项目的接入建议把示例经验迁移到自己的 Gatsby TypeScript 项目时可按以下步骤进行开启开关在gatsby-config.ts中设置graphqlTypegen: true或对象形式的配置启动生成运行gatsby develop确认src/gatsby-types.d.ts与.cache/typegen/出现接入类型将PagePropsQueries.XxxQuery应用到各页面组件将 fragment 类型应用到子组件 props收紧 schema对确定存在的字段在gatsby-node.ts中通过createSchemaCustomization声明非空接入 IDE添加graphql.config.js内容为module.exports require(./.cache/typegen/graphql.config.json)安装 GraphQL 扩展并在开发时保持gatsby develop运行纳入 CI将npm run typechecktsc --noEmit与npm run lint加入提交检查让查询字段错误在合并前暴露。需要说明的是生成的src/gatsby-types.d.ts应加入版本控制并在.gitignore中排除.cache同时由于类型由数据层实时推导查询结构变化后需重启或让gatsby develop完成重新生成类型才会同步更新。赞分享前端静态站点Web框架【免费下载链接】gatsbyReact-based framework with performance, scalability, and security built in.项目地址https://gitcode.com/gh_mirrors/ga/gatsby点击查看免费下载相关推荐Gatsby GraphQL Typegen 完整指南用自动生成类型告别手写查询类型Gatsby GraphQL Typegen 完整指南用自动生成类型告别手写查询类型 导读 本指南讲解 Gatsby 的 GraphQL Typegen 自动前端静态站点Web框架如何永久保存微信聊天记录WeChatMsg数据管理终极指南如何永久保存微信聊天记录WeChatMsg数据管理终极指南 你是否曾担心过珍贵的微信聊天记录会因手机更换或意外删除而永远消失在数字时代我们的对话承载着情感fuels CLI typegen 实战指南从 Sway ABI 自动生成 TypeScript 类型fuels CLI typegen 实战指南从 Sway ABI 自动生成 TypeScript 类型 导读 本文基于 Fuel TypeScript SDK区块链Web3上一篇CWM工具调用与代理能力构建自主代码执行环境的终极指南下一篇3个秘诀解决macOS上OBS Studio屏幕录制卡顿问题创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
附Matlab代码)
