Using Lodash in TypeScript with Typings and SystemJS

John Lindquist
InstructorJohn Lindquist

Share this video with your friends

Send Tweet
Published 6 years ago
Updated 4 years ago

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.

[00:00] One of the first things many developers would try and do is grab a library like lodash to use in their projects. To get the type information from lodash, we're going to use a tool called Typings, so npm install -g typings. Once that's done, I'll say typings install lodash. and then, --save to save that, My Project.

[00:21] What that did is it created a typings.json of where it got that file from, the lodash typings, and then a typings directory that it downloaded typings into, and typings just being the index.d.ts. A d.ts is a definition file. If you scroll down in here, there's going to be a lot of stuff. You'll start finding different interfaces that represent lodash itself.

[00:46] The first thing you'll notice is that we get duplicate identifier errors in the TypeScript compiler. That's because in our tsconfig, we said only exclude node modules. What's happening is it's loading both the browser version and the main version of my typings files. I want to exclude the typings/main, the definition file, and typings/main, the folder.

[01:15] When I do that, in here, I'm going to force rerun the TypeScript compiler. You'll see that now all of the errors have gone away. Back in my main.ts file, I can import lodash. From lodash, instead of using this destructuring syntax, I'm going to say grab everything from lodash and name it Underscore.

[01:38] When you grab everything and then name it Underscore, it's like referencing lodash itself by an underscore. I'm going to do a basic check with lodash now. I'll say console.log underscore .is array. It's one of the methods from lodash. I'll say new app get users. That should return an array of persons, so .is array should be true.

[02:07] When I save here and I refresh in the browser, the error I'm going to get is that it can't find lodash. It's trying to load lodash from port 8080 on my local host because of the way that my SystemJS loader is set up.

[02:23] Remember there is that distinction and that difference between TypeScript and what it's compiling down into, and whatever module loader you're using. In my case, I'm using SystemJS. You can use others because in the dist, when you look at main, all it's doing is same require lodash.

[02:40] It's up to you to define what that means. For SystemJS, and this is just in a dev build, we'll set up a production build later. I'm going to say map. This is going to allow me to map lodash to where it can grab lodash from.

[02:57] I'm going to hop over npmcdn again. Npmcdn/lodash will give you the version number. I'll reload that, just copy and paste that. I'm going to map lodash itself to the npmcdn version of lodash. When I hit Save and I refresh now, you'll see we'll get true.

[03:22] When I check the Network tab, you'll see that it loaded lodash. When it made that request in main from that require, SystemJS went out and grabbed lodash. When it did this .is array check, it had lodash loaded already.

G Inc.
G Inc.
~ 6 years ago

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 😄

Sequoia McDowell
Sequoia McDowell
~ 6 years ago

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?

Saiful
Saiful
~ 6 years ago

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

John Lindquist
John Lindquistinstructor
~ 6 years ago

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.

John Lindquist
John Lindquistinstructor
~ 6 years ago

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/

Omer Koren
Omer Koren
~ 6 years ago

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

Bryan
Bryan
~ 6 years ago

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

Bryan
Bryan
~ 6 years ago

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.

technokon
technokon
~ 6 years ago

instead of using typings

npm install --save @types/lodash

http://stackoverflow.com/questions/34660265/importing-lodash-into-angular2-typescript-application/35820239

Sports Whispers
Sports Whispers
~ 5 years ago

So we have installed lodash locally and are now loading it from CDN... makes sense. :/

Yury
Yury
~ 5 years ago

Yeah. Typings package is deprecated! You should use

yarn add @types/{needed_package_name}!

Daniel Ram
Daniel Ram
~ 4 years ago

so much overhead....

Nazanin Delam
Nazanin Delam
~ 4 years ago

It is not recommended to use non-primitive box-objects such as "String" as type. We should use "string". https://www.typescriptlang.org/docs/handbook/declaration-files/do-s-and-don-ts.html

Daniel Ram
Daniel Ram
~ 4 years ago

After deploying a typescript project to the web, the TSC compiler can hang on instances with low ram or CPU, do not use a t2.micro even for a demo project. Second, the error in the logs are totally cryptic after compilation. I recommend using something like Flow instead of typescript, so you can use types when you need and decide to compile your code into a readable form for 1st release.. It is hard to track bugs when the compilation is cryptic.

Andrew Davis
Andrew Davis
~ 4 years ago

I can't compile it if lodash is not installed. Got this message from tsc compiler

src/main.ts:3:20 - error TS2307: Cannot find module 'lodash'.