TypeScript is a strongly typed language. This helps minimize errors with intellisense when it doesn't recognize or expects types. Properties can have types and methods—return types. But sometimes we have a property or method that does not have a predefined type but can have one defined via an interface. Here we demonstrate how.
- [Narrator] As we've been building our application, we have been using TypeScript. One of the benefits of using TypeScript is that it's a strongly typed language. The fact that it's strongly typed helps minimize errors. Every property has a type, such as line 10-14. Every method has a return type, such as our toggleImage method which has a return type of void. But sometimes we have a property or method that doesn't have a predefined type. Like in our array on line 16.
To specify custom type, we can define an interface. An interface is a specification identifying a related set of properties and methods. A class conforms to this specifications by implementing the interface. We then use the interface as a data type. Why don't we go ahead and give that shot. The first thing we want to do is create a separate file of a type TypeScript and then it's going to contain our interface. Let's navigate to our app folder, and within the app folder there's a movie folder and we'll create a file called movie.ts Select TypeScript.
Movie.ts And here we'll simply paste in our interface code. We used the keyword export to that it becomes available to other modules in our application. It's an interface so we use the interface keyword. To name it we follow a convention by adding the letter I before the name of the interface. I'm calling it IMovie. It doesn't have to have an I in front of it but it is a convention that I like to follow. Within here are the properties that we need for our interface.
Make sure that's saved. The next step is to import the interface. We can go back to our component. At the very top, we'll import IMovie. The next thing we'll do is change any to the new type that we've created of our interface Imovie. Okay, to test it why don't we go ahead and change imageURL which we know is part of the interface. If we look back at our interface, that is one of the properties, if we were to change it by adding the letter b in front of it, the compiler will complain because it's not conforming to the interface, it doesn't recognize it and you have this intellicence that lets you know that.
By hovering over movieId or movieName you can see the intellicence at work. To make sure nothing has broke, let's go ahead and save. We can run in our browser, make sure we have focus in our Solution Explorer, the top of the project. And everything is working as it was before. Let's go ahead and move onto a different topic referring to stylings. We're going to make some changes in the heading here. That's up next.
- Creating components
- Bootstrapping components
- Working with templates
- Using directives and interpolation
- Binding and transforming data
- Creating advanced and nested components
- Creating services
- Obtaining data with HTTP calls
- Configuring routes