1.4 TypeScript vs. JavaScript

Hi, folks. It should be, absolutely, clear at this stage that we are using TypeScript in this project. But I just wanna point out now that this isn't, absolutely, necessary. It is possible to use pure JavaScript with Angular. The very first time I built in Angular 2+ application, I used JavaScript, because I hadn't used TypeScript before. And I wanted to learn the latest Angular, not the latest TypeScript, but there are a couple of issues with using pure JavaScript. So first of all, you've got to do all of the setup that the CLI would normally do yourself. Linting, testing, compiling the CSS. All of that needs to be handled. But as the CLI is geared towards TypeScript, you would have to set all of that up yourself. And that takes time and it's very complicated with so many moving parts. This is a big thing. Another problem is that nearly all of the documentation and online guides for Angular that you'll find are written using TypeScript. There is very little information on developing an Angular with plain JavaScript. If you are lucky, there might be a stack overflow question that is relevant, and it might even have an answer. But even the official Angular documentation site doesn't include much JavaScript information. It's almost all entirely focused on TypeScript. This makes developing in TypeScript so much easier. You've got all of the official documentation to check out and a huge wealth of information online. With JavaScript, you're pretty much on your own. But besides of these two pretty important issues, TypeScript itself is actually pretty awesome. One of the main things that it gives us is strong typing for JavaScript, which is useful all by itself. But because it is a compiled language, there is the opportunity to add additional features to the language. When it first came out, it brought a lot of newer things that JavaScript didn't really have, like classes. Now JavaScript, itself, does have a lot more support for these things natively. But TypeScript still gives us support for future parts of the language, which we can't use natively and I think that will always be the case. So one of these things is decorators, which are currently a proposal in ECMAScript, but they're not yet supported or implemented in any mainstream browsers. Decorators are important in Angular and we'll look at them in much more detail as we progress through the course. So one of the main reasons to use TypeScript is to add types to JavaScript. This is actually, really, useful and can eliminate a lot of bugs from our code. Editor support is, generally, very good for TypeScript as well, especially in Microsoft IDEs. Let's just open up the app.component.ts file. We can see that this file exports a simple class called AppComponent. So let's add a method to the class. So the moment is just a regular method, there's nothing particularly TypeScripty or special about it. So one of the things that we can add typings for is to specify the return type of a method or function. So if this method was gonna return a string, we could specify that like this. So we're telling the compiler that this method will return a string. And straight away, the IDE here, Visual Studio, has put some red underlining underneath the word string. What this is basically saying is that we've specified that the method will return a string. But the method isn't actually returning a string. It's not returning anything at all. But that is one of the big benefits of TypeScript, especially when you're using an editor that has a lot of support for TypeScript. So straight away, before we've run any unit tests or any linting or even come out of the editor, we can see that there's a problem here. It's very unlikely that we're now gonna forget that we need to return a string, because the editor is screaming it right at us with this big red underline. So let's fix that. And we can see that as soon as we do return a string, the red underlining goes away. And now when we try to compile the app, we won't get any errors. Whereas if we were to return something else, that's returned an array instead. So we get some red underlining again. And it's telling us that we should be returning a string, and that an empty array is not a type of string. And now let's just try to run a build. It doesn't have to be a production build. And we can see that we get an error here in the output. It does build some things for us, but we get this compiler error basically saying the same thing that the editor was saying. An empty array is not assignable to the type string. So it won't even let us compile the application and that's very, very useful for eliminating an entire class of bugs. All those types of bugs, which can be caused by methods returning the wrong type of value, just go away. It's not possible for us to make those silly day-to-day errors that we all make from time to time. So that will already save us a huge amount of time and effort. As well as providing typings on the return values of methods, we can also provide typings on the parameters that they might receive. So if this method was gonna receive some kind of parameter, let's say it's a test parameter, and that is also gonna be a string. So we provide that typing information in a very similar way. We just use a colon and then type that the parameter will be. So now we won't get any warnings at this stage, because nothing is actually invoking this method. But at some point in the future, if we try to call this method and pass it something other than a string, not only will the IDE tell us that we're passing in an argument of the wrong type. The compiler will also tell us when we try to build the application. So again, this eliminates a entire class of bugs which are caused by passing the wrong type of arguments into methods. We'll see all of these things in action as we work through the rest of the course and I'll call them out as necessary. We aren't actually going to be using this method. So I'm just gonna go back and remove it now. So in this lesson, we've learned a little bit about how we can leverage TypeScripts to eliminate classes of bugs. Such as bugs caused by passing the wrong types of arguments into methods, or having methods return the wrong types of values. Thanks for watching.