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

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

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

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

Hint

Simply add export before const books.

Practice

1. What is the main purpose of using an interface in Angular for data models?

easy

A. To define the shape and types of data objects for better code clarity

B. To create a new component automatically

C. To style the HTML elements in the component

D. To run the Angular application on the server

Solution

1. Step 1: Understand what interfaces do

   Interfaces describe how data objects should look, including what properties and types they have.

2. Step 2: Identify the purpose in Angular

   In Angular, interfaces help developers write clear and error-free code by defining expected data structures.

3. Final Answer:

   To define the shape and types of data objects for better code clarity -> Option A

4. Quick Check:

   Interfaces = Define data shape [OK]

Hint: Interfaces describe data structure, not behavior or styling [OK]

Common Mistakes:

• Confusing interfaces with components
• Thinking interfaces add runtime code
• Using interfaces to style elements

2. Which of the following is the correct syntax to declare an interface named User with a string property name and a number property age?

easy

A. interface User { name: string; age: number; }

B. class User { name: string; age: number; }

C. type User = { name: string; age: number; }

D. function User(name: string, age: number) {}

Solution

1. Step 1: Identify interface syntax in TypeScript

   Interfaces use the keyword interface followed by the name and curly braces with property declarations.

2. Step 2: Check the options

   interface User { name: string; age: number; } correctly uses interface User { name: string; age: number; }. class User { name: string; age: number; } uses class, which is different. type User = { name: string; age: number; } uses type, which is valid but not an interface. function User(name: string, age: number) {} is a function, not an interface.

3. Final Answer:

   interface User { name: string; age: number; } -> Option A

4. Quick Check:

   Interface syntax = interface User { name: string; age: number; } [OK]

Hint: Interfaces start with 'interface' keyword, not 'class' or 'function' [OK]

Common Mistakes:

• Using class instead of interface
• Confusing type alias with interface
• Writing function instead of interface

3. Given the interface and code below, what will be the output of console.log(user.age)?

interface User {
  name: string;
  age: number;
}

const user: User = { name: 'Anna', age: 30 };
console.log(user.age);

medium

A. undefined

B. Anna

C. 30

D. Error: Property 'age' does not exist

Solution

1. Step 1: Understand the interface and object

   The interface User requires name as string and age as number. The object user matches this with name: 'Anna' and age: 30.

2. Step 2: Check the console.log output

   Logging user.age will output the number 30, as defined in the object.

3. Final Answer:

   30 -> Option C

4. Quick Check:

   Accessing user.age = 30 [OK]

Hint: Interface ensures object has age; console logs that value [OK]

Common Mistakes:

• Expecting name instead of age
• Thinking interface adds runtime error
• Assuming undefined because interface is only compile-time

4. What is wrong with the following interface and object assignment?

interface Product {
  id: number;
  name: string;
}

const product: Product = { id: 101, title: 'Book' };

medium

A. Property 'id' should be a string, not number

B. Missing semicolon after interface declaration

C. Interface cannot be assigned to a constant

D. Property 'title' does not exist in interface 'Product'

Solution

1. Step 1: Compare object properties with interface

   The interface Product expects properties id and name. The object has id but uses title instead of name.

2. Step 2: Identify the error

   TypeScript will report that title is not defined in Product and name is missing.

3. Final Answer:

   Property 'title' does not exist in interface 'Product' -> Option D

4. Quick Check:

   Object keys must match interface keys [OK]

Hint: Object keys must match interface properties exactly [OK]

Common Mistakes:

• Ignoring property name mismatch
• Thinking semicolon is required after interface
• Confusing type of id property

5. You want to define an interface Employee that has a required id (number), a required name (string), and an optional department (string). Which interface declaration is correct?

hard

A. interface Employee { id: number; name: string; department: string; }

B. interface Employee { id: number; name: string; department?: string; }

C. interface Employee { id?: number; name?: string; department?: string; }

D. interface Employee { id: number; name: string; department: string | undefined; }

Solution

1. Step 1: Understand optional properties in interfaces

   Optional properties use a question mark ? after the property name to indicate they may or may not be present.

2. Step 2: Analyze each option

   interface Employee { id: number; name: string; department?: string; } correctly marks department as optional with department?: string;. interface Employee { id: number; name: string; department: string; } makes it required. interface Employee { id?: number; name?: string; department?: string; } makes all properties optional, which is incorrect. interface Employee { id: number; name: string; department: string | undefined; } uses string | undefined but does not mark it optional, which is less idiomatic.

3. Final Answer:

   interface Employee { id: number; name: string; department?: string; } -> Option B

4. Quick Check:

   Optional property uses '?' = interface Employee { id: number; name: string; department?: string; } [OK]

Hint: Use '?' after property name to mark it optional [OK]

Common Mistakes:

• Making all properties optional
• Not using '?' for optional properties
• Using union with undefined instead of '?'