Peek Editing

[00:00:00]
>> Mike North: We're getting into some cool stuff now. So we're done with navigation, and selection, and things like that. Now we're diving into the refactoring. So when we're updating values, how might we do this? So let's look at Cart Store, and we've got a function here. Actually, I'm gonna look at a base class that's used in a bunch of places, listener support.

[00:00:25]
>> Mike North: So this is used in many places, if you search through the code, we could do that a couple of different ways. We could open up this search panel here, and this is exactly what you think it is.
>> Mike North: You type in a string or regular expression. And it'll show you all of the different occurrences where this is used.

[00:00:47]
So I'm referring to it in the mark down documents. Nice to have these icons here, by the way, so I can see that's a document. I mean, I should probably change it there, but it's not gonna break my tests. Here we've used the string unregister, here we've used it.

[00:01:03]
If we have a listener and search for that, it starts to get a little less useful because effectively here, we're just searching through code for the occurrence of a string. Thankfully, because we've got the TypeScript compiler working for us in the background and basically trying to understand the way our whole program is structured, if we were to select Register and say Find All References which is also I think Shift+F12, I still use the mouse for this one.

[00:01:36]
Something cool happens where our editor splits apart and we get this, they call it like a peak view, where you get to peak at other files. Now notice the line numbers I go like 13, 14, 15 and then I've got like 11, 12, 13. It turns out this is a scrollable like little mini editor inside the outer editor here.

[00:01:59]
And what we have on the right side is basically a little outline of places where this function is used. So this is not simply like searching for a currentism of a string. This is through something called type inference, which when we talk about type checking, we will define what this term means, but it basically understands that.

[00:02:25]
This is an instance of a particular object that we're dealing with and it's invoking this particular function. So it is much more closely tied to our types of objects. It's not just a plain text search. So if we were to just search for what's a good, fire, so fire's gonna be like, in a bunch of places within our code.

[00:02:48]
That text will be in a bunch of places. But if we find all references, like we're only gonna have a couple. This is the one that we're looking at right now. And here, this isn't a listener support object, and we're calling it Same here, ListenerSupport object. So here you're not getting all those false positives even for very simple names.

[00:03:09]
The cool thing here is we can start to get out of the habit as Java Script developers of having these super descriptive like almost global unique names for things. Especially if you're a functional programmer where you don't have like this. You don't have objects of particular types, you have collections of functions.

[00:03:30]
This can be really valuable in terms of recognizing that, hey this is an object that came out of this constructor, which was from this module here. And it can piece together the way your code is connected, in a way that goes way beyond just regular text search. So this is super, super cool, and the benefit of it being presented in this way means you're not taken out of context.

[00:03:56]
You're not removed from the file that you were looking at. You can kinda just check the stuff out and then you're done with it you have this little x, and it's like the fold is stitched back together. And you're back to your original editor there. I really love this.

[00:04:11]
And this is where, like once we started seeing this kind of feature added to VS code, you can't call it like just a text editor anymore. I mean it's light, it starts up quickly. You can just point it to any file and it'll try to handle it It doesn't need these big projects like a typical IDE would.

[00:04:31]
But this is not a feature that you would find In many ID, or in many light editors. Most light editors because they don't have this deeper analysis of your code happening in the background. They're not gonna even attempt to do this, and you'll be back in the world of finding the string in my code base and you'll get all of those false positives.

[00:04:52]
>> Mike North: So it opens up a split in the editor. We can peek at a type definition, I'll show you what that looks like. So lets see, push, so this is on an array and you can see like this again judging by this file name, I'll translate this for you, it is what typescript refers to as a library, right?

[00:05:17]
So you can say, I, this type script program needs type definitions for the dummy API and for ES5 JavaScript and for experimental decorator support and things like that. And you bring those in like as a you know, valid. Things to use within that particular context because you can write Type Script for the browser, or for NodeJS and you'd just say different set of libraries that we're working with.

[00:05:45]
But here this is the ES Five library, and DTS that just means it's a definition file for Type Script. And here push Takes in any number of items, and then it returns a number. Push returns something less useful than most people think but we can use the same way of sort of opening the code up and taking a look.

[00:06:11]
If we looked at this react component we have here you can look at the type definition there and we'll see something interesting. We've go two and it turns out that one of these is for writing react components with prototypes, writing react components without ES2015 classes, right? Without this class keyword, so that's this, sorry, that was that first one, I'll get us back, I'm going click happy this morning.

[00:06:47]
So this first one that's highlighted, I'm on 269, that's, that is sort of for. For like building react components as constructures with prototypes. And then down here we have another type definition for those that are using classes. So you can have more than one of these and this would let you kind of search through your code base for the appropriate one for that particular use case.

[00:07:14]
And it turns out like if you've never used TypeScript with React, TypeScript with React before which we'll go into in the TypeScript course, like we get to describe the structure of our props and our state as well, so it adds a lot of structure that helps keep you honest, keep you consistent about the way this thing should behave