TypeScript/Angular中组件内数组代码的清理与存放最佳实践

Great question! Your initial thought to move the awards array into a separate awards.ts file is absolutely a solid best practice—let’s break down why, how to implement it, and cover the TypeScript/Angular-specific patterns you’re curious about.

1. Moving the Awards Array to a Dedicated File #

Storing static data like your awards array outside of your component keeps your component code clean, makes the data reusable across other parts of your app, and simplifies maintenance (you won’t have to dig through component logic to update award details).

Here’s how to set it up:
First, create a new file (e.g., awards.ts) in your project:

// awards.ts
export const awards = [
  { finished: 1, awardName: 'The beginning', description: 'Complete one exercise' },
  { finished: 5, awardName: 'Five of a kind', description: 'Complete five exercises' },
];

Then import it into your component:

import { Component } from '@angular/core';
import { awards } from '../path/to/awards'; // Adjust the path as needed

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  numbOfFinished = 0; // Your existing property

  checkAwards(res: any[]) { // Adjust the type of 'res' as needed
    awards.forEach(award => {
      if (this.numbOfFinished === award.finished) {
        if (res.find(r => r.key === award.awardName)) {
          // Your existing logic here
        }
      }
    });
  }
}

2. Adding Type Safety with TypeScript Interfaces #

Yes, TypeScript has a perfect tool for this: interfaces. Defining an interface for your award objects ensures type safety (you’ll get IDE hints and catch typos early) and makes your code more readable.

Create an interface file (e.g., award.interface.ts):

// award.interface.ts
export interface Award {
  finished: number;
  awardName: string;
  description: string;
}

Now update your awards.ts to use this interface:

// awards.ts
import { Award } from './award.interface';

export const awards: Award[] = [
  { finished: 1, awardName: 'The beginning', description: 'Complete one exercise' },
  { finished: 5, awardName: 'Five of a kind', description: 'Complete five exercises' },
];

Your component will now benefit from full type checking—no more guessing the shape of each award object!

3. When to Use an Angular Service Instead? #

If your award logic grows beyond static data (e.g., you need to fetch awards from an API, add methods to check eligibility, or share award state across components), move the array and related logic into an Angular service. This follows Angular’s separation of concerns principle.

Example awards.service.ts:

import { Injectable } from '@angular/core';
import { Award } from './award.interface';

@Injectable({ providedIn: 'root' })
export class AwardsService {
  private readonly awards: Award[] = [
    { finished: 1, awardName: 'The beginning', description: 'Complete one exercise' },
    { finished: 5, awardName: 'Five of a kind', description: 'Complete five exercises' },
  ];

  getAwards(): Award[] {
    return [...this.awards]; // Return a copy to prevent external modification
  }

  getEligibleAward(finishedCount: number): Award | undefined {
    return this.awards.find(award => award.finished === finishedCount);
  }
}

Then inject this service into your component:

import { Component } from '@angular/core';
import { AwardsService } from '../awards/awards.service';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  numbOfFinished = 0;

  constructor(private awardsService: AwardsService) {}

  checkAwards(res: any[]) {
    const eligibleAward = this.awardsService.getEligibleAward(this.numbOfFinished);
    if (eligibleAward && res.find(r => r.key === eligibleAward.awardName)) {
      // Your logic here
    }
  }
}

4. File Organization Tip #

For better maintainability, group related files together in a dedicated folder:

src/app/
├── awards/
│   ├── award.interface.ts
│   ├── awards.ts (for static data)
│   └── awards.service.ts (if using a service)
└── your-component/
    ├── your-component.component.ts
    └── ...

To wrap up: Your initial plan to move the array to a separate awards.ts file is exactly the right approach for static data. Pair it with a TypeScript interface for type safety, and consider an Angular service if you need to add business logic around the awards.

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