Add Custom Data Types with TypeScript Interfaces in Angular

Sam Julien: [0:00] Right now, our app is just using the generic any type for our habits. The any type basically tells TypeScript to leave us alone and not bother us. This gets our app to work, but it's like riding a bike with a deflated back wheel.

[0:16] Angular really shines when you can take advantage of the power of TypeScript, so let's add a type for our habits here and then we can use it here in the HabitService as well as in our HabitListComponent, and our HabitItemComponent for our Input. Let's do that.

[0:35] How we add a type to our Angular app is by asking the Angular CLI to generate an interface for us. To do that, we can say ng generate interface or we can shorten this to just ng g i and give it the name that we want, which is habit. Angular will generate that file for us.

[0:59] Let's close that and open up habit.ts. You can see that we have this empty interface here so let's open our HabitService to the side here just so we can take a look at our habits array. You can see we have an id, we have a title, and we have a count so we can just add this to our habit interface here. I can say id: number, title: string, and count: number.

[1:28] Here's some cool stuff that we can do here. Notice for example, if I take out count and then I tell TypeScript that this is an array of Habits, so Habits array or Habit array and then let's import that, notice that TypeScript now is complaining that there's no such thing as a count property on this interface. If I add back in count: number, that goes away.

[2:00] I could also make count an optional property by adding a question mark after it. If I were to get rid of count on this particular habit, it would be OK, but if I remove that [inaudible] , you can see that now, TypeScript is mad at me because count is missing on the interface for habit.

[2:21] Now we have an interface for our habit, so let's go ahead and close that and go back to our service. We're just going to tell TypeScript that getHabits returns an array of habits. Now we've got our interface imported in our service. We're telling TypeScript that habit is in array of the Habit type and we are saying that our return type for getHabits is an array of habits.

[2:51] Great. Let's go ahead and also add that to our HabitListComponent. We're saying here that we have an Observable of any for habits. Now, notice this. If I hover over getHabits, you can that it tells us that it's returning an Observable that is an array of habits.

[3:08] If I were to tell TypeScript that habits was going to be an array of strings, then you can see that we're going to get this error here that says that Type Observable<Habit> is not assignable to type Observable<string>. That's pretty cool.

[3:23] I can go ahead and just import the habit interface. You can see now it's saying that it needs to be an array. You can't assign an observable of a habit array to an observable of habits. I'll just go ahead and add that. Now we've got our habit interface here and we've added a type to that. Let's also add our type to our item component. I'll go ahead and import habit there and say that that input is going to be a Habit.

[3:52] This lets us also get IntelliSense. Let's say we wanted to go ahead and add our count so we can say count, add the curly braces and my closing parenthesis here. Then I can say habit. and now you can see that I'm getting IntelliSense for the properties on this interface. I can select count and see that. If I open the browser to the side and refresh, you can see that now we've got our count next to our habit description.

[4:24] Those are the basics of using types and interfaces in Angular.