Welcome, welcome... I am Danielle and I've been tasked with helping that wonderful, terrible creature above, Stitch, with Typescript.
- TypeScript is the BIG SISTER of JavaScript that adds static types, enabling developers to catch errors during development rather than at runtime. It supports all JavaScript features but adds type safety, interfaces, and generics, making code more predictable and maintainable in large projects.
Stitch is a great programmer but quite lazy, follow along with this README on your browser and let's show him how it's done!
- It is very important that you know some basic JavaScript.
- It is also important that you have Typescript installed on your computer! You can use
tsc --version
to check if you do! If not, usenpm install -g typescript
to install and try again. - Once that's done, FORK this repo with all branches. You can use the branches provided to check your solutions and help yourself if you get stuck!
- once you open up the repo in your code editor of choice, you should see this README file, lazy Stitch's .js file and a tsconfig file also(did this for you so we can just focus on the fun stuff🤠)
- change this .js file to a .ts file
- now use the command
tsc
in your directory terminal to compile a dist folder with your .js file inside - you should see quite a few errors, let's try and help Stitch by correcting his .ts file (NOT THE .JS FILE!!)
- make sure you delete the "dist" folder after each problem
As you can see, Stitch is trying to evaluate his horrid vibe levels... not looking too great, I'm afraid.
Now, I know you see the errors. Let's try and use Typescript to establish rules first.
- use
: type
notation at the end of each to make it clear what type each parameter and the function itself. (use the examples listed here https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#functions if you don't know how.) - now do some guided debugging in your .ts file and compile (feel to comment out the rest of the code if the red lines are annoying)
- check the "solutions" branch if you'd like and delete the "dist" file when you're done
Stitch seems to have gotten a bit sentimental, bless him! He wants to express his appreciation to one of his favorite authors, but alas, the program is incomplete!
- use the "interface" method explained here(https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#interfaces) to implement in his .ts file
- do some debugging if necessary
- check the "solutions" branch if you'd like and delete the "dist" file when you're done
This one is a doozy. Stitch has been snooping around Jumba's lab again and stole some secret files about his fellow experiments. He's written a function to print out info about these experiments, but once again, he forgot about the importance of types.
- try and use Typescript to fix this and guide your debugging
- check check the "solutions" branch if you get stuck!
Thank you for helping Stitch! He was attempting to follow along but well...
Hopefully, you learned something or maybe you just needed a refresher. Either way. Well done for trying! Bye, now!