Saya mengalami kesulitan mencoba untuk mendapatkan modul Lodash diimpor. Saya telah menyiapkan proyek saya menggunakan npm + tegukan, dan terus mengenai dinding yang sama. Saya sudah mencoba lodash biasa, tetapi juga lodash-es.

Paket lodash npm: (memiliki file index.js di folder root paket)

import * as _ from 'lodash';    

Hasil dalam:

error TS2307: Cannot find module 'lodash'.

Paket lodash-es npm: (memiliki ekspor defaut di lodash.js di folder root paket)

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

Hasil dalam:

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

Baik tugas tegap dan webstorm melaporkan masalah yang sama.

Fakta lucu, ini tidak menghasilkan kesalahan:

import 'lodash-es/lodash';

... tapi tentu saja tidak ada "_" ...

File tsconfig.json saya:

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

Gulpfile.js saya:

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

Jika saya mengerti dengan benar, moduleResolution: 'node' di tsconfig saya harus mengarahkan pernyataan impor ke folder node_modules, di mana lodash dan lodash-es diinstal. Saya juga mencoba banyak cara berbeda untuk mengimpor: jalur absolut, jalur relatif, tetapi tampaknya tidak ada yang berhasil. Ada ide?

Jika perlu saya dapat memberikan file zip kecil untuk menggambarkan masalah tersebut.

Berikut ini cara melakukannya pada Typecript 2.0: (tsd dan pengetikan tidak digunakan lagi sebagai berikut):

$ npm install --save lodash

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

Lalu, di file .ts Anda:

Antara:

import * as _ from "lodash";

Atau (seperti yang disarankan oleh @Naitik):

import _ from "lodash";

Saya tidak yakin apa bedanya. Kami menggunakan dan lebih memilih sintaks pertama. Namun, beberapa laporan mengatakan bahwa sintaks pertama tidak berfungsi untuk mereka, dan orang lain berkomentar bahwa sintaks yang terakhir tidak kompatibel dengan modul webpack yang dimuat dengan malas. YMMV.

Edit pada 27 Feb 2017:

Menurut @Koert di bawah ini, import * as _ from "lodash";adalah satu-satunya sintaks yang berfungsi pada Typescript 2.2.1, lodash 4.17.4, dan @ types / lodash 4.14.53. Dia mengatakan bahwa sintaks impor lain yang disarankan memberikan kesalahan "tidak memiliki ekspor default".

Pembaruan 26 September 2016:

Seperti jawaban @ Taytay mengatakan, alih-alih instalasi 'pengetikan' yang kami gunakan beberapa bulan lalu, kami sekarang dapat menggunakan:

npm install --save @types/lodash

Berikut adalah beberapa referensi tambahan yang mendukung jawaban itu:

• https://www.npmjs.com/package/@types/lodash
• Pengetikan TypeScript dalam paket org NPM @ tip

Jika masih menggunakan instalasi pengetikan, lihat komentar di bawah (oleh orang lain) tentang '' '--ambient' '' dan '' '--global' ''.

Juga, di Mulai Cepat baru, konfigurasi tidak lagi di index.html; sekarang di systemjs.config.ts (jika menggunakan SystemJS).

Jawaban asli:

Ini berfungsi pada mac saya (setelah menginstal Angular 2 sesuai Quick Start ):

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

Anda akan menemukan berbagai file yang terpengaruh, mis

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

Mulai 2 Quickstart menggunakan System.js, jadi saya menambahkan 'map' ke config in index.html sebagai berikut:

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

Kemudian dalam kode .ts saya, saya bisa melakukan:

import _ from 'lodash';

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

Suntingan dari pertengahan 2016:

Seperti @tibbus menyebutkan, dalam beberapa konteks, Anda perlu:

import * as _ from 'lodash';

Jika mulai dari angular2-seed , dan jika Anda tidak ingin mengimpor setiap waktu, Anda dapat melewati peta dan mengimpor langkah-langkah dan cukup batalkan komentar pada garis lodash di tools / config / project.config.ts.

Agar tes saya berfungsi dengan lodash, saya juga harus menambahkan baris ke array file di karma.conf.js:

'node_modules/lodash/lodash.js',

