Ketik bereaksi - Tidak dapat menemukan file deklarasi untuk modul '' react-materialize '. 'path / to / module-name.js' secara implisit memiliki tipe apa pun

Saya mencoba mengimpor komponen dari react-materialize sebagai -

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

Tetapi ketika webpack mengkompilasi saya, .tsxitu membuat kesalahan di atas sebagai -

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.

Resolusi apa pun untuk ini. Saya tidak yakin bagaimana menyelesaikan pernyataan impor ini untuk bekerja dengan ts-loaderdan webpack.

Bentuk index.jsreact-materialize terlihat seperti ini. Tetapi bagaimana mengatasi ini untuk impor modul di file saya sendiri ..

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

Saya mengalami kesalahan yang serupa tetapi bagi saya itu react-router. Memecahkannya dengan menginstal tipe untuk itu.

npm install --save @types/react-router

Kesalahan:

(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.

Jika Anda ingin menonaktifkannya di seluruh situs, Anda dapat mengedit tsconfig.jsondan mengaturnya noImplicitAnyke false.

Bagi mereka yang ingin tahu bagaimana cara saya mengatasi ini. Saya melakukan semacam retasan.

Di dalam proyek saya, saya membuat folder bernama @typesdan menambahkannya ke tsconfig.json untuk menemukan semua jenis yang diperlukan darinya. Jadi ini terlihat seperti ini -

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

Dan di dalamnya saya membuat file bernama alltypes.d.ts. Untuk menemukan tipe yang tidak diketahui darinya. jadi bagi saya ini adalah tipe yang tidak diketahui dan saya menambahkannya di sana.

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

Jadi sekarang naskah ketikan tidak mengeluh tentang jenis yang tidak ditemukan lagi. :) situasi menang menang sekarang :)

Saya memiliki masalah yang sama dengan tipe react-redux. Solusi paling sederhana ditambahkan ke tsconfig.json:

"noImplicitAny": false

Contoh:

{
  "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"]
}

Jika tidak ada @types/<package>modul yang Anda gunakan, Anda dapat dengan mudah menghindari masalah dengan menambahkan // @ts-ignorekomentar di atas yaitu

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

Alternatifnya, Anda dapat membuat @types/<package>berikut ini:

penerbitan file deklarasi

DefinitelyTyped bagaimana saya bisa berkontribusi

Dalam kasus saya, saya memiliki masalah dengan reaksi, jadi saya mulai melakukan:

npm install @types/react

dan kemudian ke

npm install @types/react-dom

Ini berhasil untuk saya

Yang perlu Anda lakukan hanyalah menjalankan skrip di bawah ini. Kemudian, lepas / pasang kembali modul yang ingin Anda gunakan.

npm install --save @types/react-redux

Saya mengalami masalah ini ketika saya menambahkan react-router-domke aplikasi CRA baru menggunakan skrip ketikan. Setelah saya menambahkan @types/react-router, masalah sudah diperbaiki.

Saya memiliki masalah yang sama tetapi tidak selalu terkait dengan skrip ketikan, jadi saya sedikit kesulitan dengan opsi yang berbeda ini. Saya membuat aplikasi create-react-sangat dasar menggunakan modul tertentu yang react-portal-tooltip,mendapatkan kesalahan serupa:

Tidak dapat menemukan file deklarasi untuk modul 'react-portal-tooltip'. '/node_modules/react-portal-tooltip/lib/index.js' secara implisit memiliki tipe 'apapun'. Coba npm install @types/react-portal-tooltipjika ada atau tambahkan file deklarasi (.d.ts) baru yang berisi declare module 'react-portal-tooltip';ts (7016)

Saya mencoba banyak langkah pertama - menambahkan berbagai .d.tsfile, berbagai instalasi npm.

Tapi apa yang akhirnya berhasil bagi saya touch src/declare_modules.d.ts saat itu adalah src/declare_modules.d.ts:

declare module "react-portal-tooltip";

dan di src/App.js:

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

Saya berjuang sedikit dengan lokasi yang berbeda untuk menggunakan strategi umum 'deklarasikan modul' ini (saya sangat pemula) jadi saya pikir ini akan bekerja dengan opsi yang berbeda tetapi saya termasuk jalur untuk apa yang berhasil membuat saya bekerja.

Saya awalnya berpikir import './declare_modules.d.ts'itu perlu. Meskipun sekarang sepertinya tidak! Tapi saya termasuk langkah jika itu membantu seseorang.

Ini adalah jawaban stackoverflow pertama saya, jadi saya minta maaf atas proses yang tersebar di sini dan semoga masih membantu! :)

Juga, kesalahan ini diperbaiki jika paket yang Anda coba gunakan memiliki jenis file itu sendiri dan itu terdaftar di atribut package.json typings

Seperti:

{
  "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
}

Cara yang lebih hacky adalah dengan menambahkan misalnya, di boot.tsx baris

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

dengan

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

di declare_modules.d.ts

Ini berfungsi tetapi solusi lain adalah IMO yang lebih baik.

Apa yang saya lakukan adalah menjalankan perintah berikut dari command prompt nodejs saat berada di direktori folder proyek:

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. impor paket (dalam modul node) di file App.js dengan menambahkan kode: import UniqueId from 'react-html-id';

Saya melakukan hal di atas (meskipun saya sudah menginstal npm) dan berhasil!

Untuk kasus saya, masalahnya adalah bahwa jenisnya tidak ditambahkan ke file package.json di bawah devDependencies untuk memperbaikinya. Saya menjalankan npm install --save-dev @types/react-reduxcatatan--save-dev

coba tambahkan ke file tsconfig.json: "noImplicitAny": false berhasil untuk saya

bekerja dengan baik

npm install @types/react-materialize