打字稿反应 - 找不到模块的声明文件＆＃39;＆＃39; react-materialize＆＃39;。 ＆＃39;路径/到/模块name.js＆＃39;隐含地有任何类型

时间：2017-01-04 11:29:14

标签： reactjs webpack webpack-2

我正在尝试从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。

react-materialize的index.js看起来像这样。但是如何在我自己的文件中为模块导入解决这个问题..

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

20 个答案:

答案 0 :(得分：28)

对于那些想知道我是如何克服这一点的人。我做了一些黑客的东西。

在我的项目中，我创建了一个名为@Types的文件夹，并将其添加到tsconfig.json，以便从中查找所有必需的类型。所以看起来有点像这样 - 

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

在里面我创建了一个名为alltypes.d.ts的文件。从中查找未知类型。所以对我来说这些是未知的类型，我在那里添加了它。

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

所以现在打字稿并没有抱怨找不到的类型。 :)现在胜利局面:)）

答案 1 :(得分：24)

我有类似的错误，但对我而言是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。

答案 2 :(得分：21)

确保在执行以下操作后停止您的 React 本地服务器并重新启动它：

1- 手动创建 .d.ts 文件，您只需要执行以下操作：

2 - 输入 src folder

3 - 创建 global.d.ts 文件

4 - 在其中声明模块，例如：

declare module 'module-name';

我之前回答过 here 并且很好

答案 3 :(得分：20)

在我的情况下，我对React有问题，所以我开始这样做：

npm install @types/react

然后到

npm install @types/react-dom

这对我有用

答案 4 :(得分：18)

只需为 react 安装必要的类型，它应该可以解决错误。

如果您使用纱线：

yarn add @types/react @types/react-dom @types/react-router-dom -D

如果您使用的是 npm：

npm install @types/react @types/react-dom @types/react-router-dom --save-dev

答案 5 :(得分：5)

我遇到了同样的问题，但不一定与打字稿有关，所以我在这些不同的选项上有些挣扎。我正在使用特定模块react-portal-tooltip,制作一个非常基本的create-react-app，得到类似的错误：

找不到模块'react-portal-tooltip'的声明文件。 “ /node_modules/react-portal-tooltip/lib/index.js”隐式具有“ any”类型。 尝试使用npm install @types/react-portal-tooltip（如果存在）或添加一个包含declare module 'react-portal-tooltip'; ts（7016）

的新声明（.d.ts）文件。

我首先尝试了许多步骤-添加了各种.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答案，因此我对此处分散的过程表示歉意，希望它对您有所帮助！ ：）

答案 6 :(得分：5)

我对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"]
}

答案 7 :(得分：3)

与 react-router-dom 有相同的错误。

当您处理打字稿项目时会发生此错误，默认模块没有附带打字稿所需的类型。

所以我在 npmjs.com 上搜索了一个名为 @types/react-router-dom 的包，如果它不是你要找的 react-router-dom，然后用你的无类型模块替换 react-router-dom。

在 npm 网站上寻找最新版本，然后将其添加到您的 package.json 中，如下所示：

[...]
"dependencies": {
    [...]
    "@types/react-router-dom": "^5.1.8",
    [...]
  },
[...]

完成后，运行 yarn install

那么它应该会摇滚！

答案 8 :(得分：3)

<块引用>

找不到模块“react/jsx-runtime”的声明文件

如果有人遇到此错误，那么您会惊讶地发现，在使用 create-react-app 创建 React 应用程序时，它仅在 @types/react 中显示 package.json。但是，如果您查看 node_modules/@types 文件夹内部，您将找不到任何 react 文件夹。

解决方案是完全清除 node_modules 文件夹并重新安装 - npm install 或者可以使用单个模块安装 - npm install @types/react。

答案 9 :(得分：3)

您需要做的就是运行以下脚本。然后，删除/重新安装您要使用的模块。

npm install --save @ types / react-redux

答案 10 :(得分：2)

我所做的是在项目文件夹目录中的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. 通过添加代码import UniqueId from 'react-html-id';
    8. 将App包中的包（在节点模块中）导入。

