Using AngularFire2 in a secure and reliable manner

Question

Using AngularFire2 in a secure and reliable manner

Within my schema

import { DocumentReference } from 'angularfire2/firestore';

type DogType = 'good' | 'bad';

interface Dog {
  ref: DocumentReference;
}
interface GoodDog extends Dog {
  props: GoodDogProps;
}
interface GoodDogProps {
  // Props
}
interface BadDog extends Dog {
  props: BadDogProps;
}
interface BadDogProps {
  // Props
}

I also have an ApiService

@Injectable({
  providedIn: 'root'
})
export class DogApiService {
  private dogs: {
    good: AngularFirestoreCollection<GoodDogProps>;
    bad: AngularFirestoreCollection<GoodDogProps>;
  };
  constructor(private db: AngularFirestore) {
    this.dogs = {
      good: this.db.collection('goodDogs'),
      bad: this.db.collection('badDogs')
    };
  }

  public listDogs(type: DogType) {
    return this.dogs[type].ref.get().then(collection =>
      collection.docs.map(doc => {
        return {
          ref: doc.ref,
          props: doc.data()
        };
      })
    );
  }
}

But I am facing an issue with TypeScript:

When I call listDogs('good'), I want TypeScript to indicate that this function will return a Promise<GoodDogs[]>. I attempted using generics but couldn't resolve the TS errors.

A bit of context:

I cannot utilize AngularFirestore.valueChanges() as it doesn't provide DocumentReference
I prefer not to use the alternative AngularFirestore.snapshotChanges method, as I solely require a simple Promise
GoodDog and BadDog are the types I need for my App
GoodDogProps and BadDogProps define the Firebase schema

typescript generics angularfire2

Answer 1

Answer №1

If you want to ensure that the signature for listDogs is correct, consider using lookup types. You might have to include some type casts in the code:

type DogType = 'good' | 'bad';

interface Dog<P> { 
  ref: DocumentReference;
  props: P;
}
interface GoodDogProps {
  // Props
}
interface BadDogProps {
  // Props
}
interface DogTypePropsMapping { 
  good: GoodDogProps;
  bad: BadDogProps;
}

export class DogApiService {
  private dogs: { [T in DogType]: AngularFirestoreCollection<DogTypePropsMapping[T]>};
  constructor(private db: AngularFirestore) {
    this.dogs = {
      good: this.db.collection('goodDogs'),
      bad: this.db.collection('badDogs')
    };
  }

  public listDogs<T extends DogType>(type: T): Dog<DogTypePropsMapping[T]>[] {
    return this.dogs[type].ref.get().then(collection =>
      collection.docs.map(doc => {
        return {
          ref: doc.ref,
          props: doc.data()
        };
      })
    );
  }
}

Answer 2

If you want to ensure that the signature for listDogs is correct, consider using lookup types. You might have to include some type casts in the code:

type DogType = 'good' | 'bad';

interface Dog<P> { 
  ref: DocumentReference;
  props: P;
}
interface GoodDogProps {
  // Props
}
interface BadDogProps {
  // Props
}
interface DogTypePropsMapping { 
  good: GoodDogProps;
  bad: BadDogProps;
}

export class DogApiService {
  private dogs: { [T in DogType]: AngularFirestoreCollection<DogTypePropsMapping[T]>};
  constructor(private db: AngularFirestore) {
    this.dogs = {
      good: this.db.collection('goodDogs'),
      bad: this.db.collection('badDogs')
    };
  }

  public listDogs<T extends DogType>(type: T): Dog<DogTypePropsMapping[T]>[] {
    return this.dogs[type].ref.get().then(collection =>
      collection.docs.map(doc => {
        return {
          ref: doc.ref,
          props: doc.data()
        };
      })
    );
  }
}

Using AngularFire2 in a secure and reliable manner

Answer №1

Similar questions

show the stored value inside the useRef variable

Error message from @types/eslint: The members ChainExpression and ImportExpression from ESTree are not being exported

Issue with Undefined Array in Angular 2 App

Is there a way to execute the run function of a different Component in Angular 7 without causing the current

Type-safe Immutable.js Records with TypeScript

The useForm function from react-hook-form is triggered each time a page is routed in Nextjs

The method beforeEach in angular2/testing seems to be failing as it is not

Monitoring real-time updates in Angular components using Firebase

Typescript raises an issue regarding a React component's optional prop potentially being undefined

Filtering multiple disordered words using Angular

Tips for synchronizing the display of a table with the server response in an Angular application

Is there a way to apply a filter to an object without using an additional map function?

Is it possible to design a Typescript type that only contains one property from a defined set and is indexable by that set as well?

Adjusting the array when items in the multi-select dropdown are changed (selected or unselected)

Storing information from a form into a database with the help of TypeORM on Angular 6

Executing MongoDB collection operations with array filtering

Using lodash to combine the values of identical objects

Methods for populating an object with Interface type and returning it

Ensure that AngularJs Views are consistently typed in MVC

Guide to loading a minified file in Angular 2 with Gulp Uglify for TypeScript Bundled File minimization