Transcript from the "Introduction" Lesson
>> So, welcome to TypeScript Fundamentals, my name is Mike North. I've been a Frontend Master's instructor for about eight or nine years now depending on whether you count when we recorded the course versus when it came out. So, I've been working with Frontend Masters for a while, I'm a principal staff engineer at Stripe, and I'm also their tech lead for their external facing developer platform org.
[00:00:27] So this is the part of the company that makes Stripe node, the Node.js SDK, which is written in TypeScript. If you go to stripe.sh, you can see a little in-browser CLI, which is pretty cool. So that's made by some of the teams that I support. And Stripe Workbench, which is kind of like Chrome DevTools but for Stripe, it's another big, TypeScript project.
[00:00:54] In addition to this, I am one of a few engineers that works very closely with teams at Stripe to shape the public API, that anyone building a payments integration on top of Stripe, uses. We use Typescript to discuss the API semantics and the shapes of requests and responses that we get, and this powers nearly a trillion dollars worth of payment volume every year.
[00:01:22] So it's a very high stakes API where getting the shapes of things right and making it easy to build on Stripe is really important. And knowing how to work with types and how to model different things with types is of critical importance. So that's kind of where TypeScript DNA is helping me in my career there.
[00:01:47] The number one goal I have for this course is that by the end of our time together, you should have a mental model for how TypeScript works. Of course we're gonna discuss a bunch of different language features, and how to work with variables and arrays and objects, things like that.
[00:02:03] But the most important thing I wanna to leave you with is how to think about types. And this is what will let you not only understand the latest TypeScript release, but all of the releases that follow after it, right? I want you to have an intuition for how these kinds of things work.
[00:03:27] The language server if you've used something like Visual Studio Code, or WebStorm, other IDEs, it's the kind of software component that powers those nice little type heads and helps validate code right as you're authoring it. And so that's what the language server does. You can think of TypeScript a little bit like a fancy linter.
[00:04:59] It is starting to become almost a ubiquitous part of a modern frontend stack, there's sort of varying degrees of typing that you can use for it, but it is definitely a dominant option in the space. So why are types a big deal? Why is TypeScript so popular? Well, first, it lets you leave more of your intent on the page, as the author of a piece of code.
[00:05:29] So if we look at this function here where we're adding two numbers together, or possibly concatenating two strings. It's not very clear what the author of this function intended to be done here. I mean, we could look into the word add, and try to infer, this is addition, but you could pass a string in for A and B and it would work.
[00:05:50] And imagine that you did that and then somebody comes along and says, all right, I need a third operand here. It's optional, I wanna to be able to add C to A and B. And they default that to 0, well, now whoever was using this for string concatenation, they're gonna end up with the character 0 at the end of their string, it doesn't quite work.
[00:06:12] We're missing some intent here, we don't know what the author meant to do. This is a preview of what typing a function like this looks like, but you can see here very clearly, we're saying a is a number, b is a number, and this means we return a number.
[00:06:30] And this is a real TypeScript error that's popping up here, saying an argument of type string is not assignable to a parameter of type number. And you can see a red squiggles underneath the string containing a number 4. So we're being busted on mixed use of strings and numbers here as we should, right?
[00:06:48] So this represents more information in your source code. And I'm sure you can imagine here where in your authoring environment, you're getting a lot more feedback about correct usage of all of your libraries and other parts of your code that maybe somebody else wrote. You're able to sort of to find some constraints here in terms of how these functions are meant to be used.
[00:07:10] So in essence, what we're seeing here is that TypeScript removes things that typically would be problems at runtime into compile time, is that you're getting this feedback earlier. You're getting it more clearly. You're getting it right at the call site where you're misusing this add function. And that's a lot more actionable, you're gonna catch things more easily.
[00:07:30] You don't have to wait until unit tests catch this kind of thing, although TypeScript's not a replacement for unit tests, but it does represent a greater degree of feedback that you can get right away. So throughout the course, you're gonna see that we have a lot of these little code snippets here in the website which you can visit typescript-training.com.
[00:07:51] And you can see this website. These are actually rendered from a TypeScript compiled code snippet here, so you can hover over these code points and actually explore what's going on with each of these parts of the code. I would encourage you to do so, there's a ton of valuable information you can get from little tooltips, sometimes that's where the type information is hiding.
[00:08:14] You're going to need, for sure, two things. You gotta be able to access this website that we're looking at right now, and you're going to wanna make sure that you can visit the official TypeScript website, which is typescriptlang.org. So if you wanted to just watch along, that's what you would need.
[00:08:34] If you want to code along with us, which I would encourage you to do, we're gonna have to clone a GitHub project and work with it locally. So that you can open up VS Code or another editor of your choice and work through some of the examples as we study them.
[00:10:15] And so we're getting not only a better error that's telling us where was the problem, specifically this value here is the problem, but it's telling us at the invocation site, not deep down in the function. I mean, imagine a + b, this is a much more intricate function.
[00:10:34] Imagine there are promises involved or there's some async error that happens. It's easier to debug something like this, and particularly as code bases get more complex and you have a lot of data moving around and you have some very interesting data structures to hold a lot of different things.
[00:11:35] Well, later in the course we'll look at how you could introduce some dynamic typing, I mean not dynamic typing, but flexibility in your types to TypeScript. So this is a good opportunity to talk about what we're going to cover in TypeScript Fundamentals. We're gonna first build a very small TypeScript program using the TSC CLI command.
[00:11:59] And then we're going to start getting into the details of the language itself. We'll cover variables and values, object, array, and tuple types. We'll talk a little bit about the difference between a structural and nominal type system. If you've used Java or C Sharp, something like that, that's a nominal type system.
[00:12:19] We'll get into union and intersection types, which you can think of as TypeScript's concept of and and or for types. We'll talk about giving types names, kind of the way we can give classes or functions names. It allows us to import and export types across module boundaries. We can do that with interfaces and type aliases.
[00:12:41] And then as a class we're going to go through an exercise where we try to write a type that describes any valid JSON value. Which could be, as you know, objects, it could be arrays, we can have strings and numbers and Booleans, null is an allowed JSON value.
[00:13:01] So we'll build a type that describes anything that is valid JSON. After that we'll get into type queries which allow us to extract type information from existing values. So if you have a return value from a function and you wanna create a new variable whose type is the same type as what the function returned, you could extract the type out and then use it in another place.
[00:13:32] That's a type query, getting a type from a value that you have. We'll discuss callables and constructables, which is another way of saying things you can invoke like functions and things you can use the new keyword with like classes when you create a new instance of a class.
[00:13:52] And then towards the end of the class, we'll talk about type guards and narrowing, which is the concept of building branches of code that handle specific parts of types. And then we'll get into generics, which is a really powerful feature that allows us to parameterize types. Kind of like how a function parameterizes a value, right?
[00:14:17] You could say, f(x) equals x squared. We can create a type that is defined in terms of a variable, and that variable is a type. And then we'll wrap up the day by taking everything we've learned and building a map, filter, and reduce kind of utility library. Which you may be familiar with using those on arrays.
[00:14:39] We're gonna make versions that work on dictionaries. So you'll take those same concepts and we'll sort of handwrite those utility functions ourselves with dictionaries in mind.