Lodash modüllerini ithal etmeye çalışırken zorlanıyorum. Projemi npm + gulp kullanarak kurdum ve aynı duvara çarpmaya devam ediyorum. Ben düzenli lodash denedim, ama aynı zamanda lodash-es.

Lodash npm paketi: (paket kök klasöründe bir index.js dosyası var)

import * as _ from 'lodash';    

Sonuçlar:

error TS2307: Cannot find module 'lodash'.

Lodash-es npm paketi: (paket kök klasöründe lodash.js'de varsayılan bir dışa aktarma var)

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

Sonuçlar:

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

Hem yemin görevi hem de webstorm aynı sorunu bildiriyor.

Komik gerçek, bu hiçbir hata döndürmez:

import 'lodash-es/lodash';

... ama elbette "_" yok ...

Tsconfig.json dosyam:

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

Gulpfile.js dosyam:

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

Doğru anlarsam, tsconfig dosyamdaki moduleResolution: 'node', import deyimlerini, lodash ve lodash-es'in yüklü olduğu node_modules klasörüne yönlendirmelidir. Ayrıca ithal etmek için birçok farklı yol denedim: mutlak yollar, göreli yollar, ancak hiçbir şey işe yaramaz gibi görünüyor. Herhangi bir fikir?

Gerekirse sorunu göstermek için küçük bir zip dosyası sağlayabilirim.

Bunu Typcript 2.0'dan itibaren nasıl yapacağınız aşağıda açıklanmıştır: (tsd ve tiplendirmeler aşağıdakiler lehine kullanımdan kaldırılmıştır):

$ npm install --save lodash

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

Ardından, .ts dosyanızda:

Ya:

import * as _ from "lodash";

Veya (@Naitik tarafından önerildiği gibi):

import _ from "lodash";

Farkın ne olduğu konusunda olumlu değilim. İlk sözdizimini kullanır ve tercih ederiz. Bununla birlikte, bazıları ilk sözdiziminin kendileri için çalışmadığını ve bir başkası ikinci sözdiziminin tembel yüklü webpack modülleriyle uyumlu olmadığını yorumladı. YMMV.

27 Şubat 2017'de düzenle:

Aşağıdaki import * as _ from "lodash";@Koert'e göre, Typcript 2.2.1, lodash 4.17.4 ve @ types / lodash 4.14.53 gibi tek çalışma sözdizimidir. Önerilen diğer içe aktarma sözdiziminin "varsayılan dışa aktarma yok" hatasını verdiğini söylüyor.

26 Eylül 2016 Güncellemesi:

@ Taytay'ın cevabının dediği gibi, birkaç ay önce kullandığımız 'yazı' kurulumları yerine artık şunları kullanabiliriz:

npm install --save @types/lodash

İşte bu yanıtı destekleyen bazı ek referanslar:

• https://www.npmjs.com/package/@types/lodash
• NPM @types org paketlerindeki TypeScript yazmaları

Hala yazı tipi kurulumunu kullanıyorsanız, '' '--ambient' '' ve '' '--global' '' ile ilgili aşağıdaki yorumlara (başkaları tarafından) bakın.

Ayrıca, yeni Hızlı Başlangıç'ta, yapılandırma artık index.html dosyasında değildir; şimdi systemjs.config.ts dosyasında (SystemJS kullanılıyorsa).

Orijinal Yanıt:

Bu benim mac üzerinde çalıştı ( Hızlı Başlangıç göre Angular 2 yükledikten sonra ):

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

Etkilenen çeşitli dosyaları bulacaksınız, örn.

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

Açısal 2 Quickstart, System.js kullanır, bu nedenle index.html dosyasındaki yapılandırmaya aşağıdaki şekilde 'map' ekledim:

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

Sonra benim .ts kodunda yapabildim:

import _ from 'lodash';

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

2016 ortasından itibaren yapılan düzenlemeler:

@Tibbus'un bahsettiği gibi, bazı bağlamlarda ihtiyacınız olan:

import * as _ from 'lodash';

Angular2-seed'den başlıyorsanız ve her defasında içe aktarmak istemiyorsanız, haritayı atlayabilir ve adımları içe aktarabilir ve tools / config / project.config.ts içindeki lodash satırını açabilirsiniz.

Testlerimin lodash ile çalışmasını sağlamak için karma.conf.js dosya dizisine de bir satır eklemek zorunda kaldım:

'node_modules/lodash/lodash.js',

Her şey sırayla

npm install --save lodash

npm install -D @types/lodash

Lodash kütüphanesinin tamamını yükle

//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)

VEYA sadece birlikte çalışacağımız fonksiyonları yükle

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

UPDATE - March 2017

Şu anda birlikte çalışıyorum ES6 modulesve son zamanlarda lodashböyle çalışabildim :

// 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)
...

VEYA importspesifik lodash functionality:

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

NOT - fark * as,syntax

Referanslar:

İyi şanslar.

Adım 1: Bağımlılıklara lodash eklemek için package.json dosyasını değiştirin.

  "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"  }

