Transcript from the "Introduction" Lesson
[00:00:00]
>> Welcome to TypeScript Fundamentals V3. My name is Mike North, and I'm a senior staff engineer at LinkedIn. I work in a part of the company called the developer productivity and happiness team, where I'm an infrastructure user experience expert. As well as the company's lead for TypeScript infrastructure and how we roll TypeScript out across all of our JavaScript code bases.
[00:00:27] So we're gonna start with some real talk, I can't make you a TypeScript expert at the end of a one day workshop, it's just not possible. But what I can do is make sure that by the end of today, you have a well formed mental model that will hold up even when things get complicated.
[00:00:46] And then you can learn more and you can try these things out that we're going to introduce today. And I can guarantee you that by setting you on the right path, you will find it easier and easier to take in that new information on your own as you continue your TypeScript adventure.
[00:01:05] So first, let's talk about what TypeScript is. It's a syntactic superset of JavaScript, meaning it sort of starts with all of the JavaScript syntax you know as its starting point and then layers additional concepts on top. It's an open source project maintained by Microsoft, and the goal is to add types to JavaScript.
[00:01:32] So through the use of the compiler, TypeScript compiles out to readable JavaScript, and it comes in three parts. There's the programming language, the language server, and that's a piece of software that's sort of behind your editing environment. It feeds your editor like VSCode, all that great information that powers autocompletes.
[00:01:56] And then there's the compiler, and the compiler is what performs that analysis on your code base and makes sure everything lines up the way it should. TypeScript is incredibly popular. So this is the third version of the TypeScript Fundamentals course that I'm teaching for Frontend Masters. And 2019, this is where I taught the first version, and I brought out a chart like this.
[00:02:22] And I was really proud to be able to show, look, React's a very popular library and TypeScript is on par with React, look, it's so popular. That trend has obviously changed, React looks sort of like it's been left in the dust here. I mean, these are two completely different projects but just in terms of the things we think about with ubiquitous pieces of tooling, things that are sort of always in your Node modules for one reason or another.
[00:02:52] TypeScript is one of those things that is increasingly part of what you're already doing, even if you're not using it directly. And to me, it's starting to look like exponential growth, not even linear growth here. So, everybody is using this, people are really excited about it, why? I'm gonna give you a couple reasons why you might care about TypeScript, why it might be an appealing thing for you to look into.
[00:03:23] And we're obviously gonna learn more about this throughout the day, you'll have many reasons by the end of the day. First, it allows you as a code author to leave more of your intent on the page. So if we look at a function like this that you could find in a regular JavaScript application, this, it sort of is a function that just runs a + b, right?
[00:03:47] This could be string concatenation, it could be numeric addition, I mean the function name in this case gives us sort of a clue here, but if you use this to combine strings, it would work. Imagine in the future if somebody came along and made what they thought was a non-breaking change and they add the ability for a third upper end to be part of what's happening here.
[00:04:12] If you were using this with string concatenation, you'd end up with zeros at the end of every string that you're combining through this function. So intent matters here, and whenever there are multiple interpretations of what are the constraints, and what's going on, and what was this designed to do, you're kinda asking for trouble.
[00:04:31] In the TypeScript world, we can have something like this where we say a is a number, b is a number, this function returns a number. And even though theoretically a + b could be used to combine strings, it's very clear what the author intended for this to do.
[00:04:49] And not only is the code more clear as we read it, but we are alerted to any use of add that deviates from what the author originally intended. And this little pop up here, this error message, is the kind of thing you would see right in your editing environment like VSCode.
[00:05:09] So baking in more of that intent is a huge win for TypeScript. Reason number two of many, TypeScript has the potential to allow you to move some kinds of errors from runtime where they affect users to compile time, which is maybe before you even open a pull request.
[00:05:32] Examples of these kinds of errors that you can catch include values that might or might not be there. Incomplete refactoring where maybe you should have changed something in seven places but you only caught six. And then internal contracts within your code base. Maybe it's the properties you thought you were passing to a component, right, and now it requires that you give it something new, TypeScript will help you catch that kind of thing.
[00:05:58] Finally, TypeScript serves as the foundation for a great code authoring experience. And I am of course referring to not just the validation of making sure we're passing functions the right things, but this great auto-complete where we sort of get code documentation brought right into our editing environment. Really, really cool stuff and in my opinion this is sort of catching up with the rest of the software engineering world where we finally get a rich editing environment instead of basically a lightweight text editor that does syntax highlighting.
[00:06:33] That's kind of where the JavaScript world has been for too long. So, the last time I taught this workshop, this is TypeScript Fundamentals V2, we spent a lot of time uncommenting code, looking at small examples. Inspecting tooltips to understand what's going on, how is TypeScript understanding our code, we have leveled things up for this course.
[00:06:59] So the only things you're going to need in order to follow along are this website that we're looking at right now and the official TypeScript website. You won't even need to crack open your code editor, why? We've brought VSCode into the browser, so we're gonna be able to see examples and get hands-on without having to set anything up, some really cool stuff.
[00:07:25] Let's look at how we're going to spend our time during this course. First, we will look at compiling our first TypeScript program and we will talk about variables, objects, and arrays. We'll take a quick break, and then we're going to get into some theory. And we'll talk about how TypeScript's type system is different from what you may have seen in Java, or C#, basically anywhere else in the programming world.
[00:07:51] TypeScript is sort of a unique beast in some ways. After lunch, we're going to collaboratively work together to define some of our own type information. And after tackling some of the last core concepts in the JavaScript world, functions and classes, we'll talk about these top and bottom types, right?
[00:08:12] These are things that can hold anything or nothing. Sounds abstract but they're very, very useful. Finally, towards the end of the day, we're gonna slow things way down and tackle one of the most mysterious and abstract aspects of the TypeScript programming language. And that is generics, or defining types in terms of other types.
[00:08:37] This is one of the great conceptual walls I can help you get over, and generally one of the biggest sticking points that people hit as they're trying to start working with this programming language. Here's a question, in a design system how can I support consuming apps that don't use TypeScript as well as those that do, and do I need to provide type definitions as well as prototypes?
[00:09:05] Well, this is one of the great aspects of TypeScript, one of the core principles is that it needs to be able to work with regular JavaScript code. So even if your consumers are using regular JavaScript, they'll still get a lot of the benefits of that type information that comes from a library written in TypeScript, right?
[00:09:30] So if you write the TypeScript, all of your users will get that better developer experience to varying degrees but they're all going to benefit to some degree. A very, very good question. We'll learn more about that very quickly, actually, in the next chapter of the course. So Nita asks are there any open source projects for beginners where we can apply and practice TypeScript after this course?
[00:09:58] I'm gonna have to look back on that one, I'm sure there are some, one I can tell you for sure is the TypeScript website. So there are a lot of issues on the TypeScript website that are marked as good for new contributors, and by its very nature, it has a lot of small examples.
[00:10:17] And as people who are just learning the language, that's kind of a superpower in that case where you can use your lack of experience in this specific area to speak to what's confusing and what's not. And you can really help make the documentation, the little small projects that are part of that TypeScript handbook and the website.
[00:10:38] You can make those a little bit better so that they work for you because you're the intended audience, right? So we have another question, are there any plans to introduce aspects of TypeScript into the JavaScript programming language? I would have to say, no, but don't worry. So JavaScript is kind of strange in that code that we wrote in 1995, 1992, it still has to run as JavaScript, right?
[00:11:06] The Internet has to remain backwards compatible. And for that reason, it's unlikely that we'll shift from sort of a dynamically typed or duck typed model to a statically typed model. So don't expect anytime soon for types to become part of what most people can run in their browser.
[00:11:31] Now, however, [LAUGH] we do see examples where something is sort of piloted in TypeScript, right? TypeScript adds a feature by itself and then those become part of the JavaScript programming language but it doesn't include the types. Examples of this include decorators, which are likely to be part of JavaScript soon.
[00:11:56] Private fields, so TypeScript has this concept of class fields that only that class itself can see. Well, that's now part of JavaScript. So there are a few situations where, aside from the typing aspect of things, language features sort of prove themselves out in the TypeScript world. And then that allows TC39, the standards body that decides what is part of JavaScript, right, it allows them to see hey, there are a lot of apps that got a lot of value out of this.
[00:12:29] How can we bring this to everybody, people who write JavaScript and TypeScript? And then sort of we merge everything together, right, where we make sure that once it's standardized, everyone can make use of those kinds of features. Well, let's jump in and look at how we might compile our first TypeScript program.
[00:12:53] Now, if you wanted to, you could check out this repo, if you click Edit on GitHub, it'll take you to a page in this repo. I would encourage you not to for this video course because we're gonna move kinda quickly, and I'm gonna show you everything you would see if you were to compile it yourself.