我做到了以上（尽管我已经安装了npm）并且有效！

答案 11 :(得分：2)

更hacky的方法是在boot.tsx中添加eg。，行

    <div class="dataTables_wrapper no-footer" id="arzeshdarayi_wrapper"><div class="dt-buttons"><a href="#" aria-controls="arzeshdarayi" tabindex="0" class="dt-button buttons-copy buttons-html5"><span>Copy</span></a><a href="#" aria-controls="arzeshdarayi" tabindex="0" class="dt-button buttons-excel buttons-html5"><span>Excel</span></a><a href="#" aria-controls="arzeshdarayi" tabindex="0" class="dt-button buttons-print"><span>Print</span></a></div><div class="dataTables_filter" id="arzeshdarayi_filter"><label><input aria-controls="arzeshdarayi" placeholder="جستجو" class="" type="search"></label></div><table style="width: 100%;" aria-describedby="arzeshdarayi_info" role="grid" id="arzeshdarayi" class="display dataTable no-footer" cellspacing="0" width="100%">
    <thead>
        <tr role="row"><th aria-label="زمان : activate to sort column ascending" style="width: 36px;" colspan="1" rowspan="1" aria-controls="arzeshdarayi" tabindex="0" class="sorting">زمان </th><th aria-sort="descending" aria-label="تاریخ: activate to sort column ascending" style="width: 75px;" colspan="1" rowspan="1" aria-controls="arzeshdarayi" tabindex="0" class="sorting_desc">تاریخ</th><th aria-label="قیمت صدور: activate to sort column ascending" style="width: 63px;" colspan="1" rowspan="1" aria-controls="arzeshdarayi" tabindex="0" class="sorting">قیمت صدور</th><th aria-label="قیمت ابطال خالص ارزش روز    : activate to sort column ascending" style="width: 82px;" colspan="1" rowspan="1" aria-controls="arzeshdarayi" tabindex="0" class="sorting">قیمت ابطال خالص ارزش روز    </th><th aria-label="خالص ارزش آماری    : activate to sort column ascending" style="width: 70px;" colspan="1" rowspan="1" aria-controls="arzeshdarayi" tabindex="0" class="sorting">خالص ارزش آماری </th><th aria-label="تفاوت مبلغ ارزش آماری با خالص ارزش روز : activate to sort column ascending" style="width: 82px;" colspan="1" rowspan="1" aria-controls="arzeshdarayi" tabindex="0" class="sorting">تفاوت مبلغ ارزش آماری با خالص ارزش روز  </th><th aria-label="تفاوت درصد ارزش آماری با خالص ارزش روز : activate to sort column ascending" style="width: 88px;" colspan="1" rowspan="1" aria-controls="arzeshdarayi" tabindex="0" class="sorting">تفاوت درصد ارزش آماری با خالص ارزش روز  </th><th aria-label="تعداد واحدهای صادرشده امروز    : activate to sort column ascending" style="width: 73px;" colspan="1" rowspan="1" aria-controls="arzeshdarayi" tabindex="0" class="sorting">تعداد واحدهای صادرشده امروز </th><th aria-label="تعداد واحدهای صادر شده تاامروز : activate to sort column ascending" style="width: 93px;" colspan="1" rowspan="1" aria-controls="arzeshdarayi" tabindex="0" class="sorting">تعداد واحدهای صادر شده تاامروز  </th><th aria-label="تعداد واحدهای ابطال شده امروز      : activate to sort column ascending" style="width: 74px;" colspan="1" rowspan="1" aria-controls="arzeshdarayi" tabindex="0" class="sorting">تعداد واحدهای ابطال شده امروز       </th><th aria-label="تعداد واحدهای ابطال شده تا امروز   : activate to sort column ascending" style="width: 88px;" colspan="1" rowspan="1" aria-controls="arzeshdarayi" tabindex="0" class="sorting">تعداد واحدهای ابطال شده تا امروز    </th><th aria-label="تعداد واحد سرمایه‌گذاری نزد سرمایه‌گذار    : activate to sort column ascending" style="width: 95px;" colspan="1" rowspan="1" aria-controls="arzeshdarayi" tabindex="0" class="sorting">تعداد واحد سرمایه‌گذاری نزد سرمایه‌گذار </th><th aria-label="كل خالص ارزش دارائيها: activate to sort column ascending" style="width: 118px;" colspan="1" rowspan="1" aria-controls="arzeshdarayi" tabindex="0" class="sorting">كل خالص ارزش دارائيها</th></tr>
    </thead>
    <tbody><tr class="odd" role="row"><td>12:46</td><td class="sorting_1">1396/10/15</td><td>1,012,967</td><td>1,011,507</td><td>1,009,098</td><td>2409</td><td>0.24%</td><td>0</td><td>11,524,203</td><td>0</td><td>4,953,477</td><td>6,571,726</td><td>6,647,351,262,746</td></tr><tr class="even" role="row"><td>12:40</td><td class="sorting_1">1396/10/14</td><td>1,012,333</td><td>1,010,883</td><td>1,008,473</td><td>2410</td><td>0.24%</td><td>77959</td><td>11,524,203</td><td>5143</td><td>4,953,477</td><td>6,571,726</td><td>6,643,244,452,033</td></tr><tr class="odd" role="row"><td>13:12</td><td class="sorting_1">1396/10/13</td><td>1,011,819</td><td>1,010,362</td><td>1,007,927</td><td>2435</td><td>0.24%</td><td>171728</td><td>11,446,244</td><td>14069</td><td>4,948,334</td><td>6,498,910</td><td>6,566,254,645,887</td></tr><tr class="even" role="row"><td>11:14</td><td class="sorting_1">1396/10/12</td><td>1,011,267</td><td>1,009,782</td><td>1,007,298</td><td>2484</td><td>0.25%</td><td>62780</td><td>11,274,516</td><td>21849</td><td>4,934,265</td><td>6,341,251</td><td>6,403,285,129,644</td></tr><tr class="odd" role="row"><td>11:49</td><td class="sorting_1">1396/10/11</td><td>1,010,690</td><td>1,009,205</td><td>1,006,699</td><td>2506</td><td>0.25%</td><td>39550</td><td>11,211,736</td><td>35114</td><td>4,912,416</td><td>6,300,320</td><td>6,358,313,227,919</td></tr><tr class="even" role="row"><td>11:07</td><td class="sorting_1">1396/10/10</td><td>1,010,021</td><td>1,008,623</td><td>1,006,113</td><td>2510</td><td>0.25%</td><td>50967</td><td>11,172,186</td><td>126252</td><td>4,877,302</td><td>6,295,884</td><td>6,350,169,723,202</td></tr><tr class="odd" role="row"><td>12:36</td><td class="sorting_1">1396/10/09</td><td>1,009,435</td><td>1,008,056</td><td>1,005,584</td><td>2472</td><td>0.25%</td><td>17254</td><td>11,121,219</td><td>7092</td><td>4,751,050</td><td>6,371,169</td><td>6,422,499,283,915</td></tr><tr class="even" role="row"><td>15:07</td><td class="sorting_1">1396/10/08</td><td>1,008,734</td><td>1,007,358</td><td>1,004,882</td><td>2476</td><td>0.25%</td><td>0</td><td>11,103,965</td><td>0</td><td>4,743,958</td><td>6,361,007</td><td>6,407,808,590,653</td></tr><tr class="odd" role="row"><td>15:00</td><td class="sorting_1">1396/10/07</td><td>1,008,215</td><td>1,006,851</td><td>1,004,375</td><td>2476</td><td>0.25%</td><td>50208</td><td>11,103,965</td><td>29158</td><td>4,743,958</td><td>6,361,007</td><td>6,404,584,654,430</td></tr><tr class="even" role="row"><td>13:49</td><td class="sorting_1">1396/10/06</td><td>1,007,682</td><td>1,006,326</td><td>1,003,842</td><td>2484</td><td>0.25%</td><td>196263</td><td>11,053,757</td><td>26576</td><td>4,714,800</td><td>6,339,957</td><td>6,380,065,439,986</td></tr><tr class="odd" role="row"><td>13:52</td><td class="sorting_1">1396/10/05</td><td>1,007,102</td><td>1,005,724</td><td>1,003,179</td><td>2545</td><td>0.25%</td><td>98424</td><td>10,857,494</td><td>24918</td><td>4,688,224</td><td>6,170,270</td><td>6,205,583,745,026</td></tr><tr class="even" role="row"><td>13:57</td><td class="sorting_1">1396/10/04</td><td>1,006,507</td><td>1,005,293</td><td>1,002,692</td><td>2601</td><td>0.26%</td><td>55056</td><td>10,759,070</td><td>19459</td><td>4,663,306</td><td>6,096,764</td><td>6,129,032,475,294</td></tr><tr class="odd" role="row"><td>13:18</td><td class="sorting_1">1396/10/03</td><td>1,005,818</td><td>1,004,597</td><td>1,002,057</td><td>2540</td><td>0.25%</td><td>96499</td><td>10,704,014</td><td>155772</td><td>4,643,847</td><td>6,061,167</td><td>6,089,028,779,015</td></tr><tr class="even" role="row"><td>13:57</td><td class="sorting_1">1396/10/02</td><td>1,005,237</td><td>1,004,028</td><td>1,001,431</td><td>2597</td><td>0.26%</td><td>2721</td><td>10,607,515</td><td>788</td><td>4,488,075</td><td>6,120,440</td><td>6,145,088,189,758</td></tr><tr class="odd" role="row"><td>14:00</td><td class="sorting_1">1396/10/01</td><td>1,004,652</td><td>1,003,456</td><td>1,000,869</td><td>2587</td><td>0.26%</td><td>0</td><td>10,604,794</td><td>0</td><td>4,487,287</td><td>6,118,507</td><td>6,139,652,390,252</td></tr><tr class="even" role="row"><td>13:56</td><td class="sorting_1">1396/09/30</td><td>1,004,105</td><td>1,002,916</td><td>1,000,330</td><td>2586</td><td>0.26%</td><td>191603</td><td>10,604,794</td><td>9080</td><td>4,487,287</td><td>6,118,507</td><td>6,136,353,083,234</td></tr><tr class="odd" role="row"><td>13:51</td><td class="sorting_1">1396/09/29</td><td>1,003,514</td><td>1,002,297</td><td>999,632</td><td>2665</td><td>0.27%</td><td>103340</td><td>10,413,191</td><td>21231</td><td>4,478,207</td><td>5,935,984</td><td>5,949,621,352,682</td></tr><tr class="even" role="row"><td>12:54</td><td class="sorting_1">1396/09/28</td><td>1,002,923</td><td>1,001,735</td><td>999,043</td><td>2692</td><td>0.27%</td><td>289038</td><td>10,309,851</td><td>10684</td><td>4,456,976</td><td>5,853,875</td><td>5,864,030,526,174</td></tr><tr class="odd" role="row"><td>13:01</td><td class="sorting_1">1396/09/27</td><td>1,002,139</td><td>1,001,151</td><td>1,001,151</td><td>0</td><td>0.00%</td><td>124135</td><td>10,020,813</td><td>23504</td><td>4,446,292</td><td>5,575,521</td><td>5,581,939,275,757</td></tr><tr class="even" role="row"><td>12:16</td><td class="sorting_1">1396/09/26</td><td>1,001,571</td><td>1,000,575</td><td>1,000,575</td><td>0</td><td>0.00%</td><td>40709</td><td>9,896,678</td><td>78930</td><td>4,422,788</td><td>5,474,890</td><td>5,478,036,347,324</td></tr></tbody>
