reactjs - minimal - Typescript react-No se pudo encontrar un archivo de declaración para el módulo '''' react-materialize ''. ''path/to/module-name.js'' tiene implícitamente cualquier tipo
webpack react 2018 (9)
Estoy tratando de importar componentes de reaccionar-materializarse como -
import {Navbar, NavItem} from ''react-materialize'';
Pero cuando el paquete web está compinando mi .tsx
, arroja un error para lo anterior como:
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.
Cualquier resolución para esto. No estoy seguro de cómo resolver esta declaración de importación para trabajar con ts-loader
y webpack.
El index.js
de react-materialize se ve así. Pero cómo resolver esto para la importación del módulo en mis propios archivos ...
https://github.com/react-materialize/react-materialize/blob/master/src/index.js
Además, este error se soluciona si el paquete que está intentando usar tiene su propio tipo de archivo y está incluido en el atributo typings
package.json
Al igual que:
{
"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
}
En mi caso, el problema fue que los tipos no se estaban agregando al archivo package.json en devDependencies para solucionarlo. npm install --save-dev @types/react-redux
note el --save-dev
En tsconfig.json, configura "noImplicitAny": false
arreglado esto para mí
He tenido un mismo problema con los tipos de reacción-redux. La solución más simple fue agregar a tsconfig.json:
"noImplicitAny": false
Ejemplo:
{
"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"]
}
Lo que hice fue ejecutar los siguientes comandos desde el símbolo del sistema de nodejs mientras estaba en el directorio de la carpeta del proyecto:
-
npm init
-
npm install -g webpack
-
npm install --save react react-dom @types/react @types/react-dom
-
npm install --save-dev typescript awesome-typescript-loader source-map-loader
-
npm install ajv@^6.0.0
-
npm i react-html-id
- importe el paquete (en módulos de nodo) en el archivo App.js agregando el código:
import UniqueId from ''react-html-id'';
Hice lo anterior (aunque ya tenía instalado npm) y funcionó!
Para aquellos que querían saber que cómo superé esto. Hice una especie de piratería.
Dentro de mi proyecto, creé una carpeta llamada @Types
y la agregué a tsconfig.json para encontrar todos los tipos requeridos. Así que se parece un poco a esto ...
"typeRoots": [
"../node_modules/@types",
"../@types"
]
Y dentro de eso creé un archivo llamado alltypes.d.ts
. Para encontrar los tipos desconocidos de ella. Así que para mí estos eran los tipos desconocidos y lo agregué allí.
declare module ''react-materialize'';
declare module ''react-router'';
declare module ''flux'';
Así que ahora el mecanografiado no se quejó de los tipos que ya no se encuentran. :) ganar ganar situación ahora :)
Todo lo que necesitas hacer es ejecutar el siguiente script. luego, quite / vuelva a instalar el módulo que desea usar.
npm install --save @ types / react-redux
Tuve un error similar pero para mí fue react-router
. Se solucionó instalando tipos para ello.
npm install --save @types/react-router
Error:
(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.
Si desea deshabilitarlo en todo el sitio, puede editar tsconfig.json
y configurar noImplicitAny
en false
.
Una forma más intrépida es agregar, por ejemplo, en boot.tsx la línea
import ''./path/declare_modules.d.ts'';
con
declare module ''react-materialize'';
declare module ''react-router'';
declare module ''flux'';
en declare_modules.d.ts
Funciona pero otras soluciones son mejores IMO.