TypeScript in The Build Process 9 exercises
explainer

TypeScript in a CI/CD System

TypeScript really shines when it's part of a continuous integration/continuous deployment system. A CI/CD system involves a server that you can contact to push your code up, then various checks are run against it.

One example of a CI/CD system is GitHub Actions. When you push your code up to GitHu

Loading explainer

Transcript

00:00 Let's look at a place where TypeScript really shines, which is on a CI-CD system. A CI-CD system is basically a server that you can contact and push your code up. And what it will do is it will run various checks, run, do various things on your code. An example of that is GitHub Actions here.

00:19 So inside this explainer folder here, I have a GitHub file or folder. Inside there, I have a workflows folder. And inside there, I have a CI.yaml file, yaml. And what this does here is basically we give it a name of CI. And when we push our code up to GitHub,

00:38 this is going to tell GitHub to run some stuff or run some commands, do some stuff to our code. And basically, if those commands that we're running fail, then we get a big cross on our commit or our PR or something like that. Whereas if everything succeeds, then we get a nice little check mark.

00:57 This can be really useful when you're running against, first of all, running against all pushes. So we're pushing, like whenever we push code up here, it's going to just check to make sure that everything's okay. And it's also going to run against all pull requests as well, really, really nice. This means that you can check before you merge something whether that code is going to be okay.

01:16 Now, let's just run through all the things that this would do. This would run on a, like a server on GitHub, which is running the latest version of Ubuntu. Then we check out the repo with Git. We set up pnpm because this is a pnpm repo. Then it also sets up node with pnpm's cache too.

01:35 Then we install all the packages using pnpm install and then run pnpm run CI. Let's take a look at that. Inside our package.json, we're just running the CI script here. And the CI script currently just runs TSC.

01:52 Now, this means that if we run pnpm run CI, let's just CD into it, 016. Now we can get information as to whether our, basically our process is working here. I think I actually need to install this directory first, then I can run pnpm run CI.

02:10 And now you can see that TypeScript ran, found no issues and just exited the process without causing an error. If I were to manually add an error, then I'd be able to see, let's just say, can I remove this, cause an error? No, I'm not sure what I can do. Ah, here we go. Just do something like this.

02:29 Pnpm run CI, it's going to catch this issue, which is going to error at runtime before I even ship my code to production, before I even merge it into my branch. So using something like GitHub Actions, there are many, many alternatives like CircleCI, hundreds of alternatives really,

02:47 that let you basically see whether your code is going to be okay, even before you push it up to production. And when you push it up to production, you can even run TypeScript just before you deploy to make sure it catches that too. So this is where TypeScript really shines as basically a guardian angel, watching over your code,

03:07 making sure there are no issues with it whatsoever before you push it up, or it kind of lets you catch a lot more issues really before you can even see them in production. Airbnb did this when they kind of migrated over to TypeScript, and they found a massive reduction in the amount of errors

03:25 that they were seeing pushed to production because they were being caught by their CI much earlier. Really, really cool. And it's an amazing use case for using TypeScript, either as a build tool, because it's going to catch type errors there, or as a linter as we're doing here.