TypeScript Fundamentals, v3 Introduction
Transcript from the "Introduction" Lesson
[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: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: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: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: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: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: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: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.