Added workshop that introduces trainees to the basics of TypeScript

[StevenVanBlerk]

Intention

This workshop is intended for trainees with some basic understanding of typed languages but with no experience with TypeScript. It will require volunteers having familiarity with TypeScript, but strong familiarity with another typed language might be sufficient.

This workshop was originally built for and used within SDC Sprint 4 (Types and typechecking) as a day plan workshop. This PR includes a DAY_PLAN_WORKSHOP.md file that could be transposed into the day plan if some minor changes are made to match the markdown of the day plans.

If you'd like more context on how this workshop came about, there is an extensive Slack thread discussing it.

Things to keep in mind while reviewing this

Is the write up sensible?

This is the 2nd iteration (3rd of 4th in my head) of this workshop. Please keep an eye out for text that feels out of place. I've proof read everything but I might have left bits that made more sense in previous iterations.

Does this code run well?

I'd appreciate reviewers running and completing the exercises themselves if possible. The config became a bit messy due to different exercises requiring different testing patterns. I think the tests are giving helpful feedback to trainees but there might be edge cases where unexpected errors come through.

Exercise 2 utilises experimental vitest features to test at compile time. This exercise is the most likely to result in unexpected or unhelpful behaviour.

Future improvements and my thoughts on further TypeScript exposure

This workshop aimed to automate as much of the grading of exercises as possible. I used vitest to accomplish this, which proved quite tricky since vitest is mostly intended for testing at runtime. This means it is difficult to ask a trainee to build a type SomeType and then automate a test against SomeType.

If another means of testing code at compile time can be found, it might be viable to follow the approach of this workshop. Otherwise it might be best to take a different approach for further TypeScript work. Having volunteers more involved in the grading and feedback, for example how exercise3.ts operates, might be viable.

My recommendation would be to have further learning of TypeScript be a byproduct and not the main focus. This could be accomplished by having JavaScript backlog work keep its current content but rather be written in TypeScript.

How I've seen others teach TypeScript

Total TypeScript has an excellent and short beginner course, which was the main inspiration behind these exercises. I'm guessing they encountered the same problems as me, hence their later exercises also not leaning on automated tests.

W3Schools takes a different approach by focusing on knowledge of TypeScript. Their exercises are not run within an IDE and tend to be very short code snippets.

An idea for an extra exercise

Should someone have capacity to further this workshop, I think it would be beneficial to trainees to have an exercise that highlights the benefits of returning to old code written in TypeScript instead of JavaScript. As Daniel poignantly put it:

One of the really useful things about static types that our trainees typically don't understand is that they help when we change code. Our trainees typically only think about writing code for the first time.

But showing them "If we rename Piscine to Assessment, or if we delete ITD, or if Users now need a phone number, TS will tell us everywhere that we need to change our code" is really useful.

I'm not sure the best way to introduce this - maybe we can introduce an exercise where they make a change to existing code and see that it was useful? (This would re-enforce the teaching in https://sdc.codeyourfuture.io/tools/sprints/5/prep/#type-guided-refactorings with a practical exercise, and show how TS helps in the same way MyPY does)

[netlify]

✅ Deploy Preview for cyf-workshops canceled.

Name	Link
🔨 Latest commit	9929cf0
🔍 Latest deploy log	https://app.netlify.com/projects/cyf-workshops/deploys/69711b6ea7d5f000084297dc

[netlify]

✅ Deploy Preview for cyf-workshop ready!

Name	Link
🔨 Latest commit	9929cf0
🔍 Latest deploy log	https://app.netlify.com/projects/cyf-workshop/deploys/69711b6ef3e8e70008b7b816
😎 Deploy Preview	https://deploy-preview-343--cyf-workshop.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Poonam-raj]

The purpose of this workshop is clearly filling a gap in knowledge. I've come at this review in the mindset of a fresh volunteer or trainee.

Based on the material around types it could be plausible that some students have never engaged with the type syntax properly before and with this workshop being an introduction it feels apt to cover the foundations so a few of my suggestions encourage breaking down the basic syntax.

A few other suggestions touch on phrasing. And there's a bit more about how the Learning Objectives connect with the workshop material.

Few general suggestions:

• Re: phrasing - mainly my aim was to bring the facts to the front and the context second. Looking to be as clear in language as possible.
• Generally more instruction is needed in how this workshop is executed, to enable volunteers and trainees to know exactly what their role in each section will be.

Please let me know if anything is unclear or if anything actually doesn't fit the intention for the workshop.
Thanks!

[Poonam-raj]

Thanks for addressing all my points, it reads so much clearer for both students and volunteers. I added one response to the group of 3-5 comment, mainly noting if we need to be explicit about working on the same fork.

The other big question on my mind is whether there's so much new material here that this should be split between prep material (lines 1 - 179ish) and a workshop (the rest of the day plan). Unsure if this is a future iteration of the workshop and not something we edit now. Will ask on the thread

[illicitonion]

This looks great, thank you so much for putting it together!

[Poonam-raj]

When it comes to this workshop's content and clarity I'd say this is fab. I can't see any holes people might fall in, everything is nicely laid out for students and volunteers. In terms of preferences on TS use I have less to say there, but happy with the tradeoffs and priorities you've mentioned in the three exercises. Seems like a good playground for people to explore and form opinions too.