web-dev-qa-db-ja.com

モジュール 'module-name'の宣言ファイルが見つかりませんでした。 '/path/to/module-name.js'は暗黙的に 'any'型を持ちます

TypeScript モジュール解決 がどのように機能するのかを読みます。

私は次のリポジトリを持っています： ts-di 。ディレクトリ構造をコンパイルした後は次のとおりです。

├── dist
│   ├── annotations.d.ts
│   ├── annotations.js
│   ├── index.d.ts
│   ├── index.js
│   ├── injector.d.ts
│   ├── injector.js
│   ├── profiler.d.ts
│   ├── profiler.js
│   ├── providers.d.ts
│   ├── providers.js
│   ├── util.d.ts
│   └── util.js
├── LICENSE
├── package.json
├── README.md
├── src
│   ├── annotations.ts
│   ├── index.ts
│   ├── injector.ts
│   ├── profiler.ts
│   ├── providers.ts
│   └── util.ts
└── tsconfig.json

私のpackage.jsonで私は"main": "dist/index.js"を書きました。

Node.jsでは、すべて問題なく動作しますが、TypeScript：

import {Injector} from 'ts-di';

モジュール 'ts-di'の宣言ファイルが見つかりませんでした。 '/path/to/node_modules/ts-di/dist/index.js'は暗黙的に 'any'型を持ちます。

それでも、次のようにインポートすれば、すべてうまくいきます。

import {Injector} from '/path/to/node_modules/ts-di/dist/index.js';

何がおかしいのですか？

typescriptnode-modulests7016
130
ktretyak

あなたが2日間外を見ていて、それがこのようにそれを見つけるとき、その気持ち：ちょうど.jsの"main": "dist/index.js"からpackage.jsonを取り除けば、すべてうまくいきます！

"main": "dist/index",

_ upd _ ：あなたがあなた自身のnpmパッケージを持っているなら、この答えは相対的です。そうでなければ - 以下の私の答えを見てください 。

そして上記の答えがあなたのモジュールをインポートすることで解決されないならば、単にpackage.jsonにtypingsを加えてみてください：

"main": "dist/index",
"typings": "dist/index",

もちろん、ここでフォルダdist - それはあなたのモジュールのファイルを保存する場所です。

67
ktretyak

他に2つの解決策があります

モジュールがあなたのものではない場合 - @typesから型をインストールするようにしてください。

npm install -D @types/module-name

上記のインストールエラーが発生した場合 - importステートメントをrequireに変更してみてください。

// import * as yourModuleName from 'module-name';
const yourModuleName = require('module-name');
162
ktretyak

ライブラリ自体または'foo'パッケージ（ DefinitelyTyped repositoryから生成）のいずれかでタイピングを提供しないサードパーティ製モジュール@types/fooをインポートする場合は、このエラーを回避することができます。 .d.ts拡張子を持つファイルでモジュールを宣言することによって：

// foo.d.ts
declare module 'foo';

fooをインポートすると、anyと入力されます。

代わりに、あなたがあなた自身のタイピングを転がしたいならば、あなたもそれをすることができます：

// foo.d.ts
declare module 'foo' {
    export function getRandomNumber(): number
}

その後、これは正しくコンパイルされます。

import { getRandomNumber } from 'foo';
const x = getRandomNumber(); // x is inferred as number

モジュールにフルタイピングを提供する必要はありません。実際に使用しているビットには十分です（そして適切なタイピングが必要です）ので、かなり少量のAPIを使用している場合は特に簡単です。

一方、外部ライブラリのタイピングを気にせず、タイピングのないすべてのライブラリをanyとしてインポートしたい場合は、これを.d.tsという拡張子を持つファイルに追加できます。

declare module '*';

これの利点（および欠点）は、あなたが絶対に何でもインポートすることができ、TSがコンパイルするということです。

85
Retsam

TypeScriptは基本的に、Javascriptに制約がないため、ルールを実装し、コードに型を追加してより明確で正確なものにします。 TypeScriptでは、コンパイラがコードをチェックしてエラーを見つけることができるように、データを記述する必要があります。不適合な型を使用しているかどうか、自分の範囲外にいる場合、または別の型を返そうとしている場合は、コンパイラから通知されます。そのため、TypeScriptで外部ライブラリやモジュールを使用している場合は、それらにそのコードの型を記述するファイルを含める必要があります。これらのファイルは 型宣言ファイル と呼ばれ、拡張子はd.tsです。 npmモジュールの宣言型の大部分はすでに書かれており、npm install @types/module_nameを使用してそれらを含めることができます（module_nameは型を含めたいモジュールの名前です）。

