Transcript from the "Typing jQuery Exercise" Lesson
>> 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: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: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.