lodash を angular2 + typescript アプリケーションにインポートする 質問する

lodash を angular2 + typescript アプリケーションにインポートする 質問する

lodash モジュールをインポートするのに苦労しています。npm+gulp を使用してプロジェクトをセットアップしましたが、同じ壁にぶつかり続けます。通常の lodash だけでなく、lodash-es も試しました。

lodash npm パッケージ: (パッケージのルート フォルダーに index.js ファイルがあります)

import * as _ from 'lodash';    

結果:

error TS2307: Cannot find module 'lodash'.

lodash-es npm パッケージ: (パッケージ ルート フォルダーの lodash.js にデフォルトのエクスポートがあります)

import * as _ from 'lodash-es/lodash';

結果:

error TS2307: Cannot find module 'lodash-es'.   

gulp タスクと webstorm の両方で同じ問題が報告されます。

面白いことに、これはエラーを返しません:

import 'lodash-es/lodash';

...もちろん「_」はありません...

私のtsconfig.jsonファイル:

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules"
  ]
}

私のgulpfile.js:

var gulp = require('gulp'),
    ts = require('gulp-typescript'),
    uglify = require('gulp-uglify'),
    sourcemaps = require('gulp-sourcemaps'),
    tsPath = 'app/**/*.ts';

gulp.task('ts', function () {
    var tscConfig = require('./tsconfig.json');
    
    gulp.src([tsPath])
        .pipe(sourcemaps.init())
        .pipe(ts(tscConfig.compilerOptions))
        .pipe(sourcemaps.write('./../js'));
});

gulp.task('watch', function() {
    gulp.watch([tsPath], ['ts']);
});

gulp.task('default', ['ts', 'watch']);

私の理解が正しければ、tsconfig の moduleResolution:'node' は、lodash と lodash-es がインストールされている node_modules フォルダーへのインポート ステートメントを指すはずです。絶対パス、相対パスなど、さまざまなインポート方法を試しましたが、何も機能しないようです。何かアイデアはありますか?

必要であれば、問題を説明するための小さな zip ファイルを提供できます。

ベストアンサー1

Typescript 2.0 でこれを行う方法は次のとおりです: (tsd と types は非推奨となり、代わりに次の方法が採用されています):

$ npm install --save lodash

# This is the new bit here: 
$ npm install --save-dev @types/lodash

次に、.ts ファイルで次の操作を実行します。

どちらか:

import * as _ from "lodash";

または (@Naitik の提案)

import _ from "lodash";

違いが何なのかはよく分かりません。私たちは最初の構文を使用しており、それを好んでいます。しかし、最初の構文が機能しないという報告もあり、後者の構文は遅延ロードされた webpack モジュールと互換性がないというコメントもあります。YMMV です。

2017年2月27日の編集:

以下の @Koert によると、import * as _ from "lodash";Typescript 2.2.1、lodash 4.17.4、および @types/lodash 4.14.53 の時点ではこれが唯一機能する構文です。彼によると、他の推奨インポート構文では「デフォルトのエクスポートがありません」というエラーが発生します。

おすすめ記事