如何在打字稿中访问嵌套条件类型

Posted

技术标签:

【中文标题】如何在打字稿中访问嵌套条件类型【英文标题】:How to access nested conditional type in typescript 【发布时间】:2021-04-18 07:12:05 【问题描述】:

以下自动生成类型的起源是 GraphQL 查询:

export type OfferQuery =  __typename?: 'Query'  & 
  offer: Types.Maybe<
     __typename?: 'Offer'  & Pick<Types.Offer, 'id' | 'name'> & 
        payouts: Array<
           __typename?: 'Payout'  & Pick<
            Types.Payout,
            'weGet' | 'theyGet'
          > & 
              offer:  __typename?: 'Offer'  & Pick<Types.Offer, 'id'>;
              publisher: Types.Maybe<
                 __typename?: 'Publisher'  & Pick<Types.Publisher, 'id'>
              >;
              eventType: Types.Maybe<
                 __typename?: 'EventType'  & Pick<
                  Types.EventType,
                  'id' | 'name'
                >
              >;
            
        >;
      
  >;
;

现在我想在我的反应组件中重用部分 OfferQuery 类型,即支付元素。

type Payout = OfferQuery['offer']['payouts'][number];

然而这给了我一个错误"Property 'payouts' does not exist on type 'Maybe __typename?: "Offer" | undefined; ..."

您对如何规避此问题并访问付款定义有任何建议吗?

tsconfig.json


  "compilerOptions": 
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "target": "esnext"
  


Typescript 4.1.3

【问题讨论】:

类型从何而来?我无法重现。我愿意从 fp-ts 下注 我没看懂问题,但我没有使用fp-ts。 请分享可重现的例子 【参考方案1】:

显然唯一的解决方案是在访问数组元素类型之前排除 null 和 undefined:

type Payout = Exclude<OfferQuery['offer']['payouts'], null | undefined>[number];

【讨论】:

以上是关于如何在打字稿中访问嵌套条件类型的主要内容,如果未能解决你的问题,请参考以下文章

如何在打字稿中正确编写有条件的 promise.resolve?

如何在打字稿中键入枚举变量?

如何在打字稿中声明函数类型

无法让嵌套类型保护与打字稿中的联合类型一起使用

如何在打字稿中迭代字符串文字类型

如何在打字稿中访问枚举的名称