Introduction

[00:00:00]
>> 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:02:20]
Which is better than just mastering a particular feature of the language, and I think we'll be able to do that today. So for those of you who are new to TypeScript, let me explain a little bit about what it is. It's an open source project that is maintained by Microsoft, and it represents a syntactic superset of JavaScript.

[00:02:45]
And what that means is, where JavaScript's syntax ends, you could think of that as sort of where TypeScript begins. This is not to say, all JavaScript programs are valid TypeScript programs. It's not a superset in that sense, but all of the JavaScript syntax you know and use every day, that is gonna work as part of a TypeScript program.

[00:03:09]
There are three parts to TypeScript, there's the language itself, the programming language, the compiler, and a language server. The compiler is what turns TypeScript code into clean JavaScript. It's very readable, you can look at the build output and we'll be able to make sense of it quite easily.

[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:03:52]
The reason I encourage you to use this mental model is, TypeScript only does things for you at build time. It helps ensure that your code is correct, but it kind of compiles away the thing that's actually running in a browser, or in Node.js. That's just regular JavaScript, and that's part of the goal of this project, right?

[00:04:16]
You should be able to use this to build JavaScript code that can run anywhere like on unembedded devices or in a browser, wherever you can run JavaScript. This is not quite the same as using something like Java, or C sharp or other languages that have at runtime type validation.

[00:04:33]
There's some cost associated with that as well to validate types at runtime. So, think of it like something that helps you as you're building your project, and then it sort of melts away, and you're left with regular JavaScript. TypeScript is very very popular, so I have here a little graph comparing React to TypeScript and you can see that even something as popular as React is not even close to the growth curve of TypeScript downloads.

[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:08:50]
>> What are the pros and cons of using TypeScript for its strict typing compared to regular JavaScript? Typing seems useful, but as an experienced user, I'm afraid that it will be hard to understand the benefits will be of making the language less dynamic and more strict.
>> Yeah, I would look back at this example that we just covered, which kind of illustrates how this regular JavaScript function could be used in a variety of different ways.

[00:09:19]
Sometimes dynamic typing or duck typing, where JavaScript kind of attempts to use a value and it'll try to treat a variable as if things work right up until the moment things blow up or you get an unexpected result. So for example, you could pass a function for the argument A, or a class, or an HTML DOM node.

[00:09:52]
And where you would start to hit problems is attempting to concatenate these things together. Effectively, you only in JavaScript, know things fail right at the moment where the problematic use happens. What TypeScript is doing for us here is it lets us say, all right, here's the boundary for a unit of code and here are the constraints that I'm looking to apply.

[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:10:54]
JavaScript gets to a point sometimes where you start tripping over your own shoelaces, right? There's not enough that you can hold all of the conventions you've established in your own mind, and TypeScript helps you put that in the source code. Yeah, Kevin has a great comment in chat.

[00:11:13]
Add the string 1 to the string 1, and you get back the string 11. You might not even catch that bug, that's a good point with this. Even in the TypeScript case, I mean, you would catch that bug cuz this is saying it must return a number, but you certainly wouldn't catch it in the JavaScript case.

[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.