Interfaces for data models in Angular - Mini Project: Build & Apply

Interfaces for data models

📖 Scenario: You are building a simple Angular app to manage a list of books in a library. Each book has a title, author, and year published.

🎯 Goal: Create an interface to define the shape of a book object. Then use this interface to type a list of books in your Angular component.

📋 What You'll Learn

Create an interface called Book with properties title (string), author (string), and year (number).

Create a variable called books typed as an array of Book.

Initialize books with exactly three book objects with the given data.

Use the interface to ensure type safety in the component.

💡 Why This Matters

🌍 Real World

Interfaces help Angular developers define clear data models for their apps, making code easier to understand and less error-prone.

💼 Career

Knowing how to create and use interfaces is essential for Angular developers to build scalable and maintainable applications.

1

Create the Book interface

Create an interface called Book with these exact properties: title as string, author as string, and year as number.

Angular

// Define the Book interface here
// Your code here

Need a hint?

Use the interface keyword followed by Book. Define the three properties with their types inside curly braces.

2

Create the books array variable

Create a variable called books typed as an array of Book. Do not assign any value yet.

Angular

export interface Book {
  title: string;
  author: string;
  year: number;
}

// Declare the books array typed as Book[] here
// Your code here

Need a hint?

Use let books: Book[]; to declare an array of books without initializing it.

3

Initialize books with three book objects

Assign to books an array with exactly these three book objects:
1. { title: 'The Hobbit', author: 'J.R.R. Tolkien', year: 1937 }
2. { title: '1984', author: 'George Orwell', year: 1949 }
3. { title: 'To Kill a Mockingbird', author: 'Harper Lee', year: 1960 }

Angular

export interface Book {
  title: string;
  author: string;
  year: number;
}

// Initialize books with three book objects here
// Your code here

Need a hint?

Assign an array with three objects matching the Book interface to books.

4

Export the books array for use in components

Add the export keyword before the books variable declaration to make it available outside this file.

Angular

export interface Book {
  title: string;
  author: string;
  year: number;
}

// Export the books array here
// Your code here

Need a hint?

Simply add export before const books.