Angular uses TypeScript to take advantage of working in a strongly typed programming environment. Strong type checking reduces the likelihood of one element in your app sending incorrectly formatted data to another. Such type-mismatch errors are caught by the TypeScript compiler and many such errors can also be caught in your IDE.
In this lesson, you'll create an interface to define properties that represent data about a single housing location.
You have an interface, but you aren't using it yet. In this step, you create an instance of the interface and assign some sample data to it. You won't see this sample data appear in your app yet. There are a few more lessons to complete before that happens.
In the Terminal pane of your IDE, run the ng serve command, if it isn't already running, to build the app and serve your app to http://localhost:4200.
In the Edit pane of your IDE, open src/app/home/home.component.ts.
In src/app/home/home.component.ts, add this import statement after the existing import statements so that HomeComponent can use the new interface.
In src/app/home/home.component.ts, replace the empty export class HomeComponent {} definition with this code to create a single instance of the new interface in the component.
By adding the housingLocation property of type HousingLocation to the HomeComponent class, we're able to confirm that the data matches the description of the interface. If the data didn't satisfy the description of the interface, the IDE has enough information to give us helpful errors.
Save your changes and confirm the app does not have any errors. Open the browser and confirm that your application still displays the message "housing-location works!"
Conceptual preview of interfaces
Interfaces are custom data types for your app.
Angular uses TypeScript to take advantage of working in a strongly typed programming environment. Strong type checking reduces the likelihood of one element in your app sending incorrectly formatted data to another. Such type-mismatch errors are caught by the TypeScript compiler and many such errors can also be caught in your IDE.
In this lesson, you'll create an interface to define properties that represent data about a single housing location.
1. Create a new Angular interface
This step creates a new interface in your app. In the Terminal pane of your IDE:
ng serve
to build the app and serve it to http://localhost:4200.3. Add properties to the new interface
This step adds the properties to the interface that your app needs to represent a housing location.
At this point, you've defined an interface that represents data about a housing location including an id, name, and location information.
3. Create a test house for your app
You have an interface, but you aren't using it yet. In this step, you create an instance of the interface and assign some sample data to it. You won't see this sample data appear in your app yet. There are a few more lessons to complete before that happens.
Confirm that your home.component.ts file matches like this example.
By adding the housingLocation property of type HousingLocation to the HomeComponent class, we're able to confirm that the data matches the description of the interface. If the data didn't satisfy the description of the interface, the IDE has enough information to give us helpful errors.