Я работаю над приложением React в сочетании с реагирующей на тестирование библиотекой. В проекте у меня есть особая функция, которую я хотел бы проверить тип:

const customRender: any = (ui: any, options?: any) =>
  render(ui, { wrapper: AllTheProviders, ...options });

Я нашел файл типизации из Определенно типизированного: testing-library__react / index.d.ts

Сейчас я читаю руководство, но не могу найти, как применить этот интерфейс к моей функции. В частности, на странице потребления в справочнике.

Я установил файл типа в свой проект. (package.json, "@types/testing-library__react": "^9.1.2",), и в нем говорится, что при установке типа вы сможете использовать проект «без суеты».

Но как я могу использовать типизацию, чтобы я мог удалить типы any в функции customRender?

Может кто-нибудь указать мне в правильном месте?

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}

Редактировать: Почти все работает. Однако, похоже, проблема все еще существует.

interface CustomRenderParams<Q extends Queries> {
  ui: React.ReactElement,
  options?: RenderOptions<Q>
}

const customRender = ({ui, options}: CustomRenderParams): RenderResult =>
  render(ui, { wrapper: AllTheProviders, ...options });

Ошибка: TS2314: Generic type 'CustomRenderParams<Q>' requires 1 type argument(s).

0
Remi 24 Ноя 2019 в 17:35
Файл tsconfig.json важен. Вы можете разместить свое? Или даже ссылку на проект github, над которым вы работаете?
 – 
Klas Mellbourn
24 Ноя 2019 в 17:50
Конечно! Добавлен файл tsconfig. И вы можете найти проект Github здесь: github.com/StudioSpindle/w-playground
 – 
Remi
24 Ноя 2019 в 17:54
Const customRender = ({ui, options}: CustomRenderParams ): RenderResult => render (ui, {wrapper: AllTheProviders, ... options});
 – 
ixrock
25 Ноя 2019 в 13:07
Не работает. TS7005: переменная customRender неявно имеет тип any. Также появляются некоторые другие ошибки.
 – 
Remi
25 Ноя 2019 в 15:52
Хорошо, тогда const customRender<Q extends Queries> = ...
 – 
ixrock
25 Ноя 2019 в 16:37

1 ответ

Если вы откроете файл node_modules/@types/testing-library__react/index.d.ts, вы увидите, что функция render определена как:

export function render(ui: React.ReactElement, options?: Omit<RenderOptions, 'queries'>): RenderResult;
export function render<Q extends Queries>(ui: React.ReactElement, options: RenderOptions<Q>): RenderResult<Q>;

Таким образом, вы можете импортировать и повторно использовать некоторые типы оттуда:

import {render, RenderOptions, Queries} from "@testing-library/react"

function customRender<Q extends Queries>(ui: React.ReactElement, options?: RenderOptions<Q>) {
  return render(ui, { wrapper: AllTheProviders, ...options })
}
1
ixrock 24 Ноя 2019 в 18:14
По-прежнему возникают проблемы. Пробовал код, который вы предоставили, но это не работает, поскольку это не функция стрелки. Добавлен последний вывод к вопросу.
 – 
Remi
24 Ноя 2019 в 19:59