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.