Hal pertama yang pertama

npm install --save lodash

npm install -D @types/lodash

Muat perpustakaan lodash lengkap

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

ATAU hanya memuat fungsi yang akan kami kerjakan

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

UPDATE - March 2017

Saya sedang bekerja dengan ES6 modules, dan baru-baru ini saya dapat bekerja dengan lodashseperti:

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

ATAU import spesifik lodash functionality:

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

CATATAN - perbedaannya * astidak diperlukan dalamsyntax

Referensi:

Semoga berhasil.

Langkah 1: Ubah file package.json untuk memasukkan lodash dalam dependensi.

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

Langkah 2: Saya menggunakan pemuat modul SystemJs di aplikasi angular2 saya. Jadi saya akan memodifikasi file systemjs.config.js untuk memetakan 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);

Langkah 3: Sekarang lakukan instalasi npm

Langkah 4: Untuk menggunakan lodash di file Anda.

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

Sejak Typescript 2.0, modul @types npm digunakan untuk mengimpor pengetikan.

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

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

Sekarang karena pertanyaan ini telah dijawab, saya akan membahas cara mengimpor lodash secara efisien

Cara yang gagal aman untuk mengimpor seluruh perpustakaan (di main.ts)

import 'lodash';

Ini adalah bit baru di sini:

Menerapkan lodash yang lebih ringan dengan fungsi yang Anda butuhkan

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

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

PS: Artikel di atas adalah bacaan yang menarik tentang meningkatkan waktu pembuatan dan mengurangi ukuran aplikasi

Saya berhasil mengimpor lodash di proyek saya dengan perintah berikut:

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

Lalu saya mengimpornya dengan cara berikut:

import * as _ from 'lodash';

dan di systemjs.config.js saya mendefinisikan ini:

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

Saya memiliki masalah yang persis sama, tetapi dalam aplikasi Angular2, dan artikel ini menyelesaikannya: https://medium.com/@s_eschweiler/using-external-libraries-with-angular-2-87e06db8e5d1#.p6gra5eli

Ringkasan artikel:

