Production-Grade TypeScript

Production-Grade TypeScript Creating a Project from Scratch

Learning Paths:
Check out a free preview of the full Production-Grade TypeScript course:
The "Creating a Project from Scratch" Lesson is part of the full, Production-Grade TypeScript course featured in this preview video. Here's what you'd learn in this lesson:

Mike creates an empty TypeScript project to demonstrate best practices around dependency management, and configuration. The project uses Volta to ensure the correct version of Node and Yarn will be installed. The "dev" NPM script uses the "--watch" flag to rebuild the project when a file is changed and the "--preserveWatchOutput" flag to keep console information from the last rebuild.

Get Unlimited Access Now

Transcript from the "Creating a Project from Scratch" Lesson

>> The next thing we're going to do is we're gonna start with an empty folder. And we're going to take the steps I usually take when making a brand new TypeScript library. So I'm doing this because after we set this up, we're gonna switch over to our slack workshop project.

[00:00:21] But I want you to know there's nothing up my sleeves. I want you to understand how it all fits together. And this is an opportunity for us to do it in a simple way so that you're not left feeling like I have only shown you the happy path.

[00:00:40] So I want you to create a brand new folder. We're gonna do this from start to finish, right? So I'm gonna create a folder and let's just call it my lib. By the way, if you're following along in the notes, which I highly suggest you do in this case, given that I have all of the steps are all the little changes you have to make to makes it much easier to copy paste, right?

[00:01:03] So this is notes Section 4. So we're gonna make a directory, And call it my lib. You can call it whatever you want and we're going to enter it. And then the next thing I'm going to do is use NPX, NPXGit ignore node. Raise your hand in the class if you've used NPX before for something, even if you don't know what it means, have you ever used it?

[00:01:33] About half a class. So, what this effectively does it's a shorthand for download a package from NPM called Git ignore and treat it like it's a CLI package. This is really most useful with CLI, right? NPX, X is for execute. So that's not what execute starts with but it works.

[00:01:57] And then we're gonna pass an argument to it the word node. So if we were to do this with TypeScript, we could do NPX, TSC that would invoke TypeScript. So if it doesn't exist on your system yet, it will be downloaded on the fly. And we should see evidence of that.

[00:02:16] There it is, we saw that little progress bar real quick. Right and it keeps it cached. So you might see something a little different than what you're seeing for me here. And then it tells me it created a git ignore file for type node. Let's see what it looks like.

[00:02:36] There's my gitignore. So this particular library, it's a great way to create a starting point gitignore for a variety of different environment types. So this has stuff in here for at some point, it's got like there's grunt and bower. And this is obviously for JavaScript stuff. There's a Ts build info.

[00:02:56] That's something TypeScript spits out. There's some view stuff in here. Next, js, the next and nuxt. There your view things. So this is just designed to make it so it works well. For a bunch of different JavaScript things, that you don't really care about committing to your gitrepo.

[00:03:17] Next thing we're gonna do is create a starting point package JSON. We can do that with this yarn in it, yes. So if we didn't do --yes, it would ask us a bunch of questions and we're just saying YOLO like go with whatever you're gonna go with. And let me open this in a new VS code.

[00:03:40] So now I'm out of my slack workshop. I'm in this new folder I've created. I've got my package JSON here. This is what we got by saying --yes. So Version 1 is the default. This is the default value here where MIT of licensing is by default, it's grabbing my -lib from the folder name, right?

[00:04:00] So it's kinda done all the stuff. It's inferred as much as it can. Now we're gonna make a few changes to this file first. I expect the entry point for this library to be in a folder I'll create later called dist. So we'll do this and I'm gonna include some type information as well.

[00:04:22] So we'll tell we'll encode this information into our package, JSON, right? So we've got the main entry point. And then this is, for consumers of this library where they can find the type information. So like VS code will look at the package JSON for this package, and it will follow the instructions.

[00:04:45] This is like saying here's the map where you can find my types. We're going to then add a couple scripts here and we'll install the dependencies needed for these scripts in a moment. So this is what's necessary in order to be able to run things like yarn, build, yarn, test and so on.

[00:05:13] So build, I'm just gonna want it to run the TypeScript compiler. That's all we need there. Dev, which is a live development environment where a server spins up and whenever things change, it's rebuilt. I can look at, like, maybe localhost 1,2,3,4, if I'm building a web app. So, in this case, because it's not gonna be a web application, it'll be just a tiny library.

[00:05:41] I'm just gonna say, I want TypeScript to run, but I want it to sort of watch for changes and rebuild whatever I change. And here's how we can do that. So I'm gonna say do the stuff you would do for build, but I want to run this in watch mode.

[00:06:00] So this is now passing additional arguments to TSC beyond what would be passed to it for the build script. And then finally, this one's important. Preserve watch output. So TSC --watch by default will clear the console whenever you save a file. And I feel like that is not so valuable in cases where it maybe you saw a few errors and you fix a few and you save and you kind of wanna see the history of what was spit out before.

[00:06:38] Preserved watch output just means nothing is cleared. Like just let my terminal do what it's gonna do. I don't want my tools to erase information from my console. So this is a good time for us to make sure we install all of those dependencies that we will need.

[00:07:06] And this I just noticed this not in the instructions, but it's fine. We can make it work. So here's what we're gonna do. All I need actually let's finish the script here real quick and then we'll install those dependencies because it's gonna let us do that all in one step.

[00:07:25] So we have a lint task. When I run yarn lint, I want eslint to run. And I want it to look just lint whatever's in the source folder. And I have to tell it that it's to look at not just js files, but also ts. By default, it's just gonna look at JavaScript.

[00:07:45] And, obviously, we're writing TypeScript today. And then, one last command here test, and we're gonna use jest for testing. So I'll save my package JSON. And now I wanna install some dependencies. This is not in the notes right now. So this is where you wanna look at what I'm doing real quick.

[00:08:07] So I'm gonna say yarn, add -D for development dependency, right. This is just stuff we need for our built environment. We want to install TypeScript. Eslint and jest. And it's TypeScript, eslint and jest. So it's really just those things that we state that we need, All right. Last thing, this is for those of you that have been able to use volta successfully.

[00:08:43] I want to pin the version of node and yarn to the current stable releases. So that if a new release is cut tomorrow, I am not sort of taking that in by accident for this project and nobody in my team is. Someone's working with the beta of no jazz.

[00:09:04] I don't want them to be suffering from weird bugs. That relate to people using different nodes. So here's how we do that volta pin node yarn. That's it, and running this, we can see that this little bit here was added. So when people check this project out, if they have Volta installed on their machine, they're gonna get node 12,19 and yarn 1, 22.

[00:09:36] By the way, this isn't the latest stable release. I think this is the latest LTS. Which is perfectly fine. In fact, if you go and look at the node documentation around versions, they pretty much say that you should unless you have a compelling reason, you should be using the LTS in production.

[00:09:55] It's a very good idea to do that. All right. We don't really have a Git repo yet. So this is a good time to make our first commit. Well, first we have to do Git init and then I'll add all this you can see our node modules is ignored on the left sidebar here, which is great.

[00:10:17] And I'm just gonna call this initial commit. And now we have a Git repo and one commit.