This course has been updated! We now recommend you take the TypeScript Fundamentals, v3 course.

Check out a free preview of the full TypeScript Fundamentals course:
The "Course Agenda" Lesson is part of the full, TypeScript Fundamentals course featured in this preview video. Here's what you'd learn in this lesson:

Mike reviews the course agenda, which covers the difference between modern JavaScript and TypeScript, how TypeScript provides structure for React components, using types to make the code more expressive, practice strategies for adoption, and more.

Get Unlimited Access Now

Transcript from the "Course Agenda" Lesson

>> Mike North: Over the next two days we're going to learn exactly where the line between Typescript and JavaScript is. At least right now, and I will try to give you an idea of where it's moving. Even going so far as to help you understand various proposals to change the JavaScript language like standard.

[00:00:22] You're gonna see repeated use of these little icons, the TypeScript and JavaScript icons. So TypeScript is, as we said, a strict, or sorry, a typed superset of JavaScript. So you can assume anything I'm showing you in JavaScript, it can be used in at least in some form in TypeScript.

[00:00:43] I do wanna show it to you in the regular JavaScript way so that even if you're watching this and you might want to use something like Visual Studio code which can use TypeScript to analyze your regular JavaScript, I want you to know that. This is not something you need TypeScript for, it is a modern JavaScript language feature and then we'll go back to TypeScript only for the types and for things that have no or there is no signs the regular JavaScript language will take on that feature.

[00:01:16] So you should have a very good understanding by the end of this, for example that like, a sync and wait, or generator functions, or iterators, let and conts. Those at one time were sort of TypeScript things, and now the JavaScript language spec has those as well. So by the end of this class, you should have a good understanding for exactly where the line is for between modern JavaScript and TypeScript.

[00:01:42] Over time, we're seeing that what used to be TypeScript specific features, they're making their way into the JavaScript language specification. This is happening more and more, and there are even some proposals to add things to the JavaScript spec that seemed to be directly aligned with stuff you can already do in TypeScript.

[00:02:03] So that's when I was learning this language a couple of years back, this is something that I missed. You'd read a TypeScript book or you'd go through a tutorial and there would be no sense of this is where the regular language ends and this is where the typed stuff begins.

[00:02:21] So, I'm going to aim to help you understand exactly where that line is. Whenever you see a JS, little yellow square in the upper right corner here. That indicates that this could be used both in TypeScript and in regular JavaScript, right? Or the most modern version of the spec, not necessarily stuff that every browser will understand, but one day it will.

[00:02:48] If you see the blue TS logo in the top right corner, that's something that you have to run to the TypeScript compiler in order to get new JS or browser to understand, usually that will involve types. So today, we are going to do a couple of isolated exercises that aim to kinda get our feet wet.

[00:03:07] Right? Help us tackle a few challenges where types can really make things simpler and more expressive. Tomorrow, we’re going to deal with a larger project that involves handling a synchronous code flow and React components. So we're gonna work with TypeScript and React. Don't worry if you don't know React yet.

[00:03:30] We're gonna be using it in a very simple way, but it is a great example of a library that has used the concept of types to add some structural where previously, you know it was sort of a free for all. At least the way I wrote React, it turned out I would add something to props, or something to state.

[00:03:51] And I would add it as needed and the rest of my code would not be aware that, hey this new property is available, because there's no clearly defined structure.
>> Speaker 2: The type definitions used for TypeScript, are there similar definitions using flow or some of these paradigms could they be translated into flow?

>> Mike North: Conceptually, all of these should carry over, one of the, so something you can check out if you choose there's a video visual studio code course I taught earlier this week and the video should be online now. You can even use JS Doc comments to use TypeScript looking types in inert comments.

[00:04:36] All comments are inert to provide type information for regular JavaScript. But it is great to see that all of these different ways of expressing types are very, very closely aligned. And so, once you learn one, it's a matter of kind of figuring out what's the syntax for this other one?

[00:04:56] The difference here, of course is, this is not inert code. This is a different language, right, and as a result I think personally, given the choice, someone said write me some code for a browser that has type information. I would choose TypeScripts simply because with comments you're limited to sort of wrapping your types around the code as best you can.

[00:05:20] Whereas here, you can put it into the code and it reads a little bit more better, if that makes sense. Reads a little bit better, not more better. So we will, we will very quickly see that one of the things we've been missing out on in the JavaScript world is the ability to express our intent with types.

[00:05:41] Anytime you've written a function that takes in, like, as arguments, two objects, that's not, that is not expressive. What are those objects? What properties are allowed on those objects? What's optional and what's required? And so now, we can say, we can basically say upfront, what's the form of this objects that I wish?

[00:06:01] What's the form I want them to take? And we can catch that at compile time, right? Rather than catching it up run time feel via bug report we'll get a build time, red squiggle under a line of code. One of the common mistakes people run into when starting out with TypeScript is they kinda add types everywhere.

[00:06:23] And it's important to understand that a type system is designed around, it is a way of expressing constraints. And there is a way to go to far. It's like I would say the defaults path will lead you to going too far and you basically can sort of lock yourself in and find that you're wrestling against these types rather than letting them you know help you put guard rails in the right places.

[00:06:49] You know? You don't wanna box yourself in. You don't wanna over constrain your code. So we will learn how to have a light touch, and to basically only apply type definitions where TypeScript can figure things out for us automatically. Finally, one of the core tenants of the TypeScript project is, you should be able to take some regular JavaScript and migrate to TypeScript relatively easily, right?

[00:07:15] So we will see how we can incrementally start shifting towards a Type Script code base. This isn't, I don't want you to think of this as, we're going to rewrite everything in something like CoffeeScript, which is a totally different syntax. Coffee Script is not really a super set of anything.

[00:07:35] So we will hopefully get to see how we can mix JavaScript and TypeScript and start with some flexible type definitions, and then basically pay down tech debt by tightening it up and tightening it up and tightening it up and then we'll end up with something that is where we'd want it to be had we written it in TypeScript from the beginning.