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

Lukas discusses TypeScript integration with Angular, demonstrates a basic component that utilizes TypeScript, and the benefit of using TypeScript types to broadcast intent.

Get Unlimited Access Now

Transcript from the "Typescript" Lesson

>> Let's talk about TypeScript for just a moment. And interestingly enough, I would say my favorite things about Angular have nothing to do with the framework itself. It is stand-alone kind of independent technologies that I think the Angular team has embraced that makes Angular really, really good. A big one is Typescript.

[00:00:31] And so let's walk through just a couple of TypeScript features that we're gonna see today, and what they are, what they do, and why they're useful. So you'll notice here that we have a basic component. And this is in TypeScript. And there are a number of things that are happening in this bit of code that if somebody is just coming from ES6, they're gonna say, wait a second, you can't do that.

[00:01:05] If you're coming from ES-5, forget, you've got bigger problems. But one of them is the ability to strongly type your properties in your methods. And the reason why I like this is because by programming to an interface or a type, you're able to communicate, ensure, and invalidate intent.

[00:01:33] Not only to other developers, but to your IDE and to your compiler. And so for me, one of the biggest upsides for using TypeScript is the ability to essentially broadcast intent of I have items for what is that. Well, if you care to look, you can just look at the item interface.

[00:01:58] With an interface, we can essentially establish a contract for how something is going to be constructed. So for something to implement or be of type item, they must have an ID, a name, and a description, and optionally, an image property. And so if I understand the interface, then I can make some inferences about how this is going to behave.

[00:02:26] And so if I, for instance, called a function that returns an item, and I don't think I have one here. But I could have a function that says, get current item, and I see that it returns an item, I know exactly what to expect so that I can then render it appropriately.

[00:02:47] Another thing that I don't believe ES6 has, or if it has, it just as recently happened by ES6. I mean, everything that's not ES-5, the field assignment. And so what this is is that instead of having to assign local properties in my constructor by just adding them to the top of my class, you can see that it's now available automatically to everything else in the class as a local property.

[00:03:23] So the second line, the first line that is actually called out here, items, I've just added that as a property, but then down at the bottom, you can see it's this.items. So it's went ahead and attach that as a property to any instance of that class. This also works in terms of constructor assignment.

[00:03:51] So you can add it in as a field, or if you add in a parameter into the constructor and you assign public or private, it assumes that that access modifier is there for a reason. And so what it will do under the hood is then say, we have this parameter of itemsService, it's private.

[00:04:15] Let's go ahead and assign this as a property of the class. And so with ES-6, what you will do is you would get itemsService, then you have to say, this.itemsService equals itemsService. And you have to map those parameters to local properties. TypeScript under the hood is just saying, I think we can assume that this is what you wanna do, we're going to do it for you.

[00:04:43] The other piece that is not, well, so you can implement an interface. And this in itself like the example here is Angular specific, but it allows us to say, we are going to implement the OnInit interface. Which means that we are required by law to use ngOnInit inside of our class or it's not compliant.

[00:05:11] And I mean, a little bit facetious, but what this allows us to do is when we implement an interface, so not only in interface can you have types, but you can have methods. Is that you can say, if it implements this interface, we know for a fact it has these methods in these properties.

[00:05:33] And just an interesting idea, I'm not gonna get into this here. But the idea is if you've ever heard the saying program to the interface and not to the concrete implementation. That you can pass in a parameter into a function, and you can type that to the interface.

[00:05:57] Meaning, if you had, let's say, a human, dog, and cat interface, and they all had a speak method on it. Well, it doesn't matter if you pass in a concrete instance of human, cat, or dog. It just knows that if you implement a living creature interface that has speak, that you can call speak on that instance, whatever you pass it in.

[00:06:29] So it's a way to say, I'm going to pass in something, we're not going to tell you what it is, but it's going to be of this type interface. And now, you have some really interesting things you can do in terms of composition. So being able to program to an interface and not to an instance is really, really, really powerful.