TypeScript react - не удалось найти файл объявления для модуля response-materialize. 'path / to / module-name.js' неявно имеет любой тип


99

Я пытаюсь импортировать компоненты из реакции-материализации как -

import {Navbar, NavItem} from 'react-materialize';

Но когда веб-пакет компилирует мой, .tsxон выдает ошибку для вышеуказанного:

ERROR in ./src/common/navbar.tsx
(3,31): error TS7016: Could not find a declaration file for module 'react-materi
alize'. 'D:\Private\Works\Typescript\QuickReact\node_modules\react-materialize\l
ib\index.js' implicitly has an 'any' type.

Любое решение для этого. Я не уверен, как разрешить этот оператор импорта для работы ts-loaderи webpack.

Так index.jsвыглядит объект response-materialize. Но как решить эту проблему для импорта модуля в мои собственные файлы ..

https://github.com/react-materialize/react-materialize/blob/master/src/index.js


2
Вам необходимо установить типы / типы для пакета (npm install @ types / react-materialize). Однако похоже, что этого еще не существует, поэтому вам может потребоваться создать его самостоятельно. Я нашел эту статью полезной - Templecoding.com/blog/2016/03/31/…
— Т. Митчелл

@T Mitchell, значит ли это, что каких-либо типов, которые нам не хватает, мы никогда не сможем скомпилировать webpack без создания этих типов? Должен быть какой-то способ?
— Joy


мне кажется, что это обходной путь.
— SuperUberDuper

Ответы:


73

У меня была аналогичная ошибка, но для меня это было react-router. Решил, установив на него типы.

npm install --save @types/react-router

Ошибка:

(6,30): error TS7016: Could not find a declaration file for module 'react-router'. '\node_modules\react-router\index.js' implicitly has an 'any' type.

Если вы хотите отключить сайт , он широко вы можете вместо редактирования tsconfig.jsonи набор noImplicitAnyв false.


Хотя в настоящее время такого пакета @ types / response-navigation-tabs нет, все же упомянутое "noImplicitAny": false,его отключило (я получил эту проблему из-за использования response-native init MyProject --template typescript, по крайней мере, я так думаю) 👍
— Вверх -Master

1
илиyarn add @types/react-router --dev
— Омар Тарик

57

Для тех, кто хотел знать, как я это преодолел. Я сделал что-то вроде хакерства.

Внутри своего проекта я создал папку с именем @typesи добавил ее в tsconfig.json, чтобы найти в ней все необходимые типы. Это выглядит примерно так -

  "typeRoots": [
            "../node_modules/@types",
            "../@types"
        ]

И внутри я создал файл с именем alltypes.d.ts. Найти из него неизвестные виды. так что для меня это были неизвестные типы, и я добавил их туда.

declare module 'react-materialize';
declare module 'react-router';
declare module 'flux';

Так что теперь машинопись не жаловалась на типы, которые больше не были найдены. :) выиграть выиграть сейчас ситуацию :)


3
Я пропустил часть о том, что это было в отдельном файле. Похоже, что размещение этих declareутверждений в файле с именем index.d.tsисправлено для меня. TypeRoots трогать не пришлось.
— Скотти Ваггонер

Это работает нормально, но вызывает проблемы при использовании require для других вещей, таких как изображения. По сути, он просто не позволяет вам использовать его requireни для чего.
— Dhruvdutt Jadhav

1
это решение больше не работает с последней версией TS. nvalid module name in augmentation. Module 'some-dumb-lib-with-no-types' resolves to an untyped module at '/path/to/module', which cannot be augmented.
— FlavorScape 07

1
Стоит также упомянуть кое-что: в зависимости от местоположения вашего источника вам может также потребоваться добавить "../types" в ваш массив "includes"
— netpoetica

1
У меня есть проблемы с react-countdown-clock, созданной @typesпапкой и сделал все вышеуказанные шаги. по-прежнему получаю ту же ошибку.
— Jyothu

44

У меня была такая же проблема с типами response-redux. Самое простое решение было добавлено в tsconfig.json:

"noImplicitAny": false

Пример:

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react",
    "lib": ["es6"],
    "moduleResolution": "node",
    "noEmit": true,
    "strict": true,
    "target": "esnext",
    "noImplicitAny": false,
  },
  "exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
}

это отлично работало в IntelliJIDE, но пользовательский typeRootsметод (который является принятым ответом) работал даже в VS CodeIDE
— Top-Master

4
Я думаю, что это взлом, хотя это решило проблему, но есть ли какое-либо действительное и постоянное решение этой проблемы?
— Pardeep Jain

Я думаю, что это лучшее решение этой проблемы, я не думаю, что это жизнеспособно для npm в каждом пакете, который выдает ошибку
— Гилберт Р.

30

