⇦ Back

WDX-180

Web Development X

Week 30 | TypeScript

Week 29 ⇦

Updated: 16/5/2025

⇨ Week 31

Week 30 - Day 1 | Strictly Typed JavaScript

Schedule

  • Watch the lectures
  • Study the suggested material
  • Practice on the topics and share your questions

Study Plan

Your instructor will share the video lectures with you. Here are the topics covered:

  • Part 1: Intro to TypeScript: High level overview
  • Part 2: Intro to TypeScript: Type Checking in JavaScript using JSDoc

You can find the lecture code here

Lecture Questions:

  • What options are available for contact forms?
    • (Especially ones that do not require a server and are free)
    • Netlify + Contact form
    • Just include your email (but make sure to obfuscate it to avoid spammers)
      • Google: how to protect my email +static web site
      • <a href=”notme@mail.com”>Contact me</a>
        • JS: dynamically create the correct email address and append it to the <a>
      • You can also open the visitors’ email client, containing your email address and a subject. Google for that…

References & Resources:

  • TypeScript
    • TS is JS + Types + Cool features
    • Official Website
    • TypeScript Error Codes
    • Enable TS check on plain JS
      • 1) // @ts-check (comment/directive at the top of the file)
      • 2) VSCode => Settings => Search for “implicitProjectConfig check js”
        • Setting Code ID: js/ts.implicitProjectConfig.checkJs
    • Disable TS check on next line: // @ts-ignore
    • Checking in 3 levels:
      • Enabling ts-check (semantic check) in JS
      • Enabling ts-check + use JSDoc
  • Emailjs: Send Email Directly From Your Code. Free, no-server, 200 emails per-month limit

Exercises

IMPORTANT: Make sure to complete all the tasks found in the daily Progress Sheet and update the sheet accordingly. Once you’ve updated the sheet, don’t forget to commit and push. The progress draft sheet for this day is: /user/week30/progress/progress.draft.w30.d01.csv

You should NEVER update the draft sheets directly, but rather work on a copy of them according to the instructions found here.

Week 30 - Day 2 | Exploring the Visibility API

Schedule

  • Study the suggested material
  • Practice on the topics and share your questions

Study Plan

Here’s some code to study and practice today.

  • Tasks:
    • Read and understand what the code does
    • Test the code (press the play button and switch to another Tab to see how the app behaves differently)
    • Does this remind you of chat applications (like Slack) that provide some notification when the chat Tab is out of focus?
    • Learn more about the Visibility Web API
    • Enforce ts-check and apply as many JSDoc types as you can
    • Improve the code and add comments
    • Share your version and questions!
    • Have fun and enjoy! :smiley:
  • Some amazing tips from Wes Bos for <textarea>’s. Completely mind-blowing CSS like ex units, lh units and more. Check it out!

Week 30 - Day 3 | TypeScript: A Language is born

Schedule

  • Watch the lectures
  • Study the suggested material
  • Practice on the topics and share your questions

Study Plan

Your instructor will share the video lectures with you. Here are the topics covered:

  • Part 1: How transpiled languages like TypeScript work. Building a mock language: SillyScript.
  • Part 2: TypeScript.

You can find the lecture code here and the diagrams here.

Lecture Notes & Questions:

  • How to transpile TypeScript
    • On-the-fly in-the-browser transpilation via Babel (ts-in-the-browser.html)
    • Install TypeScript compiler globally: npm install -g tsc
      • Search: for global tsc install
    • Install TypeScript compiler locally: npm install tsc (in a project folder)
    • Use another compiler (babel, SWC, etc.)
  • Use TS in a project (manual)
    • 1) initialize the project as an npm project (create a basic package.json)
    • 1.1) npm init (and follow the instructions)
    • 1.2) npm init -y (quickly run the command with the default options)
    • Ready to run npm install in your project
    • 2) npm install typescript
    • 3) Use npx tsc to compile: `npx tsc file.ts`
    • 3.1) npx tsc filea.ts fileb.ts
    • 3.2) npx tsc *.ts (transpile all .ts files)
  • Use TS in a project (auto)
    • Using Vite:
      • Pick your template of choice (e.g. React, Vue, React TypeScript, etc.)
      • npm create vite@latest <PROJECT_NAME> -- --template <TEMPLATE_NAME>
      • Example: npm create vite@latest **basics** -- --template **vanilla-ts**

Exercises

IMPORTANT: Make sure to complete all the tasks found in the daily Progress Sheet and update the sheet accordingly. Once you’ve updated the sheet, don’t forget to commit and push. The progress draft sheet for this day is: /user/week30/progress/progress.draft.w30.d03.csv

You should NEVER update the draft sheets directly, but rather work on a copy of them according to the instructions found here.

Week 30 - Day 4 | TypeScript: Theory & Practice

Schedule

  • Study the suggested material
  • Practice on the topics and share your questions

Study Plan

Go through the Learn Typescript (with Ania Kubow) interactive Scrimba course and then work on as many exercises as you can on https://typescript-exercises.github.io/. Make use of the hints and links provided.

Week 30 - Day 5 | TypeScript & React

Schedule

  • Watch the lectures
  • Study the suggested material
  • Practice on the topics and share your questions

Study Plan

Your instructor will share the video lectures with you. Here are the topics covered:

  • Part 1: More TypeScript
  • Part 2: TypeScript & React

You can find the lecture code here and the diagram over here

Questions:

  • Does the union order matter? number | string
    • No
  • What about PropTypes with TSX
    • When you are using TSX, just prefer the TS types and forget the PropTypes.

Tips

  • Treat ALL warnings as errors!
    • You can set this on TypeScript and ESLint
    • In general, as you are coding, when you see the “yellow-ish” warnings in the console, stop and fix them (treat them as errors)
  • getMonth() returns 0-11 or NaN (all these are of type “number”)

References & Resources:

Exercises

Study and practice the following:

IMPORTANT: Make sure to complete all the tasks found in the daily Progress Sheet and update the sheet accordingly. Once you’ve updated the sheet, don’t forget to commit and push. The progress draft sheet for this day is: /user/week30/progress/progress.draft.w30.d05.csv

You should NEVER update the draft sheets directly, but rather work on a copy of them according to the instructions found here.

Extra Resources

Weekly feedback: Hey, it’s really important for us to know how your experience with the course has been so far, so don’t forget to fill in and submit your mandatory feedback form before the day ends. Thanks you!

Project maintained by in-tech-gration Hosted on GitHub Pages — Theme by mattgraham