Adım 2: Angular2 uygulamamda SystemJs modül yükleyicisini kullanıyorum. Bu yüzden lodash'ı eşleştirmek için systemjs.config.js dosyasını değiştiriyorum.

(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);

Adım 3: Şimdi npm kurulumu yapın

Adım 4: Dosyanızda lodash kullanmak için.

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

Typcript 2.0'dan beri, yazımları almak için @types npm modülleri kullanılır.

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

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

Şimdi bu soru cevaplandığından beri, lodash'ı nasıl verimli bir şekilde içe aktaracağım

Tüm kütüphaneyi içe aktarmanın güvenli yolu (main.ts dosyasında)

import 'lodash';

Buradaki yeni kısım:

İstediğiniz işlevlerle daha hafif bir lodash uygulama

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

kaynak: https://medium.com/making-internets/why-using-chain-is-a-mistake-9bc1f80d51ba#.kg6azugbd

Not: Yukarıdaki makale, yapım süresini iyileştirme ve uygulama boyutunu azaltma üzerine ilginç bir okuma

Projemdeki aşağıdaki komutları başarıyla başarıyla içeri aktardım:

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

Sonra aşağıdaki şekilde ithal:

import * as _ from 'lodash';

ve systemjs.config.js'de bunu tanımladım:

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

Aynı problemi yaşadım, ancak bir Angular2 uygulamasında ve bu makale sadece çözdüm: https://medium.com/@s_eschweiler/using-external-libraries-with-angular-2-87e06db8e5d1#.p6gra5eli

Makalenin özeti:

1. Kütüphaneyi Yükleme npm install lodash --save
2. Lodash için TypeScript Tanımları Ekleme tsd install underscore
3. Komut Dosyası Dahil <script src="node_modules/lodash/index.js"></script>
4. SystemJS'yi Yapılandırma System.config({ paths: { lodash: './node_modules/lodash/index.js'
5. İçe Aktarma Modülü import * as _ from ‘lodash’;

Umarım davanız için yararlı olabilir

Başka bir zarif çözüm, tüm ihtiyacınız olanı almak değil, sadece ihtiyacınız olanı elde etmektir.

import {forEach,merge} from "lodash";

ve kodunuzda kullanın

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

Başka biri bu sorunla karşılaşırsa ve "Yinelenen tanımlayıcı" sorunları nedeniyle yukarıdaki çözümlerin hiçbiri çalışmazsa, şunu çalıştırın:

npm install typings --global

Yazıların eski sürümleri ile işler bozulur ve bir sürü "Yinelenen tanımlayıcı" sorunları alırsınız. Ayrıca --ambientsöyleyebildiğim kadarıyla artık kullanmanıza gerek yok.

Bu yüzden yazımlar güncel olduğunda, bu işe yaramalıdır (Açısal 2 hızlı başlatmayı kullanarak).

Çalıştırmak:

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

İlk olarak bunu systemjs.config.js dosyasına ekleyin:

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

Şimdi bunu herhangi bir dosyada kullanabilirsiniz: import * as _ from 'lodash';

Yazım klasörünüzü silin ve npm installhala sorun yaşıyorsanız çalıştırın .

npm install --saveUygulamanızın üretim kodunda ne tür bir bağımlılık gerektirdiğini lütfen unutmayın .
"Tipler" ile ilgili olarak, yalnızca sonunda JavaScript'e aktarılan TypeScript için gereklidir. Bu nedenle, muhtemelen üretim kodunda olmasını istemezsiniz. Bunu projenizin devDependenciesyerine,

npm install --save-dev @types/lodash

veya

npm install -D @types/lodash

(örneğin Akash direğine bakınız). Bu arada, ng2 tuto'da bu şekilde yapılır.

