访问从GraphQL生成的多个嵌套TypeScript类型

Question

我只需要访问；部门"；从GraphQL:生成的这种大型类型中的类型

export type GetCompanyChartQuery = (
{ __typename?: 'Query' }
& { generateOrgChart?: Maybe<(
{ __typename?: 'DepartmentNode' }
& Pick<DepartmentNode, 'name'>
& { manager?: Maybe<(
{ __typename?: 'EmployeeNode' }
& Pick<EmployeeNode, 'name' | 'mobilePhone'>
)>, departments?: Maybe<Array<Maybe<(
{ __typename?: 'DepartmentNode' }
& Pick<DepartmentNode, 'name' | 'depth'>
& { manager?: Maybe<(
{ __typename?: 'EmployeeNode' }
& Pick<EmployeeNode, 'name'>
)>, employees?: Maybe<Array<Maybe<(
{ __typename?: 'EmployeeNode' }
& Pick<EmployeeNode, 'imageUrl' | 'mobilePhone' | 'name' | 'position' | 'title' | 'depth'>
)>>>, departments?: Maybe<Array<Maybe<(
{ __typename?: 'DepartmentNode' }
& Pick<DepartmentNode, 'name' | 'depth'>
& { manager?: Maybe<(
{ __typename?: 'EmployeeNode' }
& Pick<EmployeeNode, 'name'>
)>, employees?: Maybe<Array<Maybe<(
{ __typename?: 'EmployeeNode' }
& Pick<EmployeeNode, 'imageUrl' | 'mobilePhone' | 'name' | 'position' | 'title' | 'depth'>
)>>> }
)>>> }
)>>> }
)> }
);

我找不到解决这个问题的办法。选取<GetCompanyChartQuery，"subType">或者GetCompanyChartQuery['subtype']在这里不会起作用。

我正在尝试使用GraphQL查询获取数据，并将响应置于如下状态：

const [departments, setDepartments] = useState<TheTypeINeedToAccess>();
setDepartments(data?.generateOrgChart?.departments);

但要做到这一点，我需要正确的类型。

提前谢谢。

Answer 1

我认为选择子类型的问题在于可选属性。如果使对象为非零，TypeScript可以拾取子类型。

type Departments = Required<GetCompanyChartQuery>["generateOrgChart"]["departments"]

Answer 2

我最终使用了这个答案中的代码。

它甚至可以使用数组和可选属性。

type DeepPick<T, K extends string> = T extends object ? {
[P in Head<K> & keyof T]: T[P] extends readonly unknown[] ? DeepPick<T[P][number], Tail<Extract<K, `${P}.${string}`>>>[] : DeepPick<T[P], Tail<Extract<K, `${P}.${string}`>>>
} : T
type Head<T extends string> = T extends `${infer First}.${string}` ? First : T;
type Tail<T extends string> = T extends `${string}.${infer Rest}` ? Rest : never;

用法示例：

interface TestBook {
id: string;
name: string;
}
interface TestUser {
id: string;
email: string;
books: TestBook[];
book: TestBook,
}
type T = DeepPick<TestUser, "id" | "books.name" | "book.id">;
//T = {
//  id: string;
//  books: {
//    name: string;
//  }[];
//  book: {
//    id: string;
//  };
//}

游乐场