TypeScript

This workshop is for JavaScript developers who want to learn TypeScript.

TypeScript adds static types to JavaScript, which reduces bugs and speeds up development with autocompletion.

Setup

1. Install NodeJS version 14+
2. Install Visual Studio Code
3. Install Git
4. OPTIONAL: Install Gramex or Log into the IDE

Exercise

In this exercise, you'll convert a JavaScript file into a TypeScript file and fix errors.

Clone the repo

1. Fork this repo into your namespace. Use git to clone your fork
2. Open index.html in your browser and try out the game. (It has a bugs. Don't fix them yet)

Fix the issues

1. Run npm install --save-dev typescript to install TypeScript
2. Rename script.js to script.ts (TypeScript)
3. Run npm test to see the problems
4. Fix errors and hints in script.ts using Visual Studio Code. Specifically:
   • Run npm install --save-dev @types/jquery to infer jQuery types
   • In Sprite, define el as a HTMLELement type
   • In Sprite, define x and y as number type
   • In Sprite.constructor(), specify or auto-infer the types of all parameters. selector must be a string.
   • In Sprite.constructor(), tell TypeScript that this.el is not null. (Understand why)
     • Adding ! after document.querySelector(selector) (non-null assertion operator)
     • Adding as HTMLElement after document.querySelector(selector) (type assertion)
     • Write custom code
   • In Sprite.draw(), fix the error with $("body").addclass(...)
   • In Sprite.sway(), fix the error with Math.random < 0.5
   • In Sprite.move(), specify or auto-infer the type of the direction parameter
   • In Sprite.move(), fix the error with direction !== "right" or direction === "left"
   • In document.querySelector("button.left") and document.querySelector("button.right") add event listeners only if they exist, using ?. optional chaining
5. Run npm test to ensure that the problems are fixed

Test the fixes

1. If you're using Gramex, change script.js to script.ts in index.html. Run Gramex and play the game
2. If you're NOT using Gramex, run tsc --strict script.ts. Open index.html in your browser and play the game

Submit

1. Commit and push the fixes to your fork. Check on Gitlab that CI/CD > Pipelines passes without errors
2. Create an issue titled Exercise submission. Add a link to your repo and submit the issue.

Verification

To mark a submission as correct:

1. Check if the build errors pass
2. Check if Sprite defines el: HTMLElement; x: number; y: number
3. Check for constructor(selector: string, x: number, y: number) signature
4. Check for addClass instead of addclass in draw()
5. Check for Math.random() instead of Math.random in sway()
6. Check that move() mentions "left" and "right"
7. Check for click events added to .left and .right that call .move("left") and .move("right")

Video