Angular 5中如何将本地JSON数组转为TypeScript数组？

Hey there! Let's walk through your two Angular 5 questions clearly, since you've already got your Book interface set up and a local JSON file ready to use.

First, you'll want to use Angular's HttpClient (the recommended replacement for the older Http module in Angular 5). Here's how to set it up step by step:

• Step 1: Import HttpClientModule in your AppModule
  Make sure you've added this to your root module so your app can use the HttpClient service:

  import { HttpClientModule } from '@angular/common/http';
  
  @NgModule({
    imports: [
      // ... your other modules (like BrowserModule)
      HttpClientModule
    ]
  })
  export class AppModule { }
  

• Step 2: Fetch the JSON file using HttpClient
  Inject HttpClient into your component or a dedicated service (services are better for reusability!). Then use the get() method to pull in your JSON data:

  import { HttpClient } from '@angular/common/http';
  import { Observable } from 'rxjs';
  
  // Example service or component constructor
  constructor(private http: HttpClient) { }
  
  getBookData(): Observable<any> {
    // Replace '/assets/books.json' with your actual file path
    return this.http.get('/assets/books.json');
  }
  

• Step 3: Subscribe to the observable to get the data
  In your component's ngOnInit() (or another lifecycle hook), subscribe to the observable to access the raw JSON data:

  ngOnInit() {
    this.getBookData().subscribe(rawData => {
      console.log('Raw JSON data:', rawData);
      // We'll convert this to Book[] next!
    });
  }
  

Since you already have your Book interface, there are a couple of straightforward ways to type your data:

Option 1: Use generics directly with HttpClient.get() #

The simplest way is to specify the Book[] type in the get() method—this tells TypeScript to treat the returned data as an array of Book objects:

// Update your fetch method to return Observable<Book[]>
getBookData(): Observable<Book[]> {
  return this.http.get<Book[]>('/assets/books.json');
}

// Then subscribe and get typed data directly
ngOnInit() {
  this.getBookData().subscribe((books: Book[]) => {
    this.bookList = books; // this.bookList is now a Book[]
    console.log('Typed books array:', this.bookList);
  });
}

Option 2: Manual conversion (for custom mapping or validation) #

If your JSON structure doesn't perfectly match your Book interface (e.g., different property names), use RxJS's map operator to transform each item:

First, import the map operator:

import { map } from 'rxjs/operators';

Then update your fetch method to transform the raw data:

getBookData(): Observable<Book[]> {
  return this.http.get('/assets/books.json').pipe(
    map((rawItems: any[]) => {
      return rawItems.map(item => {
        // Map JSON properties to your Book interface (adjust as needed)
        return {
          id: item.id,
          title: item.book_title || item.title, // Example: JSON uses 'book_title' instead of 'title'
          author: item.author
        } as Book;
      });
    })
  );
}

Bonus: Add type validation (optional but safe) #

TypeScript types are compile-time checks, so if your JSON has invalid data, it won't throw an error at runtime. You can add a type guard to validate each item:

// Define a type guard function
function isBook(item: any): item is Book {
  return typeof item.id === 'number' && 
         typeof item.title === 'string' && 
         typeof item.author === 'string';
}

// Use it in your map function
getBookData(): Observable<Book[]> {
  return this.http.get('/assets/books.json').pipe(
    map((rawItems: any[]) => {
      return rawItems.map(item => {
        if (isBook(item)) {
          return item;
        } else {
          console.error('Invalid book data found:', item);
          // Return a default Book object or handle the error as needed
          return { id: 0, title: 'Unknown', author: 'Unknown' } as Book;
        }
      });
    })
  );
}

内容的提问来源于stack exchange，提问作者Nikita Marinosian