typescriptからnpmモジュールを消費する方法は?


92

私はtypescriptでショットを与えています。これは、HelloWorldステージで正常に機能します。私は今npmモジュールを使おうとしています:

index.ts =

import _ = require('lodash')

console.log(_.toUpper('Hello, world !'))

これは機能しません:

  • tsc index.ts -> Cannot find module 'lodash'. (2307)
  • node-ts index.js -> Cannot find module 'lodash'. (2307)

タイプスクリプトのドキュメントを見て、グーグルで助けにはならなかった。他のS / Oの質問は、未回答(ここここ)または無関係です。

要素:

  • typescript1.8最新
  • はい、lodashがインストールさnpm i --save lodashれ、ファイルシステムに存在します(チェック済み)
  • 私もしました typings i --save lodash
  • バリアントimport * as _ from 'lodash'またはconst _ = require('lodash')どちらも機能しません
  • 他の回答"moduleResolution": "node""module": "commonjs"提案されているように、またいくつかの回答で提案されているように、tsconfig.jsonオプションを微調整しようと しましたが、それでも機能しません

typescriptでnpmパッケージをどのように消費しますか?


2
index.tsにlodash.d.tsへの参照を追加しましたか?それは次のようになります ///<reference path="../typings/lodash/lodash.d.ts"/>
Granga

@Grangaそれは動作します。これを答えとして追加できますか?
Offirmo 2016

2
それがうまくいくことをうれしく思います。Blackusはすでに答えを追加しており、それは私が提案したことをさらによく示しています。ただし、1つの注意事項:入力ファイルがコマンドラインで指定されている場合(これはあなたの場合です)、tsconfig.jsonファイルは無視されます。出典
Granga 2016

回答:


63

[編集]この回答をありがとう!ただし、2018年の時点では、古くなっています。読者の皆さん、他の答えを見てください。

npmからモジュールをインポートする方法はいくつかあります。しかし、タイピングを取得しないtsc場合は、必要なモジュールが見つからないと常に文句を言います(トランスパイルされたjsが実際に機能している場合でも)。

  • タイピングがありtsconfig.json、を使用しない場合は、を使用referenceしてタイピングをインポートします。

    /// <reference path="path/to/typings/typings.d.ts" />
    
    import * as _ from 'lodash`;
    
    console.log(_.toUpper('Hello, world !'))
    
  • tsconfig.jsonファイルを使用している場合は、必ずタイピングファイルを含めて(または除外しないで、選択して)、import前の例のようにします。

利用可能なタイピングがない場合。.d.tsファイルに独自のファイルを書き込むか、ライブラリの型チェックを無視するかの2つの選択肢があります。

型チェックを完全に無視するには(これは推奨される方法ではありません)、型の変数にライブラリをインポートしますany

 const _: any = require('lodash');

 console.log(_.toUpper('Hello, world !'))

tscrequire存在しないと文句を言うでしょう。入力するnodedeclare、エラーを破棄します。


2
3つの解決策で完全な答え。+1
Offirmo 2016

追加:ts-nodeタイピングインデックスが参照されている限り、それは機能しますtsconfig.json
Offirmo 2016

「エラーを破棄するように宣言する」という意味に混乱しています。インポートしようとしているモジュールでこの変更を行う必要がありますか?
スラッグ

1
この答えはひどく時代遅れです。以下の私の新しい答えを参照してくださいstackoverflow.com/a/53786892/587407
Offirmo

52

[2018/12] 2016年に私が尋ねたこの質問に対する新しい最新の回答。これは、古い回答があるにもかかわらず、依然として多くの活動を示しています。

簡単に言うと、TypeScriptはパッケージのコードに関する型情報(別名「型宣言ファイル」、別名「タイピング」)を必要とし、そうでなければTypeScriptの全体的なポイントを失うことになることを正しく伝えます。それらを提供またはオプトアウトするためのいくつかのソリューションがあり、ベストプラクティスの順にここにリストされています。


解決策0:モジュールはすでにタイピングを提供しています。package.jsonに次のような行が含まれている場合:

"typings": "dist/index.d.ts",

すでにTypeScriptが有効になっています。このページを読んでいる場合はそうではない可能性が高いので、続けましょう...


