Мені важко намагатися імпортувати модулі lodash. Я налаштував свій проект, використовуючи npm + gulp, і продовжую вдарятись про ту саму стіну. Я пробував звичайний лодаш, але також лодаш-ес.

Пакет lodash npm: (має файл index.js у кореневій папці пакета)

import * as _ from 'lodash';    

Призводить до:

error TS2307: Cannot find module 'lodash'.

Пакет lodash-es npm: (експортується дефолт у lodash.js i кореневій папці пакета)

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

Призводить до:

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

І завдання глотком, і веб-шторм повідомляють про одну проблему.

Кумедний факт, це не повертає помилок:

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']);

Якщо я правильно розумію, moduleResolution: 'node' у моєму tsconfig повинен вказати на імпорт операторів імпорту до папки node_modules, де встановлені lodash та lodash-es. Я також спробував безліч різних способів імпорту: абсолютні шляхи, відносні шляхи, але, здається, нічого не працює. Будь-які ідеї?

Якщо потрібно, я можу надати невеликий zip-файл для ілюстрації проблеми.

Ось як це зробити з Typescript 2.0: (tsd та типізації застаріли на користь наступного):

$ 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";

Я не впевнений, в чому різниця. Ми використовуємо і надаємо перевагу першому синтаксису. Однак деякі повідомляють, що перший синтаксис не працює для них, а хтось ще прокоментував, що останній синтаксис є несумісним із ледачим завантаженим модулем веб-пакету. YMMV.

Редагувати 27 лютого 2017 року:

Відповідно до @Koert нижче, import * as _ from "lodash";це єдиний робочий синтаксис типу Typescript 2.2.1, lodash 4.17.4 та @ types / lodash 4.14.53. Він каже, що інший запропонований синтаксис імпорту дає помилку "не має експорту за замовчуванням".

Оновлення 26 вересня 2016 року:

Як говориться у відповіді @ Taytay, замість "типізаційних" установок, які ми використовували кілька місяців тому, ми можемо використовувати:

npm install --save @types/lodash

Ось кілька додаткових посилань, що підтверджують цю відповідь:

• https://www.npmjs.com/package/@types/lodash
• Типізація TypeScript в пакетах NPM @types org

Якщо ви все ще використовуєте установку типізації, дивіться коментарі нижче (від інших) щодо "" - - навколишнього середовища "" "та" "" - "глобального" "".

Крім того, у новому швидкому старті конфігурація більше не знаходиться в index.html; тепер це в systemjs.config.ts (якщо використовується SystemJS).

Оригінальний відповідь:

Це працювало на моєму комп'ютері (після встановлення Angular 2 відповідно до швидкого запуску ):

sudo npm install typings --global
npm install lodash --save 
typings install lodash --ambient --save

Ви знайдете різні файли, на які впливає, наприклад

• /typings/main.d.ts
• /typings.json
• /package.json

Angular 2 Quickstart використовує System.js, тому я додав 'map' до конфігурації в index.html наступним чином:

System.config({
    packages: {
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    },
    map: {
      lodash: 'node_modules/lodash/lodash.js'
    }
  });

Тоді в моєму .ts-коді я зміг зробити:

import _ from 'lodash';

console.log('lodash version:', _.VERSION);

Зміни з середини 2016 року:

Як згадує @tibbus, у деяких контекстах вам потрібно:

import * as _ from 'lodash';

Якщо ви починаєте з angular2-seed , і якщо ви не хочете імпортувати кожен раз, ви можете пропустити карту та кроки імпорту та просто відмітити рядок lodash в інструментах / config / project.config.ts.

Для того, щоб мої тести працювали з lodash, мені також довелося додати рядок до масиву файлів у karma.conf.js:

'node_modules/lodash/lodash.js',

Насамперед

npm install --save lodash

npm install -D @types/lodash

Завантажте повну бібліотеку лодашів

//some_module_file.ts
// Load the full library...
import * as _ from 'lodash' 
// work with whatever lodash functions we want
_.debounce(...) // this is typesafe (as expected)

АБО завантажуйте лише функції, з якими ми будемо працювати

import * as debounce from 'lodash/debounce'
//work with the debounce function directly
debounce(...)   // this too is typesafe (as expected)

UPDATE - March 2017

Зараз я працюю ES6 modules, і нещодавно мені вдалося так працювати lodash:

// the-module.js (IT SHOULD WORK WITH TYPESCRIPT - .ts AS WELL) 
// Load the full library...
import _ from 'lodash' 
// work with whatever lodash functions we want
_.debounce(...) // this is typesafe (as expected)
...

АБО importконкретно lodash functionality:

import debounce from 'lodash/debounce'
//work with the debounce function directly
debounce(...)   // this too is typesafe (as expected)
...

ПРИМІТКА - різниця * asне потрібна вsyntax

Список літератури:

Щасти.

