typescript 键入处理GraphQL结果所需的方法

bf1o4zei  于 2023-01-14  发布在  TypeScript
关注(0)|答案(1)|浏览(109)

我有一个无头CMS,它为我的GraphQL模式生成所有类型。
在执行查询之后,我得到了一个可以使用的结果。该结果包含一个数组。
当我需要对从服务器返回的数组使用filter、map或find方法时,我得到一个属性“filter/map/find”在类型“TypeName”上不存在
通过VisualStudio可以快速解决这个问题,但是它会将类型添加到自动生成的文件中。我的解决方案是在单独的文件中扩展类型,这很有效

import { DataEntity } from './__generated__/graphql'

interface DataEntityWithMethods extends DataEntity {
    filter(arg0?: (grouping: DataEntity) => DataEntity): unknown
    find(arg0?: (group: DataEntity) => boolean): unknown
    map(arg0?: (group: DataEntity) => void): unknown
}

export type { DataEntityWithMethods }

但这是最好的方法吗?我发现很奇怪,我需要将默认的JS方法添加到创建的类型中。
TypeScript是这样工作的吗?

rxztt3cl

rxztt3cl1#

不要!
当你设置一个包含数组的变量的类型时,你需要在它后面添加[]来告诉TypeScript它是一个数组而不是Object。
就像这样:

let data: DataEntity[]

如果这样做,就不需要为对象注册任何方法。
请注意,TypeScript一开始并没有识别出问题,并建议了一个快速修复方法,但这是处理问题的错误方法。

相关问题