将 lodash 导入 angular2 typescript 应用程序

Question

我很难尝试导入 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’ 应该将导入语句指向 node_modules 文件夹，其中安装了 lodash 和 lodash-es。我还尝试了很多不同的导入方式：绝对路径、相对路径，但似乎没有任何效果。有任何想法吗？

如有必要，我可以提供一个小 zip 文件来说明问题。

原文由 Davy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

以下是从 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 的唯一有效语法。他说其他建议的导入语法给出了错误“没有默认导出”。

原文由 Taytay 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

npm install --save @types/lodash

https://www.npmjs.com/package/@types/lodash

原文由 Beyar 发布，翻译遵循 CC BY-SA 4.0 许可协议