Если @types/<package>модуль, который вы используете, отсутствует, вы можете легко обойти проблему, добавив // @ts-ignoreкомментарий выше, т.е.

// @ts-ignore
import { Navbar, NavItem } from 'react-materialize';

В качестве альтернативы вы можете создать @types/<package>следующее:

публикация файлов декларации

ОпределенноTyped, как я могу внести свой вклад


1
Этот пакет еще не @typesдоступен, кстати. Создана проблема с репо ... github.com/geelen/react-snapshot/issues/131
— doublejosh

17

В моем случае у меня была проблема с реакцией, поэтому я начал делать:

npm install @types/react

а затем в

npm install @types/react-dom

Это сработало для меня


Даже несмотря на то, что они уже были установлены, повторный запуск этих команд решил проблему для меня.
— Heringer

По сути, он обновляет ваши существующие пакеты, когда вы повторно запускаете команды. По этой причине проблема решена.
— Анант Лалчандани,

7

Все, что вам нужно сделать, это запустить приведенный ниже сценарий. Затем удалите / переустановите модуль, который вы хотите использовать.

npm install --save @types/react-redux

1
Похоже, что @ types /
— react

6

У меня возникла эта проблема, когда я добавил react-router-domв новое приложение CRA с помощью машинописного текста. После того, как я добавил @types/react-router, проблема была исправлена.


Что делать после установки?
— Pardeep Jain

5

У меня была такая же проблема, но не обязательно относящаяся к машинописному тексту, поэтому я немного боролся с этими различными вариантами. Я делаю очень простое приложение create-response-app, используя конкретный модуль, react-portal-tooltip,получающий аналогичную ошибку:

Не удалось найти файл декларации для модуля response-portal-tooltip. '/node_modules/react-portal-tooltip/lib/index.js' неявно имеет тип 'любой'. Попробуйте, npm install @types/react-portal-tooltipесли он существует, или добавьте новый файл объявления (.d.ts), содержащий declare module 'react-portal-tooltip';ts (7016)

Сначала я пробовал много шагов - добавлял различные .d.tsфайлы, различные установки npm.

Но то, что в конечном итоге сработало для меня, было touch src/declare_modules.d.ts тогда вsrc/declare_modules.d.ts :

declare module "react-portal-tooltip";

И в src/App.js :

import ToolTip from 'react-portal-tooltip';
// import './declare_modules.d.ts'

Я немного боролся с разными местоположениями, чтобы использовать эту общую стратегию «объявления модуля» (я очень новичок), поэтому я думаю, что это будет работать с разными вариантами, но я включил пути для того, что сработало у меня.

Я изначально думал import './declare_modules.d.ts' это необходимо. Хотя сейчас вроде как нет! Но я включаю шаг на случай, если он кому-то поможет.

Это мой первый ответ на stackoverflow, поэтому я прошу прощения за разрозненный процесс здесь и надеюсь, что он все еще был полезен! :)


2
Это действительно аккуратно и просто. Спасибо. Продолжайте хорошую работу!
— Cubelaster

4

Кроме того, эта ошибка исправляется, если пакет, который вы пытаетесь использовать, имеет собственный (-ые) файл (-ы), и он указан в package.json. typings атрибуте

Вот так:

{
  "name": "some-package",
  "version": "X.Y.Z",
  "description": "Yada yada yada",
  "main": "./index.js",

  "typings": "./index.d.ts",

  "repository": "https://github.com/yadayada.git",
  "author": "John Doe",
  "license": "MIT",
  "private": true
}

3

Более хитрый способ - добавить, например, в boot.tsx строку

import './path/declare_modules.d.ts';

с участием

declare module 'react-materialize';
declare module 'react-router';
declare module 'flux';

в declare_modules.d.ts

Это работает, но другие решения лучше IMO.


3

Я выполнил следующие команды из командной строки nodejs, находясь в каталоге папки проекта:

  1. npm init
  2. npm install -g webpack
  3. npm install --save react react-dom @types/react @types/react-dom
  4. npm install --save-dev typescript awesome-typescript-loader source-map-loader
  5. npm install ajv@^6.0.0
  6. npm i react-html-id
  7. импортируйте пакет (в модулях узлов) в файл App.js, добавив код: import UniqueId from 'react-html-id';

Я сделал это (хотя у меня уже был установлен npm), и это сработало!


0

В моем случае проблема заключалась в том, что типы не добавлялись в файл package.json в devDependencies, чтобы исправить это, я запустил, npm install --save-dev @types/react-reduxобратите внимание на--save-dev


0

попробуйте добавить в файл tsconfig.json: "noImplicitAny": false у меня сработало


Таким образом вы фактически отключаете все преимущества TypeScript. Почему бы просто не использовать обычный JS?
— Мэтт Руве

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.