Крок 1: Змініть файл package.json, щоб він включав подачу в залежності.

  "dependencies": {
"@angular/common":  "2.0.0-rc.1",
"@angular/compiler":  "2.0.0-rc.1",
"@angular/core":  "2.0.0-rc.1",
"@angular/http":  "2.0.0-rc.1",
"@angular/platform-browser":  "2.0.0-rc.1",
"@angular/platform-browser-dynamic":  "2.0.0-rc.1",
"@angular/router":  "2.0.0-rc.1",
"@angular/router-deprecated":  "2.0.0-rc.1",
"@angular/upgrade":  "2.0.0-rc.1",
"systemjs": "0.19.27",
"es6-shim": "^0.35.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12",
"lodash":"^4.12.0",
"angular2-in-memory-web-api": "0.0.7",
"bootstrap": "^3.3.6"  }

Крок 2: Я використовую завантажувач модулів SystemJs у своїй програмі angular2. Тож я б модифікував файл systemjs.config.js для відображення lodash.

(function(global) {

// map tells the System loader where to look for things
var map = {
    'app':                        'app', // 'dist',
    'rxjs':                       'node_modules/rxjs',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    '@angular':                   'node_modules/@angular',
    'lodash':                    'node_modules/lodash'
};

// packages tells the System loader how to load when no filename and/or no extension
var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' },
    'lodash':                    {main:'index.js', defaultExtension:'js'}
};

var packageNames = [
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    '@angular/router-deprecated',
    '@angular/testing',
    '@angular/upgrade',
];

// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function(pkgName) {
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});

var config = {
    map: map,
    packages: packages
}

// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }

System.config(config);})(this);

Крок 3: Тепер встановіть npm

Крок 4: Використання lodash у вашому файлі.

import * as _ from 'lodash';
let firstIndexOfElement=_.findIndex(array,criteria);

Оскільки Typescript 2.0, модулі @types npm використовуються для імпорту типізації.

# Implementation package (required to run)
$ npm install --save lodash

# Typescript Description
$ npm install --save @types/lodash 

Тепер, як відповіли на це запитання, я розберемося, як ефективно імпортувати квартири

Безпечний спосіб імпорту всієї бібліотеки (в main.ts)

import 'lodash';

Це новий біт тут:

Реалізація легшого лодашу з необхідними функціями

import chain from "lodash/chain";
import value from "lodash/value";
import map from "lodash/map";
import mixin from "lodash/mixin";
import _ from "lodash/wrapperLodash";

джерело: https://medium.com/making-internets/why-using-chain-is-a-mistake-9bc1f80d51ba#.kg6azugbd

PS: Наведена стаття є цікавим прочитанням про покращення часу збірки та зменшення розміру додатків

Я успішно імпортував лодаш у свій проект із такими командами:

npm install lodash --save
typings install lodash --save

Потім я імпортував його наступним чином:

import * as _ from 'lodash';

і в systemjs.config.js я визначив це:

map: { 'lodash' : 'node_modules/lodash/lodash.js' }

У мене була точно така ж проблема, але в додатку Angular2, і ця стаття просто вирішує її: https://medium.com/@s_eschweiler/using-external-libraries-with-angular-2-87e06db8e5d1#.p6gra5eli

Короткий зміст статті:

