7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 67Length: 8.9 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

1.4 TypeScript vs. JavaScript

In this lesson I'll explain why it's better to develop Angular-based web applications using TypeScript instead of JavaScript.

1.Introduction
6 lessons, 42:00

1.1
Introduction
00:48

1.2
Get Started With Angular-CLI
11:09

1.3
Developing With Angular-CLI
13:17

1.4
TypeScript vs. JavaScript
06:54

1.5
Angular Modules From the CLI
04:31

1.6
CLI Options
05:21

2.Get Started With Angular
7 lessons, 42:38

2.1
Bootstrapping the Application
04:30

2.2
The Application Module
04:15

2.3
The Application Component
08:06

2.4
Component Styling
03:06

2.5
Global Styling
05:11

2.6
Creating a Component With the CLI
09:34

2.7
Creating a Service With the CLI
07:56

3.Core Concepts
7 lessons, 55:20

3.1
Component Trees
06:20

3.2
Dependency Injection
06:52

3.3
Content Projection
05:38

3.4
Component and Directive Lifecycle Methods
06:31

3.5
Component-Only Lifecycle Methods
05:28

3.6
Decorators
07:36

3.7
Models
16:55

4.Template Deep Dive
11 lessons, 1:10:56

4.1
Basic Data Binding With Interpolation
05:35

4.2
Property Bindings
07:07

4.3
Attribute Bindings
03:29

4.4
Event Bindings
08:16

4.5
Class and Style Bindings
05:44

4.6
The `NgClass` and `NgStyle` Directives
05:04

4.7
The `*ngIf` Directive
04:41

4.8
The `*ngFor` Directive
09:29

4.9
Inputs
05:33

4.10
Using Pipes in a Template
07:31

4.11
Using Pipes in a Class
08:27

5.Forms
10 lessons, 1:45:41

5.1
Handling User Input With Template Reference Variables
07:06

5.2
Template-Driven Forms
11:10

5.3
Template-Driven Forms: Validation and Submission
14:00

5.4
Reactive Forms
11:26

5.5
Using a `FormBuilder`
08:01

5.6
Reactive Validation With Built-in Validators
14:53

5.7
Creating Custom Validators for Template-Driven Forms
12:18

5.8
Creating Custom Validators for Reactive Forms
08:26

5.9
Observing Form State Changes
12:40

5.10
Working With the `@HostListener` Decorator
05:41

6.Routing
9 lessons, 1:15:10

6.1
Defining and Configuring Routes
07:53

6.2
Rendering Components With Router Outlets
10:14

6.3
Using Router Links for Navigation
05:25

6.4
Navigating Routes Using the Router
06:24

6.5
Determining the Active Route Using an Activated Route
07:16

6.6
Working With Route Parameters
10:42

6.7
Using Route Guards
07:36

6.8
Observing Router Events
10:55

6.9
Adding Child Routes
08:45

7.Using the HTTP Client
5 lessons, 56:24

7.1
Sending an HTTP Request
10:52

7.2
Handling an HTTP Response
11:22

7.3
Setting Request Headers
12:33

7.4
Intercepting Requests
09:04

7.5
Finishing the Example Application
12:33

8.Testing
10 lessons, 1:23:27

8.1
Service Unit Test Preparation
10:45

8.2
Unit Testing Services
13:24

8.3
Component Unit Test Preparation
12:35

8.4
Unit Testing Components
07:27

8.5
Unit Testing Component Templates
06:58

8.6
Unit Testing Pipes
04:41

8.7
Unit Testing Directives
04:56

8.8
Unit Testing Validators
04:48

8.9
Unit Testing Observables
11:37

8.10
Unit Testing HTTP Interceptors
06:16

9.Building for Production
1 lesson, 03:40

9.1
Building for Production
03:40

10.Conclusion
1 lesson, 01:32

10.1
Conclusion
01:32


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.

Back to the top