External Libraries 9 exercises

Navigating Lodash's Type Definitions

In the next exercise we'll be working with Lodash, so let's take a look at how to navigate the library.

The main way to import from Lodash is by using the default import:

import _ from "lodash";

You can also import specific functions like this:

import groupBy fro

Loading explainer


0:00 In the next exercise, the one after this, we're going to be diving into the types of lodash. I want to give you some tools to help you navigate this library. Now, this is the main way that you import from lodash. You can also do things like lodash groupBy, or things like this, or grab individual functions from it. This one would grab groupBy. I'm pretty sure this works here. There we go.

0:26 The main way that you might import it is from this default import here. The best way to navigate this is if you go const, example, equals _.groupBy, for instance, you can then take a look at the exact functions that you're going to be using and watching for. We Command-click on this underscore itself, we're going to go straight into some pretty complicated .d.ts files.

0:56 We have various interfaces in here, like collection, truthy. Oh, my gosh, lots and lots of things inside here. In fact, a huge, huge file immediately. You can see here that we have lots and lots of files like this, too, -- string .d.ts. We have some interface lodash static. It's very easy to get lost in the weeds here.

1:18 My recommendation is to basically if you have a function that you're using, let's say, that you want to take this groupBy and use it in a different function, which is going to be the topic of the next exercise, what you can do is you can Command-click directly onto that spot there, directly onto that function. That's going to take you to the exact function declaration.

1:39 We can see here that groupBy is a function which takes in T, has collection list T and iterate T. We can start to piece together all of the areas there. Let's take a look at another one. For instance, add here. Add looks like augend, addend, and adds two numbers. Nice and simple. We've even got the JS.comments here to help us out.

2:03 This one, for instance, has no function overloads on it. It's nice and easy to read. Let's try another one. Let's go for, how about assign? It's a classic. This one has quite a few overloads here. You can see that we've got T, object, and T, source. We can start to piece together the API and also start to look at the implementation of a few of these functions.

2:28 You see here? I see. I see why it's doing these overloads. We've got a T, object, T, source 1, T, source 2, T, source 3, T, source 4. It's adding them as different call signatures here. Then pulling them all together in the end here. T, object, T, source 1, T, source 2, and T, source 3, whereas this one only has up to T, source 3. This one only has up to T, source 2.

2:52 You have different signatures for that. This should give you an idea of how to navigate a library like lodash with lots and lots of types on it. Really try and navigate only to the piece that you need and try to understand the nomenclature, the language of the types of things it's doing, and the types it expects and the things that it returns.

3:16 This is a great way to dive into a library to Command-click your way around to see what's useful. We're going to continue this in the next exercise.