</table><div aria-live="polite" role="status" id="arzeshdarayi_info" class="dataTables_info">نمایش 1 تا 20 از تعداد 2,144 </div><div id="arzeshdarayi_paginate" class="dataTables_paginate paging_simple_numbers"><a id="arzeshdarayi_previous" tabindex="0" data-dt-idx="0" aria-controls="arzeshdarayi" class="paginate_button previous disabled">قبلی</a><span><a tabindex="0" data-dt-idx="1" aria-controls="arzeshdarayi" class="paginate_button current">1</a><a tabindex="0" data-dt-idx="2" aria-controls="arzeshdarayi" class="paginate_button ">2</a><a tabindex="0" data-dt-idx="3" aria-controls="arzeshdarayi" class="paginate_button ">3</a><a tabindex="0" data-dt-idx="4" aria-controls="arzeshdarayi" class="paginate_button ">4</a><a tabindex="0" data-dt-idx="5" aria-controls="arzeshdarayi" class="paginate_button ">5</a><span class="ellipsis">…</span><a tabindex="0" data-dt-idx="6" aria-controls="arzeshdarayi" class="paginate_button ">108</a></span><a id="arzeshdarayi_next" tabindex="0" data-dt-idx="7" aria-controls="arzeshdarayi" class="paginate_button next">بعدی</a></div></div>