1. Встановлення бібліотеки npm install lodash --save
2. Додайте визначення TypeScript для Lodash tsd install underscore
3. У тому числі сценарій <script src="node_modules/lodash/index.js"></script>
4. Налаштування SystemJS System.config({ paths: { lodash: './node_modules/lodash/index.js'
5. Імпорт модуля import * as _ from ‘lodash’;

Я сподіваюся, що це може бути корисним і для вашої справи

Ще одне елегантне рішення - отримати лише те, що потрібно, а не імпортувати весь лодаш

import {forEach,merge} from "lodash";

а потім використовувати його у своєму коді

forEach({'a':2,'b':3}, (v,k) => {
   console.log(k);
})

Якщо хтось інший стикається з цією проблемою, і жодне з перерахованих вище рішень не працює через проблеми "Копіювання ідентифікатора", запустіть це:

npm install typings --global

У старих версіях типізацій все зіпсується, і ви отримаєте купу проблем "Копіювання ідентифікатора". Крім того, вам більше не потрібно використовувати --ambient, наскільки я міг сказати.

Тож як тільки типізація буде оновлена, це має спрацювати (використовуючи швидкий старт Angular 2).

Виконати:

npm install lodash --save 
typings install lodash --save

Спочатку додайте це до systemjs.config.js:

'lodash':                     'node_modules/lodash/lodash.js'

Тепер ви можете використовувати це в будь-якому файлі: import * as _ from 'lodash';

Видаліть папку для типізації та запустіть, npm installякщо у вас все ще виникають проблеми.

Зверніть увагу, що npm install --saveце сприятиме незалежності, яку вимагає ваша програма у виробничому коді.
Що стосується "типізації", то він вимагає лише TypeScript, який з часом транслюється в JavaScript. Тому ви, мабуть, не хочете мати їх у виробничому коді. Я пропоную помістити його у проект, devDependenciesзамість цього, використовуючи

npm install --save-dev @types/lodash

або

npm install -D @types/lodash

(див., наприклад, посаду Акаша). До речі, це так, як це робиться в ng2 tuto.

Окрім того, ось як може виглядати ваш package.json:

{
    "name": "my-project-name",
    "version": "my-project-version",
    "scripts": {whatever scripts you need: start, lite, ...},
    // here comes the interesting part
    "dependencies": {
       "lodash": "^4.17.2"
    }
    "devDependencies": {
        "@types/lodash": "^4.14.40"
    }
}

просто порада

Приємно в тому npm, що ви можете почати з просто зробити npm install --saveабо --save-devякщо ви не впевнені в останній доступній версії залежності, яку ви шукаєте, і вона автоматично встановить її вам package.jsonдля подальшого використання.

Я також створив типізацію lodash-es, тому тепер ви можете зробити наступне

встановити

npm install lodash-es -S
npm install @types/lodash-es -D

використання

import kebabCase from "lodash-es/kebabCase";
const wings = kebabCase("chickenWings");

якщо ви використовуєте сукупність, я пропоную використовувати це замість того, що lodashце буде правильно зруйновано.

Частковий імпорт з lodash повинен працювати у куті 4.1.x, використовуючи такі позначення:

let assign = require('lodash/assign');

Або використовуйте "lodash-es" та імпортуйте в модуль:

import { assign } from 'lodash-es';

Встановити через npm.

$ npm install lodash --save

Тепер importу файлі:

$ import * as _ from 'lodash';

ENV:

Кутовий CLI: 1.6.6
Вузол: 6.11.2
ОС: darwin x64
Кутовий:
машинопис версії 5.2.2: веб-пакет 2.4.2
: 3.10.0

1. Встановіть lodash

sudo npm install typings --global npm install lodash --save typings install lodash --ambient --save

2. У index.html додайте карту для lodash:

System.config({ packages: { app: { format: 'register', defaultExtension: 'js' } }, map: { lodash: 'node_modules/lodash/index.js' } });

3. В модуль імпортування коду .ts код

import _ from 'lodash';

Я використовую ng2 з webpack, а не JS системи. Кроки, потрібні мені:

npm install underscore --save
typings install dt~underscore --global --save

а потім у файл я хочу імпортувати підкреслення на:

import * as _ from 'underscore';

Управління типами через typingsта tsdкоманди в кінцевому підсумку застаріло на користь використання npm via npm install @types/lodash.

Однак я довго боровся з "Неможливо знайти модуль lodash" у заяві про імпорт:

import * as _ from 'lodash';

Зрештою я зрозумів, що Typescript завантажуватиме лише типи з node_modules / @ type start версії 2, і моя служба мови VsCode все ще використовувала 1.8, тому редактор повідомляв про помилки.

Якщо ви використовуєте VSCode, ви хочете включити

"typescript.tsdk":  "node_modules/typescript/lib"

у файлі VSCode settings.json (для налаштувань робочої області) та переконайтеся, що у вас встановлена ​​версія typecript> = 2.0.0 через npm install typescript@2.0.2 --save-dev

Після цього мій редактор не скаржився на заяву про імпорт.

якщо після цього не працюватимуть

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

ви спробуйте це та імпортуєте lodash

typings install lodash --save

npm install --save @types/lodash

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

Встановіть через термінал:

npm install lodash --save
tsd install lodash --save

Додайте шляхи в index.html

<script>
    System.config({
        packages: {
            app: {
                format: 'register',
                defaultExtension: 'js'
            }
        },
        paths: {
            lodash: './node_modules/lodash/lodash.js'
        }
    });
    System.import('app/init').then(null, console.error.bind(console));
</script>

Імпортуйте подачу у верхній частині файлу .ts

import * as _ from 'lodash'

Я перебуваю на Angular 4.0.0 за допомогою перезавантаження / angular-webpack , і мені довелося пройти трохи інший маршрут.

Рішення, яке надав @Taytay, здебільшого працювало для мене:

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

та імпорт функцій у заданий файл .component.ts за допомогою:

import * as _ from "lodash";

Це працює, тому що експортованого класу "за замовчуванням" немає. Різниця в моєму мені знадобилася, щоб знайти спосіб, який було передбачено для завантаження в сторонні бібліотеки: vendor.ts, які сиділи на:

src/vendor.ts

Мій файл vendor.ts зараз виглядає так:

import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/http';
import '@angular/router';

import 'rxjs';
import 'lodash';

// Other vendors for example jQuery, Lodash or Bootstrap
// You can import js, ts, css, sass, ...

Можливо, це занадто дивно, але жодне з вищесказаного мені не допомогло, перш за все, тому що я правильно встановив лодаш (також перевстановлений через вищезазначені пропозиції).

Так короткий короткий розповідь, питання було пов'язане з використанням _.hasметоду від lodash .

Я виправив це за допомогою простого inоператора JS .

спробуйте >> tsd install lodash --save

Ви також можете продовжувати та імпортувати через старі добрі потреби, тобто:

const _get: any = require('lodash.get');

Це єдине, що працювало на нас. Звичайно, переконайтеся, що будь-які дзвінки на вимогу () надходять після імпорту.