The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Using Lodash in TypeScript with Typings and SystemJS

Using Lodash in TypeScript with Typings and SystemJS

3:38
One of the most confusing parts of getting started with TypeScript is figuring out how to use all the libraries that you know and love from JavaScript. This lesson walks you through including Lodash in your project, installing Lodash definition files, and then properly loading Lodash with SystemJS.
Watch this lesson now
Avatar
egghead.io

One of the most confusing parts of getting started with TypeScript is figuring out how to use all the libraries that you know and love from JavaScript. This lesson walks you through including Lodash in your project, installing Lodash definition files, and then properly loading Lodash with SystemJS.

Avatar
G

Interestingly, I did not get any duplicate identifier errors in the compiler after installing lodash via typings. I see from your typings directory that you have browser, main, browser.d.ts, and main.d.ts folders and files. When I installed, I simply got a modules folder and an index.d.ts file that includes a ref path to lodash's index.d.ts file.

I'm guessing this is due to an update to typings. I see that they have updated from version 1.0.5 all the way to 1.3.0 in just the last two weeks. Funny to think that this video series is less than two weeks old yet something referenced in the video is already not the same 😄

Avatar
Sequoia McDowell

Interesting!

Incidentally, why did you (John) remove the main version & keep the browser version? If you're importing it es-module style, shouldn't you include the npm version & leave out browser version?

In reply to G
Avatar
Saiful

Why do you map the lodash to cdn when it's already installed into npmmodules? Isn't it supposed to be mapped to some files within npmmodules/lodash?

Avatar
John

Yes, but I wanted to clearly mark the difference between installing definition files and mapping to source files. By mapping to a cdn, I was able to show how SystemJS would make the request to load the file even if it's a remote file.

How your production mapping looks (whether to your local node_modules then doing a build/bundle or through using other CDN resources) is a decision left to you.

In reply to Saiful
Avatar
John

I'm actually going to revisit this lesson and concept when TypeScript 2.0 final is released.

Couple notes:
Typings directories have changed: https://github.com/typings/typings/blob/master/docs/faq.md#where-do-the-type-definitions-install

But also, TypeScript is going to allow you to install definition files from npm. Hopefully this will remove all the confusion:
https://blogs.msdn.microsoft.com/typescript/2016/06/15/the-future-of-declaration-files/

In reply to Sequoia McDowell
Avatar
Yonatan

I'm getting a "Cannot find module 'lodash'" error when compiling.
It is coming from the line:
import * as _ from 'lodash';
Any idea why?

Avatar
Bryan

Funny, I'm getting the same issue. TypeScript is compiling fine, but SystemJS is complaining about finding lodash.

In reply to Yonatan
Avatar
Bryan

I realized that my syntax was off in the config for SystemJS. I had 'map' under 'packages', when it is supposed to be a sibling of 'packages' in the config. Not sure if you did the same thing or similar, but maybe that will help you.

In reply to Yonatan
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?