typescript - 为什么 typescript 将联合中的属性标记为不存在?

标签 typescript graphql apollo react-apollo

在严格模式下使用 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 属性时,我都会收到此类型错误:

enter image description here

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

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

但是有没有更好的方法呢?

最佳答案

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

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

关于typescript - 为什么 typescript 将联合中的属性标记为不存在?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59104086/

相关文章:

node.js - 如何进行更新突变 - GraphQL(加上 mongoDB)

laravel - artisan是否缓存:clear also remove lighthouse cache?

express - 如何从 Express 服务器后端调用 GraphQL 查询/变异?

debugging - Apollo 客户端: How to simply debug a 400 code error?

vue.js - 结果、Vue、Apollo 和 GraphQL 缺少属性

vuejs2 - 来自 Vuex 的 Apollo 请求

javascript - Object.keys 返回私有(private)属性

html - 使用 tsify (Typescript) 时,需要 HTML 文件作为 Browserify 中的模板字符串

javascript - 在 typescript 中使用扩展运算符

angularjs - 降级 Angular 2 服务时无法读取 null 的属性 'injector'