[解決済み】angular2 + typescriptアプリケーションにlodashをインポートする。

質問

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フォルダをimport文に指定するはずです。また、絶対パス、相対パスなど、様々な方法でインポートを試しましたが、うまくいきません。何かアイデアはありますか？

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

解決方法は？

以下は、Typescript 2.0 での方法です。 (tsd と typings は非推奨となり、以下のようになります)。

$ 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 の時点で、唯一動作する構文です。彼によると、他の import シンタックスの候補は "has no default export" というエラーを出すそうです。