1. 安装GraphQL Code Generator和插件：

npm install -g graphql-code-generator @graphql-codegen/typescript-operations @graphql-codegen/typescript-angular

2. 在项目根目录创建一个GraphQL配置文件codegen.yml，内容如下：

schema: "http://localhost:4000/graphql"
documents: "src/app/**/*.graphql"
generates:
  src/app/generated/graphql.ts:
    plugins:
      - typescript-angular
      - typescript-operations

3. 使用以下命令生成GraphQL的typescript-operations和typescript-angular代码：

graphql-codegen --config codegen.yml

4. 在组件中引入生成的GraphQL代码：

import { MyQueryGQL } from 'src/app/generated/graphql';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {

  constructor(private myQueryGQL: MyQueryGQL) { }

  ngOnInit() {
    this.myQueryGQL.watch().valueChanges.subscribe(result => {
      // result.data可以获得正确的类型提示
    });
  }

}

这样，生成的代码会为你的GraphQL查询生成类型定义及类型化的返回结果，让你在编辑器中获取正确的类型提示。