从 Typescript 项目中的外部文件继承并声明放大生成的类型

Posted 2023-03-08

【中文标题】从 Typescript 项目中的外部文件继承并声明放大生成的类型

【英文标题】：Inherit and declare amplify generated types from an external file in Typescript project

【发布时间】：2020-03-02 02:45:04

【问题描述】：

我正在monorepo 中使用aws-amplify 实现一个打字稿项目。 monorepo 在packages/web 下有一个 web 项目，在packages/models 下有一个包括 graphql 操作和类型的模型项目。在 amplify 中创建我的 graphql 模式后，我将在 amplify codegen 到 packages/models/src/graphql/ 的帮助下生成操作和类型

到目前为止一切顺利，在 Vue 项目中我可以将操作和类型导入为 import listOrganizations, ListOrganizationsQuery from "models";，执行查询，得到结果。当需要在组件中使用操作时，我会再次从模型中导入类型并使用。

我的想法是，是否有办法从模型项目中导入类型，并将 Web 项目中的所有类型包含在 .d.tsfile 中以跳过从模型存储库中导入类型。所以每次我生成 graphql 操作和类型时，我希望 web repo 导入类型并在 web 项目中全局声明以能够跳过导入类型。

我尝试过的：

在packages/web/src中创建一个api.d.ts文件

从packages/models/src/graphql/API.ts导入类型

我在这里尝试做的是从全局模型中导入和声明所有类型，但我被困在这一点上。

packages/models/models/src/graphql/API.ts

export type ListOrganizationsQuery = 
  listOrganizations:  
    __typename: "ModelOrganizationConnection",
    items:  Array< 
      __typename: "Organization",
      id: string,
      name: string,
      externalId: string | null,
      status: OrganizationStatus,
      logo: string,
     | null > | null,
    nextToken: string | null,
   | null,
;

packages/web/src/api.d.ts

import "models/src/graphql/API.ts";

VSCode 无法识别导入的类型，只要我这样做的方式可能不对，编译器就无法编译。有没有办法导入所有类型并全局声明？还是我应该应用其他最佳实践来代替我尝试过的这种方式？

【参考方案1】：

在尝试了几天不同的解决方法后，我终于承认了我正在尝试做的事情。全局导入和声明类型的目的是 amplify codegen 为查询、突变和订阅创建类型，但没有为模型创建类型。所以我不得不在前端应用程序中重新编写模型，但每次我更新 graphql 模式时，我也需要更新前端类型。

我的解决方法是将查询类型从 packages/models 动态导入到我的前端项目中的declarations.d.ts。并在那里声明类似的模型类型。

示例

packages/models/src/graphql/API.ts

export type GetOrganizationQuery = 
  getOrganization:  
    __typename: "Organization",
    id: string,
    name: string,
    decription: string | null,
    ...

;

packages/web/src/types/declarations.d.ts

declare type TOrganization = import("../path/to/models").GetOrganizationQuery["getOrganization"];