与

import './path/declare_modules.d.ts';
declare module 'react-materialize'; declare module 'react-router'; declare module 'flux';

中的

它有效，但其他解决方案是更好的IMO。

答案 12 :(得分：2)

此外，如果您尝试使用的软件包具有自己的类型文件并，则会在 package.json {中将其列为<} {1}}属性

像这样：

typings

答案 13 :(得分：1)

如果您使用的模块没有@types/<package>，则可以通过添加// @ts-ignore轻松地解决此问题，即

// @ts-ignore
import { render } from 'react-snapshot';

或者，您可以按照以下步骤创建缺少的@types/<package>：

declaration files publishing

DefinitelyTyped how can i contribute

答案 14 :(得分：1)

使用打字稿将export default new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ { path: '/', name: 'LevelOne', component: LevelOneView, beforeEnter: (to, from, next) => { // Clear the query store.commit('resetQuery'); return next(); } }, { path: '/search', name: 'LevelTwo', component: LevelTwoView }, { path: '/:city', name: 'LevelTwoWithCity', component: LevelTwoView, beforeEnter(to, _, next) { // Strip the leading slash let toPath = to.path.replace("/", "").toLowerCase(); // Check if the path is a number and push the lv3 view if (!isNaN(toPath)) { console.log("Router: found valid path for lv 3") const id = parseInt(toPath); console.log(id); return next({name: 'LevelThree', params: { id: id }}); } // Load up the query let query = store.getters.getQuery; // Get the name of all the regions, as a list, to lower case let regions = query.regions.map(el => el.name.toLowerCase()); // Check if we have a matching one if (regions.includes(toPath)) { // First, deactivate them all query.regions.map(el => el.value = false) // Then, activate only the one that matched query.regions.filter(el => el.name.toLowerCase().includes(toPath)).map(el => el.value = true); // Commit the query store.commit('setQuery', query); } return next(); } }, { path: '/:id', name: 'LevelThree', component: LevelThreeView, beforeEnter(to, from, next) { console.log("Inside Level3 beforeEnter"); next(); } }, { path: '/not-found', name: '404', component: NotFound, }, { path: '*', name: '404', component: NotFound, }, ] }) 添加到新的CRA应用程序时遇到了这个问题。添加react-router-dom后，此问题已解决。

答案 15 :(得分：0)

工作正常

npm install @types/react-materialize

答案 16 :(得分：0)

对于我来说，问题在于类型没有被添加到 devDependencies 下的package.json文件中以修复它，我运行了npm install --save-dev @types/react-redux注意{ {1}}

答案 17 :(得分：0)

尝试添加到tsconfig.json文件："noImplicitAny": false 为我工作

答案 18 :(得分：-1)

在tsconfig.json中，设置 "noImplicitAny": false 为我解决了这个问题

答案 19 :(得分：-1)

在某些情况下，某些依赖项可能没有类型，而 ts 会强制您为此包含类型。有一种解决方法可以解决此问题，即改用 javascript。

例如

import {Charts} from "react-charts"; //错误：找不到模块“react-charts”的声明文件。

解决方法：const ReactChart = require("react-charts"); //无错误

相关问题
最新问题