Alternatif olarak, package.json şöyle görünebilir:

{
    "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"
    }
}

Sadece bir ipucu

Bununla ilgili güzel bir şey npm, basitçe bir ile başlayabilmeniz npm install --saveveya --save-devaradığınız bağımlılığın en son sürümü hakkında emin değilseniz package.jsonve daha fazla kullanım için otomatik olarak ayarlayabilmenizdir .

Ben de yazımları oluşturmuştum lodash-es, böylece şimdi aşağıdakileri yapabilirsiniz

Yüklemek

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

kullanım

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

toplaması kullanırsanız, lodashdüzgün bir şekilde ağaç sarsılacağı için bunun yerine kullanmanızı öneririm .

Lodash'tan kısmi içe aktarma, aşağıdaki gösterimi kullanarak açısal 4.1.x'de çalışmalıdır :

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

Veya 'lodash-es' kullanın ve modülde içe aktarın:

import { assign } from 'lodash-es';

Yoluyla yükleyin npm.

$ npm install lodash --save

Şimdi, importdosyada:

$ import * as _ from 'lodash';

ENV:

Açısal CLI: 1.6.6
Düğüm: 6.11.2
İşletim Sistemi: darwin x64
Açısal: 5.2.2 yazı tipi:
2.4.2
web paketi: 3.10.0

1. Lodash'ı yükle

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

2. İndex.html'de, lodash için harita ekleyin:

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

3. .Ts kodunda içe aktarma modülünde

import _ from 'lodash';

Sistem JS değil, webpack ile ng2 kullanıyorum. Adımların bana ihtiyacı vardı:

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

ve sonra dosyaya alt çizgi aktarmak istiyorum:

import * as _ from 'underscore';

Türleri typingsve tsdkomutlarını yönetmek , npm yoluyla kullanılması lehine nihayetinde kullanımdan kaldırılmıştır npm install @types/lodash.

Ancak, uzun süre ithalat beyanında "modül lodash bulunamıyor" ile mücadele etti:

import * as _ from 'lodash';

Nihayetinde, Typcript'in yalnızca node_modules / @ types başlangıç ​​sürümü 2'den türleri yükleyeceğini fark ettim ve VsCode Dil hizmetim hala 1.8 kullanıyordu, bu nedenle editör hataları bildiriyordu.

VSCode kullanıyorsanız şunları eklemek isteyeceksiniz:

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

VSCode settings.json dosyanızda (çalışma alanı ayarları için) ve daktilo sürümü> = 2.0.0 npm install typescript@2.0.2 --save-dev

Bundan sonra editörüm ithalat beyanından şikayetçi olmaz.

eğer sonra çalışmazsa

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

bunu dene ve lodash'ı içe aktar

typings install lodash --save

npm install --save @types/lodash

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

Tüm terminali takın:

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

İndex.html dosyasına yol ekleyin

<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>

Lots dosyasını .ts dosyasının en üstüne aktar

import * as _ from 'lodash'

Ben önyükleme / açısal-webpack kullanarak Angular 4.0.0 üzerinde ve biraz farklı bir yol gitmek zorunda kaldı.

@Taytay tarafından sağlanan çözüm çoğunlukla benim için çalıştı:

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

ve işlevleri aşağıdakileri kullanarak belirli bir .component.ts dosyasına aktarma :

import * as _ from "lodash";

Bu, "varsayılan" dışa aktarılan bir sınıf olmadığı için çalışır. Benimki arasındaki fark, 3. taraf kitaplıklarına yüklenmek için sağlanan yolu bulmam gerekti :

src/vendor.ts

Benim vendor.ts şimdi böyle görünüyor dosyası:

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, ...

Belki çok garip, ama yukarıdakilerin hiçbiri, her şeyden önce bana yardımcı olmadı, çünkü lodash'ı düzgün bir şekilde kurdum (ayrıca yukarıdaki önerilerle yeniden kuruldu).

Uzun öykü kısa meselesi, lodash'ın_.has yöntemini kullanarak bağlandı .

Sadece JS inoperatörünü kullanarak düzelttim .

dene >> tsd install lodash --save

Ayrıca devam edebilir ve eski gereksinimlerle içe aktarabilirsiniz, örneğin:

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

Bizim için işe yarayan tek şey bu. Elbette, içe aktarma işleminden sonra tüm requir () çağrılarının geldiğinden emin olun.