选择数组内的嵌套 Typescript 类型泛型

Posted 2023-03-08

【中文标题】选择数组内的嵌套 Typescript 类型泛型

【英文标题】：Selecting Nested Typescript Type Generics Inside Array

【发布时间】：2019-09-08 09:37:35

【问题描述】：

我从 GraphQL 查询中生成了以下类型。

type Maybe<T> = T | null

...

export type DealFragmentFragment =  __typename: "Deal"  & Pick<
  Deal,
  "id" | "registeringStateEnum" | "status" | "offerStatus"
> & 
    users: Maybe<Array< __typename: "User"  & Pick<User, "id" | "name">>>
    >

我有一个 React 函数，它接受从上述查询传递下来的用户。

function userCard( user ) 
   // ...do stuff

我的问题是如何从DealFragmentFragment 中选择用户子集？

function userCard( user :  user: DealFragmentFragment["users"] ) 
   // ...do stuff

在DealFragmentFragment["users"] 之后进入数组“内部”并可能显示id 和name 属性？

谢谢！

【问题讨论】：

如果你console.log(DealFragmentFragment["users"])你看到了什么？

嗨@ManoshTalukder。这是一个错误。我不相信console.log 评估 TS 类型。上述代码的编译器状态为TypeScript error: Property 'user' does not exist on type 'Maybe<( __typename: "User"; & Pick<User, "id" | "name">)[]>'. TS2339

【参考方案1】：

我需要一个帮手...

type Unarray<T> = T extends Array<infer U> ? U : T;

那么……

function userCard( user : user: Unarray<DealFragmentFragment["users"]> ) 
   // ...do stuff

现在user 显示属性id 和name。感谢How to get Type of Array in Typescript generics

如果有人有更好的解决方案，请发布，我会接受。但除此之外，这对我有用！

【讨论】：

谢谢！！！我对某些urql/prisma/nexus 一代有类似的问题，并且有完全相同的问题，而您的Unarray 解决了它！非常有帮助！

【参考方案2】：

如果你想从数组中提取嵌套元素的类型，你可以这样做：

// Let's assume the following is your result array:
const result = [user: id: 1, name: "abc"];
type t1 = typeof result // this will give you the type of the array
type t2 = typeof result[0] // This will give you the type of the element in the array.

type userId = typeof result[0][0] // Gives you the first key of the first element of the array.

【讨论】：

感谢您的回复！ DealFragementFragment["users"][0] 返回Property '0' does not exist on type 'Maybe<( __typename: "User"; & Pick<User, "id" | "name">)[]>'.ts(2339)