Workshop Setup

[00:00:00]
>> Okay, so you need to be able to view the course website. TypeScript-training.com is the correct link. We looked at the official TypeScript website, and then if you want to code along, which I would encourage everybody in the classroom and watching live and you watching the video. This is the best way to learn Typescript is hands-on.

[00:00:22]
You're going to want to install Volta. Volta is a Javascript toolchain manager and what it will ensure is you have the right version of node and the right version of yarn for this project. We want this project to work for everybody, and Volta is part of making sure that happens.

[00:00:41]
There are other tools like this, like nvm, and I heard in the classroom this one called N, apparently, I'm not familiar with that one, but if you're using the right node and yarn version, you should be okay. So we're gonna go through the steps of installing Volta, but I'll show you if you use these other tool chain managers, what version of node and yarn you're looking for.

[00:01:05]
So first we're going to run this command. We're gonna curl from get.volta.sh, pipe that into bash. If you're using Windows and PowerShell, there's an installation process described on the Volta website for this. There's a little MSI bundle that you have to install. But we're gonna go, assuming people are using a POSIX compliant environment.

[00:01:31]
Like if you're using Windows subsystem for Linux, this will work as well. So I just pasted that in and you can see it installed Volta. I already have Volta installed here. It's a good idea to close your terminal and reopen it because in some cases, it will insert something into your bash RC or your ZSH RC.

[00:01:52]
I already have that here. And you should be able to run Volta and see some reasonable output here, something that's not an error. The next thing you'll wanna do is run this command. And this is globally installing, meaning it's not associated with any particular project. It's still within Volta.

[00:02:11]
Globally installing the latest node LTS, which is node 18 and yarn v3. You could run this. And you may see some progress bars where it's downloading things on the fly. But this will ensure you have some node and some yarn inside Volta. And all of this is happening in this directory.

[00:02:39]
So this is where all of the stuff, all of the nodes in the yarns live. And then you're good to go. Once you've done that, you should be good to go. So you're gonna clone the Git repo. I'm suggesting using HTTPS here because you're not gonna be pushing to this repo and you're gonna have to worry about SSH keys in case you haven't set those up yet.

[00:03:03]
Then you're gonna enter the folder and you're gonna run yarn. So something like that, and you should see some output that looks like this. The fact that you're seeing these messages starting with a Y, that's an indication you're using a modern version of yarn. If you don't see these, that likely means that you're using yarn 1.

[00:03:35]
And interestingly, that's sort of a separate project that's deprecated now, it's a different repo, a different code base. So you want to make sure you're seeing, some evidence that you're using Yarn 3. I've used yarn yarn 4 with this as well, it's a release candidate right now. There should be no problems using that, but this makes sure you're using yarn 3.

[00:03:58]
And where you can see the versions that are pinned in the root package JSON of the project, you can see this, so node 18.18.2 Yarn 364. That's what we're using here. I do not plan to change these unless we release a V5 of this course, in which case we may try to move these forward, but that's how to get all set up.

[00:04:21]
Vanessa has a question about whether the value of TypeScript has a lot to do with full stack development where you're coming from static typing in the backend. And then dynamic typing in the front end represents like a loss of type information. And I would say you get a lot of value out of TypeScript in that situation, right?

[00:04:43]
If you already have types and you know the shapes of your API responses, failing to bring that into the front end puts you in a position where you sort of have to keep a backend and frontend aligned with human vigilance as opposed to having types that are generated for you.

[00:05:02]
Some large companies use something called Protobufs for this, where they can generate a single set of types. Both for their backend and frontend. There's a full stack TypeScript course that I've recorded for Frontend Masters which you can take a look at that, where we use Graphql and a set of TypeScript interfaces and we can do that very thing.

[00:05:20]
But that's certainly a use case, right? Having types that sorta flow from your back end code base over the wire into your front end, and it all works together in concert.