如何基于@graphql-codegen生成的TypeScript类型定义生成Angular表单

TypeScript 类型仅存在于编译阶段，运行时会被完全擦除，因此你无法直接在业务代码中读取LoginUserMutationMutationVariables的类型定义来生成JSON结构，你需要通过@graphql-codegen的扩展能力或者额外的TS工具提前生成运行时可用的元数据。

方案一：用codegen插件直接生成类型元数据（最便捷） #

这个方案直接和你现有的graphql-codegen流程集成，每次更新GraphQL操作都会自动同步更新表单需要的结构：

• 安装依赖

npm i -D @eddeee888/gcg-typescript-metadata

• 修改你的codegen.yml配置，新增插件和输出配置：

generates:
  ./src/generated/graphql.ts:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-apollo-angular"
      - "@eddeee888/gcg-typescript-metadata"
    config:
      metadataOutputPath: ./src/generated/type-metadata.json

• 运行codegen命令后，你就能在输出的type-metadata.json里找到对应类型的结构，示例格式如下：

{
  "LoginUserMutationMutationVariables": {
    "type": "object",
    "properties": {
      "email": { "type": "string", "required": true },
      "password": { "type": "string", "required": true }
    }
  }
}

你直接在Angular代码中导入这个JSON文件，就可以解析字段的类型、必填属性，生成对应的响应式表单控件。

方案二：用内置introspection能力生成（无需额外第三方插件） #

如果你不想引入第三方codegen插件，可以用官方的introspection插件导出完整Schema，自行提取变量结构：

• 修改codegen.yml新增introspection输出：

generates:
  ./src/generated/graphql.schema.json:
    plugins:
      - "introspection"

• 运行codegen后，用工具函数提取对应mutation的变量结构：

import introspection from './generated/graphql.schema.json';

// 入参为你定义的Mutation操作的字段名
function getMutationVariablesSchema(mutationName: string) {
  const mutationType = introspection.__schema.types.find(type => type.name === 'Mutation');
  const targetMutation = mutationType?.fields?.find(field => field.name === mutationName);
  return targetMutation?.args?.reduce((schema, arg) => {
    const isRequired = arg.type.kind === 'NON_NULL';
    const fieldType = isRequired ? arg.type.ofType.name : arg.type.name;
    schema[arg.name] = { type: fieldType, required: isRequired };
    return schema;
  }, {} as Record<string, { type: string; required: boolean }>);
}

// 调用示例，假设你的Mutation字段名为loginUser
const loginFormSchema = getMutationVariablesSchema('loginUser');

返回的对象结构可以直接用于生成Angular表单。

方案三：独立从生成的TS类型导出JSON Schema #

如果你不想改动现有codegen配置，可以单独用TS工具从生成的类型文件中提取Schema：

• 安装依赖

npm i -D typescript-json-schema

• 执行命令生成指定类型的JSON Schema：

npx typescript-json-schema ./src/generated/graphql.ts LoginUserMutationMutationVariables -o ./src/generated/login-vars-schema.json

生成的JSON文件包含完整的字段类型、必填校验规则，可直接用于表单生成。

内容的提问来源于stack exchange，提问作者user3241778