解決策1DefinitelyTypedのコミュニティ寄稿型を使用します。モジュール「foo」の場合、これを試してください。

npm add -D @types/foo

それがうまくいけば、大当たり!これでタイピングが完了し、モジュールを使用できるようになりました。npmがモジュール@types / fooが見つからないと文句を言ったら、続けましょう...


解決策2:このモジュールに関するカスタムタイピングを提供します。(ゼロエフォートを実行するオプション付き)

  1. プロジェクトのルートに「typings-custom」という名前のフォルダーを作成します
  2. tsconfig.jsonでこのフォルダーのコンテンツを参照します。
"include": [
    "./typings-custom/**/*.ts"
]
  1. この正確な名前でファイルを作成します:foo.d.ts [foo =モジュールの名前]次の内容で:
declare module 'foo'

TypeScriptコードはコンパイルされますが、型情報はありません(TypeScriptは「any」型のfooモジュールを考慮します)。

公式ドキュメントDefinitelyTypedの例を見て、自分で型情報を書き込もうとすることもできます。その場合は、入力をモジュールに直接提供するか(モジュールの作成者が受け入れる場合はソリューション0)、またはDefinitelyTypedに提供する(ソリューション1)ことを検討してください。


1
@ Offirmo、1つのファイルで複数のカスタム入力を宣言することもできます!したがって、複数のファイルは必要ありません(多分?)。
lazycipher

手順2.Reference the content of this folder in your tsconfig.json:次のエラーが発生します Unknown compiler option 'include'.
Sumit

1
それはコンパイラオプションではありません@Sumit、それはの兄弟でなければなりませんcompilerOptions
Offirmo

24

おそらく宣言ファイルがありません。

詳細については、DefinitelyTypedを参照してください。


これを試して:

npm install --save lodash
npm install --save @types/lodash

これで、インポートできます。

import _ from 'lodash';

インポートするモジュールに複数のエクスポートがある場合は、次のように実行できます。

import { Express, Router } from 'express';

インポートするモジュールに「デフォルトのエクスポートがない」場合は、次のようにする必要があります。

import * as http from 'http';

ES6コードのようにで* as _はなく、なぜ使用する必要があるの_ from 'lodash'ですか?
JohnnyQ 2017年

@JohnnyQ良い点。import _ from 'lodash';この場合、使用する方が適切です。インポートのさまざまな方法と、それらを使用する理由を示すために、回答を更新しました。
デレクソイケ2017年

1
* as _ モジュールにはデフォルトのエクスポートを持っていない場合は必要とされています。tscコンパイラはこれを警告します。
user2867342 2017年

「デフォルトのエクスポートなし」とは、Typescriptタイプが定義されていないことを意味しますか(つまり、プレーンなJavaScriptモジュールをインポートします)?私は.... JS /活字体に新たなんだ
ビッグリッチ

2
@BigRich「デフォルトのエクスポートなし」は、モジュールにexport default <...>ステートメントがないことを意味します。Typescriptモジュールのドキュメントの「デフォルトのエクスポート」セクションをご覧ください
デレクソイケ2018年

5

それは私のために働いた。

  1. 「typings」という名前のフォルダを作成します。
  2. typesフォルダーで、ファイル名module-name.d.tsを作成します。を含む:

    declare module "module-name";

  3. tsconfig.jsonで、フォルダーを参照します

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


こんにちは!貢献してくれてありがとう。この方法はすでに私の回答に含まれており、最後の手段としてのみ使用する必要があります。
Offirmo

ステップ3: In tsconfig.json, refer to the folder、次のエラーを与える:Unknown compiler option 'typesRoots'.
スミット

1
@Sumit私の場合、「typesRoots」は「compilerOptions」内にあります
QuynhNgo19年

1
これはtypesRootsではなくtypeRootsであり、compilerOptions内にある必要があります
CM

0

私はこのエラーを受け取りました、そして答えのどれも私のために働きませんでした、しかしあなたがtypescriptでノードモジュールを扱いたいとき私は何かを理解します

$npm install @types/<module_name>

例えば

npm install @types/cheerio

言う代わりに

npm install cheerio
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.