reactjs - 如何在 Filter 作为参数传入的方法中从 Typescript 中的 Filter 访问 $and 运算符？

Question

我有一些有效的代码，但在我的 IDE 中不断抛出 TypeScript 错误。我已将代码压缩以显示我的问题所在。

在 Next.JS 应用程序中，我有一个类型 (TestModel)，一个用于在该模型上构建大量查询的方法 (generateTestFilter)，以及进一步处理每个过滤条件逻辑的方法 (handleNameFilter)。当尝试访问 handleNameFilter 中的 $and 运算符时，TypeScript 出于某种原因不喜欢这样，而如果我尝试在方法 generateTestFilter 中访问它，这里没有问题。知道为什么会这样吗？

import { Filter } from "mongodb"

export interface TestModel {
    name: string,
    things: string[],
    stuff: number
}

function generateTestFilter(tm: TestModel) {
    const filter: Filter<TestModel> = { $and: [] }

    handleNameFilter(tm, filter)

    if (filter.$and && filter.$and.length) { // $and can be accessed here with no issues
        return filter
    }
    return null
}

function handleNameFilter(tm: TestModel, filter: Filter<TestModel>) {
    const condition: Filter<TestModel> = {name: 'Steve'}
    filter.$and.push(condition) // Property '$and' does not exist on type 'Filter<TestModel>'. Property '$and' does not exist on type 'Partial<TestModel>'.ts(2339)

}

TypeScript Playground

Answer 1

问题

Filter 的定义看起来像这样:

/** A MongoDB filter can be some portion of the schema or a set of operators @public */
export type Filter<TSchema> =
  | Partial<TSchema>
  | ({
      [Property in Join<NestedPaths<WithId<TSchema>, []>, '.'>]?: Condition<
        PropertyType<WithId<TSchema>, Property>
      >;
    } & RootFilterOperators<WithId<TSchema>>);

– node-mongodb-native/src/mongo_types.ts:67-74 @ 5f37cb6

你可以看到它是一个 union具有以下含义的两种类型:

1. TSchema 上的所有属性可选。
2. 映射类型(解释太长)intersected与根过滤器运算符(其中 $and 是一个有效属性)。

为什么handleNameFilter中的错误？

由于类型是联合，默认情况下，您只能访问对联合的每个成员都有效的属性/方法。在 handleNameFilter你试图访问 $and .此属性仅出现在联合的后半部分，但未出现在前半部分 ( Partial<TestModel> )。因此，TypeScript 会引发错误。

为什么generateTestFilter没有错误？

之前，我写过:

As the type is a union, by default, you can only access properties/methods that are valid for every member of the union.

但是您可以将类型缩小到并集的一侧。缩小范围是为 TypeScript 提供信息以帮助使类型更具体(也称为缩小)。在 generateTestFilter你在这里做了这个:

const filter: Filter<TestModel> = { $and: [] }

赋给filter的对象中的属性名其实并不重要是$and .重要的是属性名称不是出现在 TestModel 中的名称。 .由于没有属性与 TestModel 的属性匹配，它不满足并集的前半部分 ( Partial<TestModel> )，因此 TypeScript 将其缩小到并集的后半部分。您可以通过更改键/值以匹配 TestModel 中的属性来对此进行测试– 这应该引发错误。

解决方案

既然问题已经得到解释，我们应该可以转向解决方案了。乍一看，答案似乎是以某种方式缩小类型。然而，还有一个我想解决的问题，我认为这是真正的根本原因。

function handleNameFilter(tm: TestModel, filter: Filter<TestModel>) {
    const condition: Filter<TestModel> = {name: 'Steve'}
    filter.$and.push(condition) // Property '$and' does not exist on type 'Filter<TestModel>'. Property '$and' does not exist on type 'Partial<TestModel>'.ts(2339)

}

你的 handleNameFilter函数在 filter 处接受一个参数输入到 Filter<TestModel> 的参数然后推送到 $and属性(property) filter .但是不能保证 $and将首先存在。 $and只存在于此:

    const filter: Filter<TestModel> = { $and: [] }

    handleNameFilter(tm, filter)

假设在未来，您可以重构它并删除第一行。这会打破你的逻辑。 TypeScript 正在保护您免受此影响。

因此，您需要以某种方式制作 $and可以推到。选项是:

1. 强制执行 $and 的存在filter 类型的属性范围。虽然，我不推荐这样做，因为添加属性的责任最好放在函数中。因此:
2. 添加 $and属性(property)filter作为您函数中逻辑的一部分。