typescript react - ไม่พบไฟล์ประกาศสำหรับโมดูล '' react-materialize ' 'path / to / module-name.js' โดยปริยายมีประเภทใดก็ได้

ฉันกำลังพยายามนำเข้าส่วนประกอบจาก react-materialize เป็น -

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

แต่เมื่อ webpack กำลังรวบรวมของฉัน.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ของการตอบสนอง-เป็นตัวเป็นตนลักษณะชอบนี้ แต่วิธีแก้ปัญหานี้สำหรับการนำเข้าโมดูลในไฟล์ของฉันเอง ..

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

ผมมีข้อผิดพลาดที่คล้ายกัน 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และการตั้งค่าไปnoImplicitAnyfalse

สำหรับใครที่อยากรู้ว่าฉันเอาชนะเรื่องนี้ได้อย่างไร ฉันแฮ็คสิ่งของชนิดหนึ่ง

ภายในโปรเจ็กต์ของฉันฉันสร้างโฟลเดอร์ที่เรียกว่า@typesและเพิ่มลงใน tsconfig.json เพื่อค้นหาประเภทที่ต้องการทั้งหมดจากมัน มันก็เป็นแบบนี้ -

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

และภายในนั้นฉันได้สร้างไฟล์ชื่อalltypes.d.ts. เพื่อค้นหาประเภทที่ไม่รู้จักจากมัน ดังนั้นสำหรับฉันสิ่งเหล่านี้เป็นประเภทที่ไม่รู้จักและฉันเพิ่มเข้าไปตรงนั้น

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

ดังนั้นตอนนี้ typescript ไม่ได้บ่นเกี่ยวกับประเภทที่ไม่พบอีกต่อไป :) ชนะสถานการณ์ตอนนี้ :)

ฉันมีปัญหาเดียวกันกับประเภท react-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"]
}

หากไม่มี@types/<package>โมดูลที่คุณใช้อยู่คุณสามารถหลีกเลี่ยงปัญหาได้อย่างง่ายดายโดยการเพิ่ม// @ts-ignoreความคิดเห็นด้านบนเช่น

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

หรือคุณอาจสร้างสิ่ง@types/<package>ต่อไปนี้ที่ขาดหายไป:

การเผยแพร่ไฟล์ประกาศ

พิมพ์ว่าฉันจะมีส่วนร่วมได้อย่างไร

ในกรณีของฉันฉันมีปัญหากับการตอบสนองดังนั้นฉันจึงเริ่มทำ:

npm install @types/react

แล้วไปที่

npm install @types/react-dom

สิ่งนี้ได้ผลสำหรับฉัน

สิ่งที่คุณต้องทำคือเรียกใช้สคริปต์ด้านล่าง จากนั้นถอด / ติดตั้งโมดูลที่คุณต้องการใช้ใหม่

npm install --save @types/react-redux

ฉันมีปัญหานี้เมื่อฉันเพิ่มลงreact-router-domในแอป CRA ใหม่โดยใช้ typescript หลังจากฉันเพิ่ม@types/react-routerปัญหาได้รับการแก้ไขแล้ว

ฉันมีปัญหาเดียวกันนี้ แต่ไม่จำเป็นต้องเกี่ยวข้องกับ typescript ดังนั้นฉันจึงต้องดิ้นรนเล็กน้อยกับตัวเลือกต่างๆเหล่านี้ ฉันกำลังสร้างแอปสร้างปฏิกิริยาพื้นฐานโดยใช้โมดูลเฉพาะซึ่งreact-portal-tooltip,ได้รับข้อผิดพลาดที่คล้ายกัน:

ไม่พบไฟล์ประกาศสำหรับโมดูล 'react-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 แรกของฉันดังนั้นฉันจึงขออภัยสำหรับกระบวนการที่กระจัดกระจายที่นี่และหวังว่ามันจะยังคงเป็นประโยชน์! :)

นอกจากนี้ข้อผิดพลาดนี้จะได้รับการแก้ไขหากแพ็คเกจที่คุณพยายามใช้มีไฟล์ประเภทของตัวเองและแสดงอยู่ในแอตทริบิวต์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
}

วิธีที่แฮ็คมากขึ้นคือการเพิ่มเช่นใน boot.tsx บรรทัด

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

ด้วย

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

ใน declare_modules.d.ts

มันใช้งานได้ แต่โซลูชันอื่นดีกว่า IMO

สิ่งที่ฉันทำคือเรียกใช้คำสั่งต่อไปนี้จากพรอมต์คำสั่ง 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 แล้ว) และมันก็ใช้งานได้!

สำหรับกรณีของฉันปัญหาคือประเภทไม่ได้รับการเพิ่มลงในไฟล์ package.json ภายใต้devDependenciesเพื่อแก้ไขฉันเรียกใช้npm install --save-dev @types/react-reduxหมายเหตุ--save-dev

ลองเพิ่มไฟล์ tsconfig.json: "noImplicitAny": false ใช้ได้ผลสำหรับฉัน

ใช้งานได้ดี

npm install @types/react-materialize