ただし、型定義を持たないモジュールもあります。エラーをなくしてimport * as module_name from 'module-name'を使用してモジュールをインポートするには、プロジェクトのルートにtypingsというフォルダーを作成し、その中にモジュール名を付けて新しいフォルダーを作成します。そのフォルダにmodule_name.d.tsファイルを作成し、declare module 'module_name'を書き込みます。その後、tsconfig.jsonファイルに移動し、compilerOptionsに（フォルダーへの適切な相対パスを指定して）"typeRoots": [ "../../typings", "../../node_modules/@types"]を追加して、TypeScriptにライブラリとモジュールの型定義を見つける場所を知らせ、ファイルに新しいプロパティ"exclude": ["../../node_modules", "../../typings"]を追加します。 tsconfig.jsonファイルの例は次のとおりです。

{
    "compilerOptions": {
        "module": "commonjs",
        "noImplicitAny": true,
        "sourceMap": true,
        "outDir": "../dst/",
        "target": "ESNEXT",
        "typeRoots": [
            "../../typings",
            "../../node_modules/@types"
        ]
    },
    "lib": [
            "es2016"
    ],
    "exclude": [
        "../../node_modules",
        "../../typings"
    ]
}

こうすることで、エラーはなくなり、最新のES6とTypeScriptの規則に従うことができます。

20
Marko Rochevski

迅速な修正が必要な場合は、単にインポートの前にこれを追加してください。

// @ts-ignore
4
Liran H

この方法は私のために働く：

declare module Injector;

  {
    "compilerOptions": {
        "strictNullChecks": true,
        "moduleResolution": "node",
        "jsx": "react",
        "noUnusedParameters": true,
        "noUnusedLocals": true,
        "allowSyntheticDefaultImports":true,
        "target": "es5",
        "module": "ES2015",
        "declaration": true,
        "outDir": "./lib",
        "noImplicitAny": true,
        "importHelpers": true
      },
      "include": [
        "src/**/*",
        "index.d.ts",   // declaration file path
      ],
      "compileOnSave": false
    }
2
Lumaskcete

私はTypeScriptで書かれた反応アプリケーションでノードモジュールを使用して同じ問題を抱えていました。モジュールはnpm i --save my-moduleを使用して正常にインストールされました。それはJavaScriptで書かれており、Clientクラスをエクスポートします。

と：

import * as MyModule from 'my-module';
let client: MyModule.Client = new MyModule.Client();

コンパイルがエラーで失敗します。

Could not find a declaration file for module 'my-module'. 
'[...]/node_modules/my-module/lib/index.js' implicitly has an 'any' type.
  Try `npm install @types/my-module` if it exists or add a new declaration (.d.ts) file containing `declare module 'my-module';`

@types/my-moduleは存在しないので、my-module.d.tsがインポートされたファイルの隣に、推奨される行とともにmy-moduleファイルを追加しました。それから私はエラーを得ました：

Namespace '"my-module"' has no exported member 'Client'.

クライアントは実際にはエクスポートされていて、私がjsアプリでそれを使用すれば正常に動作します。また、前のメッセージは、コンパイラが正しいファイルを探していることを示しています（/node_modules/my-module/lib/index.jsはmy-module/package.json"main"要素で定義されています）。

暗黙のanyを気にしない、つまりtsconfig.jsonファイルの次の行をfalseに設定するようにコンパイラーに指示して、問題を解決しました。

    "noImplicitAny": false,
2
Kanthavel

私もこれを手に入れていました、モジュールとタイプがすでにインストールされていて私のIDEを数回リロードしていてもしばらくの間困惑していました。

私の場合、それを修正したのは、端末プロセスを終了し、node_modulesを削除し、ノードパッケージマネージャのキャッシュをクリアし、新たにinstallを実行してからエディタを再ロードすることでした。

1
Leo
npm install --save TypeScript @types/node @types/react @types/react-dom @types/jest

または

yarn add TypeScript @types/node @types/react @types/react-dom @types/jest
0
Bongi Looks

私はreact-native-buttonからButtonをインポートしていましたが、写真に示すようにこのエラーが発生していました： enter image description here

トリックをします。 node_modules/react-native-button /フォルダーに移動し、Button.jsファイルのコンテンツをコピーします。 Button.d.tsという名前の新しいファイルを作成し、その中にコンテンツを貼り付けます。それを保存し、エラーはなくなりました！理由はわかりませんが、今のところはなくなっています！

0
Ali Yar Khan