通过TypeScript中的另一个泛型类型保留泛型类型

我正在考虑在@testing-library/react和/或中提交类型声明的一个或多个补丁@testing-library/dom。目前，对的RenderResultreturn变体的所有查询HTMLElement都使我编写了很多代码，例如

const myDiv = wrapper.getByText('some text') as HTMLDivElement;

最简单的解决方案是使查询通用。

export type GetByText = <T extends HTMLElement = HTMLElement>(/* ... */) => T
export const getByText: GetByText

然后我可以这样做：

const myDiv = wrapper.getByText<HTMLDivElement>('some text');

尽管这在TS Playground中有效，但某些方面@testing-library/react阻止了通用形式传递给RenderResult的方法。

这些都是当前版本的相关片断@testing-library/react和@testing-library/dom。

@testing-library/dom

类型/查询

export type GetByText = (
  container: HTMLElement,
  id: Matcher,
  options?: SelectorMatcherOptions,
) => HTMLElement

export const getByText: GetByText

类型/获取元素查询

import * as queries from './queries';

export type BoundFunction<T> = T extends (
    attribute: string,
    element: HTMLElement,
    text: infer P,
    options: infer Q,
) => infer R
    ? (text: P, options?: Q) => R
    : T extends (a1: any, text: infer P, options: infer Q, waitForElementOptions: infer W) => infer R
    ? (text: P, options?: Q, waitForElementOptions?: W) => R
    : T extends (a1: any, text: infer P, options: infer Q) => infer R
    ? (text: P, options?: Q) => R
    : never;
export type BoundFunctions<T> = { [P in keyof T]: BoundFunction<T[P]> };

export type Query = (
    container: HTMLElement,
    ...args: any[]
) => Error | Promise<HTMLElement[]> | Promise<HTMLElement> | HTMLElement[] | HTMLElement | null;

export interface Queries {
    [T: string]: Query;
}

export function getQueriesForElement<T extends Queries = typeof queries>(
    element: HTMLElement,
    queriesToBind?: T,
): BoundFunctions<T>;

@testing-library/react

（可能相关，也可能不相关）
types / index.d.ts

export type RenderResult<
  Q extends Queries = typeof queries,
  Container extends Element | DocumentFragment = HTMLElement
> = {
  // ...
} & {[P in keyof Q]: BoundFunction<Q[P]>}

除了上面所做的更改之外，使每个查询的类型都通用，我更改Query了get-queries-for-element.d.ts：

export type Query = <T extends HTMLElement>(
    container: HTMLElement,
    ...args: any[]
) => Error | Promise<T[]> | Promise<T> | T[] | T | null;

我几乎可以确定问题出在BoundFunction或中getQueriesForElement()，因为当我进行这些更改时（我相信37％的信心是对的），我得到一个错误：

Type 'typeof import(".../node_modules/@testing-library/dom/types/queries")' does not satisfy the constraint 'Queries'.
  Property 'getByLabelText' is incompatible with index signature.
    Type 'GetByText' is not assignable to type 'Query'.
      Type 'HTMLElement' is not assignable to type 'T | Error | T[] | Promise<T[]> | Promise<T>'.
        Type 'HTMLElement' is not assignable to type 'T'.
          'HTMLElement' is assignable to the constraint of type 'T', but 'T' could be instantiated with a different subtype of constraint 'HTMLElement'. ts(2344)

可能还有另一个问题@testing-library/react（因此，还有其他测试库软件包），但是解决此问题是第一步。

我的问题的部分原因是我实际上不了解BoundFunction正在做什么。我需要怎么做才能使maketypeof queries满足Queries约束条件？

TS游乐场