Introduction

[00:00:00]
>> Hi, everyone. Welcome to Intermediate TypeScript v2. My name is Mike North. I've been a Frontend Masters instructor for nine years now. I'm a principal staff engineer at Stripe, and I'm the architect of their developer platform division. So if you use Stripe's SDKs or any of the dev tools we make available to our customers, that's my team that works on that.

[00:00:24]
We do a lot of TypeScript projects at Stripe, and I'm happy to package some of that knowledge from using TypeScript at scale and give it to you in this course. And also we use types internally to discuss the way our public API works. TypeScript is great for describing shapes of things and API semantics, and it's kind of a great language to discuss and define types that you may not use the TypeScript language for that.

[00:00:54]
But it's a very concise representation for that kind of thing. So, basically, I live and breathe types as part of my job. Some goals for this course, so I hope to take some of the knowledge I have from teaching over 100 TypeScript workshops and spending thousands of hours pair programming with people and helping teams reach successful outcomes with TypeScript.

[00:01:19]
Have to package that up and give that to you in this short course. And more important than just covering language features and things that are possible with TypeScript 5, I hope we can together through this time build a mental model and a framework for thinking about how TypeScript works.

[00:01:38]
That way, when new features land in TypeScript 6, and TypeScript 7, you kind of know how to think about it, and it's easier to understand how all of these pieces fit together if you have the right foundations. And I hope to help you form that today. We're gonna deal a lot with the utility types that are built into TypeScript.

[00:02:00]
So if you've ever seen something like partial, or pick, or record, those kinds of things, by the end of this course, you will understand exactly how those work. We're even gonna look at how they're implemented so we can get some good practice. Taking something like a utility type and picking it apart and understanding it in depth, that's a very useful skill.

[00:02:21]
This is probably a pretty scary piece of code here. If you're not used to looking at this, it's a little bit intimidating. There's a lot of syntax, there are a lot of capital letters in there. By the end of this course, you'll understand everything that's going on here.

[00:02:37]
And we will have together, with hands-on experience taken things like this, picked them apart into smaller pieces so that we can understand what's going on step by step. And then we can put it all back together and learn how to reason about the overall behavior you're seeing here.

[00:02:57]
So by the end of the course, I hope you'll be able to look at this, and you may not be able to sort of see the matrix or what it is here. But you'll be able to certainly take pieces out and say, all right, here's the index access type, and here's the maps type, and here's the conditional type.

[00:03:15]
And okay, if I put these together, here's what I get. So what do I assume you already know? Well, you should be pretty experienced, fairly experienced with modern JavaScript, and that means you know how to use classes, you know how to use async/await. We're not gonna do something incredibly exotic.

[00:03:39]
We're not gonna use proxies or anything like that but any, any mainstream JavaScript, I assume you already know. You should also have either taken the TypeScript Fundamentals course or have equivalent experience. So we're gonna kind of pick up right from where the TypeScript Fundamentals course left off. And that means you should have some experience knowing how variables, objects, arrays have, all those things are typed.

[00:04:07]
And I also assume that you have a little bit of experience at least doing the most basic level of generics and type parameters. A lot of what we're gonna discuss today builds upon that concept. And we're gonna start digging into it from there. This course may be a little bit challenging to understand if you're just getting started with TypeScript.

[00:04:35]
So I would encourage you, if you start taking this course and it feels like it's a little bit of a steep learning curve, it's okay to sort of press pause. Maybe do a couple exercises, a little bit of learning on your own, get more comfortable, and you should feel fine coming back in trying it again.

[00:04:55]
The idea here is to sort of take you from being able to understand some basic TypeScript code, that's the goal of the fundamentals course. And here we're trying to take you to the point where you almost comprehensively understand the language, or at least the various things that are available to you in language.

[00:05:12]
So the learning curve gets a little bit steeper. Don't feel bad if you have to come and try again when you'll feel easier the more experience you get. So let's talk a little bit about setting up the workshop project. First, if you just learn best by kind of watching somebody else go through examples and maybe taking notes, all you'll need to access is the course website that you're reading right now, which you can find at typescript-training.com.

[00:05:45]
And you'll need to be able to access the official TypeScript website. What you'll see is that a lot of the code snippets that we use in the course, they will have a little button in the lower right corner. I don't have a great example. Here it is. This Try button here, clicking this will actually take you to the official TypeScript playground where that example that we were just looking at is pre-populated for you here.

[00:06:10]
And this is a live environment you can mess around in here. You could introduce an error, and TypeScript will give you red squiggles like it does in Visual Studio Code. So that's one way you could take this course. You could even do that on an iPad or something.

[00:06:25]
If you learn best by doing real hands-on coding in Visual Studio Code or an IDE of your choice, you can check out the course repo. And first, you're going to need to install Volta. So Volta is a JavaScript tool chain manager. And the purpose of including Volta in this project, it's to make sure we're all using the same version of Node, and we're using the same version of Yarn.

[00:06:53]
So the Node version that we're using for this course and Volta will take care of this behind the scenes if you use it. But if you were to set it up on your own, you don't want to install Volta, you just need to make sure you're using Node 18, which is the latest LTS release of Node.

[00:07:09]
It's the one that they would advise you use in production today, right? They always say use the latest LTS, not the most modern version. For Yarn, we're using version 3.6.4. As of the time of recording, there are some 4.0 release candidates. We're not playing with release candidates, we're just using Yarn 3.

[00:07:30]
It's important you don't use Yarn 1. We're going to touch on some things that involve the modern version of Yarn, which is a totally separate code base from Yarn 1. Okay, so once you've installed Volta, and make sure you follow the installation instructions that you'll see both on the website, it's very simple instructions.

[00:07:52]
Sorry, I'll go back here. That's it, there you go, that's the full set. Once you install that, make sure you also pay attention to any instructions you may see in the CLI from running those commands. Sometimes it will say we need you to close your terminal and reopen a new one.

[00:08:11]
That's because it's putting some things in your .bashrc or your .zshrc. And you need to sort of like start a new terminal session, so that's picked up and everything works the way it's supposed to. You can then run this command which will install the node LTS and the latest Yarn 3 release.

[00:08:31]
To be honest, we're probably not very sensitive to node here, we're just using it to build things. Even if the LTS is different in the future, it should still work. But in case you're having problems, Node 18 is what we're using. So once you have all that done, you can clone the GitHub repo.

[00:08:48]
And if you've already taken the fundamentals V4 course on Frontend Masters, this is the same repo. You have a head start, you are already set up. It's just a different folder in the exact same repo. But you'd clone this project, you'd enter the directory for the project, and then you'd run Yarn.

[00:09:09]
Once you've done all that, you can head to this folder within the project, and that's where we will be doing most of our hands-on work. When I'm showing you my Visual Studio Code, that's where I'm going to be operating. And just to show you what that looks like, you can see here we have a bunch of numbered files and folders.

[00:09:29]
Those each correspond to a chapter of this course addressing a particular topic, so this is what you should see. This is in packages, notes, intermediate TypeScript V2, and then the source folder.