1. Menginstal Perpustakaan npm install lodash --save
2. Tambahkan Definisi TypeScript untuk Lodash tsd install underscore
3. Termasuk Script <script src="node_modules/lodash/index.js"></script>
4. Mengkonfigurasi SistemJS System.config({ paths: { lodash: './node_modules/lodash/index.js'
5. Modul Impor import * as _ from ‘lodash’;

Saya harap ini dapat bermanfaat untuk kasus Anda juga

Solusi elegan lainnya adalah hanya mendapatkan apa yang Anda butuhkan, bukan mengimpor semua lodash

import {forEach,merge} from "lodash";

dan kemudian menggunakannya dalam kode Anda

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

Jika ada orang lain yang mengalami masalah ini dan tidak ada solusi di atas yang berfungsi karena masalah "pengidentifikasi duplikat", jalankan ini:

npm install typings --global

Dengan pengetikan versi lama hal-hal menjadi kacau dan Anda akan mendapatkan banyak masalah "Pengidentifikasi duplikat". Anda juga tidak perlu menggunakan --ambientlagi sejauh yang saya tahu.

Jadi, begitu pengetikan sudah terbaru, ini akan berfungsi (menggunakan quickstart Angular 2).

Lari:

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

Pertama, tambahkan ini ke systemjs.config.js:

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

Sekarang Anda dapat menggunakan ini di file apa pun: import * as _ from 'lodash';

Hapus folder pengetikan Anda dan jalankan npm installjika Anda masih memiliki masalah.

Harap dicatat bahwa npm install --saveakan menumbuhkan ketergantungan apa pun yang dibutuhkan aplikasi Anda dalam kode produksi.
Sedangkan untuk "mengetik", itu hanya diperlukan oleh TypeScript, yang pada akhirnya diubah dalam JavaScript. Karena itu, Anda mungkin tidak ingin memilikinya dalam kode produksi. Saya sarankan untuk memasukkannya ke dalam proyek Anda devDependencies, dengan menggunakan

npm install --save-dev @types/lodash

atau

npm install -D @types/lodash

(lihat posting Akash misalnya). By the way, itu cara itu dilakukan di ng2 tuto.

Atau, berikut adalah tampilan package.json Anda:

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

hanya sebuah tip

Yang menyenangkan npmadalah bahwa Anda dapat memulai dengan hanya melakukan npm install --saveatau --save-devjika Anda tidak yakin tentang versi terbaru dari dependensi yang Anda cari, dan itu akan secara otomatis mengaturnya untuk Anda package.jsonuntuk digunakan lebih lanjut.

Saya telah membuat pengetikan lodash-esjuga, jadi sekarang Anda benar-benar dapat melakukan hal berikut

Install

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

pemakaian

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

jika Anda menggunakan rollup, saya sarankan menggunakan ini daripada lodashkarena itu akan diatur dengan benar.

Impor sebagian dari lodash harus bekerja dalam sudut 4.1.x menggunakan notasi berikut:

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

Atau gunakan 'lodash-es' dan impor dalam modul:

import { assign } from 'lodash-es';

Instal via npm.

$ npm install lodash --save

Sekarang, importdalam file:

$ import * as _ from 'lodash';

ENV:

CLI sudut: 1.6.6
simpul: 6.11.2
OS: darwin x64
sudut: 5.2.2
naskah: 2.4.2
webpack: 3.10.0

1. Instal lodash

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

2. Di index.html, tambahkan peta untuk lodash:

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

3. Dalam modul impor kode .ts impor

import _ from 'lodash';

Saya menggunakan ng2 dengan webpack, bukan sistem JS. Langkah-langkah yang perlu bagi saya adalah:

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

dan kemudian dalam file saya ingin mengimpor garis bawah ke:

import * as _ from 'underscore';

Mengelola tipe via typingsdan tsdperintah pada akhirnya tidak digunakan karena menggunakan npm via npm install @types/lodash.

Namun, saya kesulitan dengan "Tidak dapat menemukan modul lodash" dalam pernyataan impor untuk waktu yang lama:

import * as _ from 'lodash';

Pada akhirnya saya menyadari bahwa Filescript hanya akan memuat jenis dari node_modules / @ types mulai versi 2, dan layanan Bahasa VsCode saya masih menggunakan 1,8, jadi editor melaporkan kesalahan.

Jika Anda menggunakan VSCode, Anda ingin memasukkan

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

dalam file VSCode settings.json Anda (untuk pengaturan ruang kerja) dan pastikan Anda memiliki versi naskah>> 2.0.0 diinstal melalui npm install [email protected] --save-dev

Setelah itu editor saya tidak akan mengeluh tentang pernyataan impor.

jika dosen tidak bekerja setelah itu

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

Anda coba ini dan impor lodash

typings install lodash --save

npm install --save @types/lodash

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

Instal semua melalui terminal:

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

Tambahkan jalur di 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>

Impor lodash di bagian atas file .ts

import * as _ from 'lodash'

Saya menggunakan Angular 4.0.0 menggunakan preboot / angular-webpack , dan harus menempuh rute yang sedikit berbeda.

Solusi yang disediakan oleh @Taytay sebagian besar bekerja untuk saya:

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

dan mengimpor fungsi ke file .component.ts yang diberikan menggunakan:

import * as _ from "lodash";

Ini berfungsi karena tidak ada kelas ekspor "default". Perbedaan saya adalah saya perlu menemukan cara yang disediakan untuk memuat di perpustakaan pihak ke-3: vendor.ts yang terletak di:

src/vendor.ts

File vendor.ts saya terlihat seperti ini sekarang:

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

Mungkin ini terlalu aneh, tetapi tidak satu pun di atas yang membantu saya, pertama-tama, karena saya telah menginstal lodash dengan benar (juga menginstal ulang melalui saran di atas).

Singkat cerita masalah ini dihubungkan dengan menggunakan _.hasmetode dari lodash .

Saya memperbaikinya dengan hanya menggunakan inoperator JS .

coba >> tsd install lodash --save

Anda juga dapat melanjutkan dan mengimpor melalui persyaratan lama yang baik, yaitu:

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

Ini adalah satu-satunya hal yang berhasil bagi kami. Tentu saja, pastikan ada permintaan () panggilan datang setelah impor.