Learn TypeScript w/ Mike North

Challenge 2: Typing jQuery

March 22, 2022

Table of Contents

What’s a jQuery?

Back in the age of inconsistent DOM APIs (I’m looking at you IE6) there arose a dominant solution that allowed us to do things very similar to document.querySelector and many other things.

The Challenge

We’re going to write our own version of part of this API surface, with types!.

Here are some slightly modified code snippets from the jQuery getting started page

const $: any = {}
* Get the <button> element with the class 'continue'
* and change its HTML to 'Next Step...'
$("button.continue").html("Next Step...")
* Show the #banner-message element that is hidden with visibility:"hidden" in
* its CSS when any button in #button-container is clicked.
const hiddenBox = $("#banner-message")
$("#button-container button").on("click", (event) => {
* Make an API call and fill a <div id="post-info">
* with the response data
url: "https://jsonplaceholder.typicode.com/posts/33",
success: (result) => {
"<strong>" + result.title + "</strong>" + result.body

You’re going to define something that emulates this kind of behavior.


First, if you haven’t done so already, clone the workshop project for this course

git clone https://github.com/mike-north/making-typescript-stick
cd making-typescript-stick

Make sure you have Volta installed. If you haven’t done so already, just run the following to install it

curl https://get.volta.sh | bash

Next, let’s install our dependencies


and finally, let’s navigate to the folder containing this specific challenge

cd challenges/jquery-clone

You can now run the test suite to see if you’ve defined an “equivalent” API surface. Your job is to modify the code in ./src/index.ts until all of the existing tests pass.


  • For the $.ajax function, make sure to take advantage of node-fetch
import { default as fetch } from "node-fetch"
  • Remember that we can stack a namespace on top of a function
function $() {}
namespace $ {
export function ajax() {}
export function html() {}
export default $

© 2022 All Rights Reserved