为啥打字稿将联合中的属性标记为不存在?

Posted

技术标签:

【中文标题】为啥打字稿将联合中的属性标记为不存在?【英文标题】:Why does typescript mark the property in a union as non existent?为什么打字稿将联合中的属性标记为不存在? 【发布时间】:2020-03-25 00:14:06 【问题描述】:

在严格模式下使用 TS 3.7.2,我从 graphql-codegen 生成了这种类型:



type GetTopicFeedbacksCountQuery =  __typename?: 'Query'  & 
  topic: Maybe<
    | ( __typename?: 'TopicModelAsMember'  & Pick<TopicModelAsMember, 'id'>)
    | ( __typename?: 'TopicModelAsEditor'  & Pick<
        TopicModelAsEditor,
        'generateToken' | 'id'
      > &  feedbacksCount: TopicModelAsEditor['enrolmentsCount'] )
  >


每当我尝试使用它并想访问 feedbacksCount 属性时,我都会收到此类型错误:

现在我知道我可以强制 TS 输入这样的类型以避免类型错误:

const feedbacksCount = (topic as TopicModelAsEditor & 
                      feedbacksCount: TopicModelAsEditor['enrolmentsCount']
                    ).feedbacksCount

但是没有更好的方法吗?

【问题讨论】:

【参考方案1】:

由于联合可能是多种类型之一,因此您应该检查__typename 属性以确定您正在使用的类型,使用 switch 或 if 语句:

function exampleUsage (query: GetTopicFeedbacksCountQuery) 
  if (query.topic.__typename === 'TopicModelAsEditor') 
    console.log(query.topic.feedbacksCount)
  

【讨论】:

以上是关于为啥打字稿将联合中的属性标记为不存在?的主要内容,如果未能解决你的问题,请参考以下文章

为啥 Sass `map-get()` 不为不存在的键返回错误?

打字稿中的错误:“AngularFireStorageModule”类型上不存在属性 .ref

使用打字稿将文件上传到控制器

如何修复 VSCode 中的“‘CombinedVueInstance’类型上不存在属性 XX”错误? (带有打字稿的Vue)

解决打字稿错误的最佳方法 - 类型上不存在属性

如何从打字稿中的标记联合类型中提取类型?