Typing jQuery Exercise

[00:00:00]
>> All right, next up, we're going to get out our editors or IDEs and we're gonna tackle another typing challenge, and we're going to invent jQuery. So for those of you who don't have context about what jQuery is, because it's sort of not a main focus of buzz in the web development community anymore.

[00:00:22]
This was a very important library that was built at a time where the DOM APIs and even things you could expect in the JavaScript runtime in a browser, they were fairly inconsistent. Even just the way that you would add an event listener to see if a button was clickediIn early versions of Internet Explorer, you would do that differently than in Chrome, or at least there would be certain paths that were buggy.

[00:00:46]
And jQuery, that was one of the first things that gave us a consistent thing to code against, consistent abstraction to build on top of, to build more interesting code that ran in the web, written in one way that works across a wide range of browsers. So we are going to write something that looks like the jQuery API, but uses the DOM API that we now have under the hood to do all of the stuff that things are intended to do.

[00:01:18]
So, what I've done here and slightly altered is the code snippets, I've taken the code snippets from jquery.com. This is sort of their very quick and dirty getting started thing, right? Where we grab a button and we set its label to next step, dot, dot, dot, and we can handle an event, right?

[00:01:41]
Like when a button is clicked, show a hidden box. And down here we have Ajax. This was super important at the time. Before that you had to do, what I would say are some unreasonable backflips to send asynchronous to make API calls, right, without fully reloading your page.

[00:02:02]
So three really Important use cases, we have slightly altered equivalents down here, I've just simplified them slightly. And your job is to make some code that allows a snippet like this to run. So it's in the same workshop project you have checked out. It's in that challenges folder, we're calling this jquery-clone.

[00:02:25]
And the entry point is within that folder, there's a source folder and index.ts, all of your work should be in that file. So, some hints. First, you're gonna want to use fetch, and please feel free to ping me or raise your hand if you don't know how to use fetch, but this is gonna be important in terms of making that Ajax thing work, $.ajax.

[00:02:54]
And then second, remember how declaration merging works. So, in this case, you may notice that jQuery is sometimes a function, right? This is a function invocation here, the function is just called $. And sometimes jQuery has these things hanging off it, like Ajax, and those are functions. So in order to get sort of like a function with extra things dangling off of it, in order to define the types for that, we can create a namespace and a function type.

[00:03:26]
And they sort of ride on top of each other through declaration merging, and we can export that one thing. So if you've ever wondered, why does this namespace thing exist? Why is declaration merging so important? A key thing about TypeScript is, we have to be able to write types that describe a whole variety of different kinds of JavaScript code like this, right?

[00:03:46]
There's still jQuery being written out in the world with types, we need an ability to describe that. So that's why if you've ever wondered, why would I stack things on top of each other like this? This is a perfectly valid use case a very, very popular library, even now.

[00:04:02]
So there are tests, you can run Yarn tests within that jquery-clone folder and you should see some feedback.