JavaScript / TypeScript / Angular4中的对象URL映射

Question

I have a class for SearchFilter

class SearchFilter { 
   constructor(bucket: string,
               pin: number,
               qty: number,
               category: string) {
   }
}

When user hits search I'm filling in the filter to matrix params.

router.navigate(['filter', searchFilter]); //searchFilter is an instance

The URL looks like

filter;bucket=MPC123;category=JOINT;qty=90;pin=9087

This is being used in another component where the param is mapped back to an Object of type SearchFilter . But here the data types need to be set explicitly as far as I know.

   const params = this.activatedRoute.snapshot.params;
   const filter = this.getFilterFromParams(params);

---

   getFilterFromParams(params) :SearchFilter {
      const filter = new SearchFilter();
      Object.keys(params).forEach((key) => {
         switch(key) {
             case 'pin':
             case 'qty': filter[key] = Number(params[key]); break;
             default: filter[key] = params[key];
         }
      });
      return filter;
   }

As seen from above code, to map the params back to Object a custom mapping function is written, the question is if there is any other obvious way this can be done or is this a common pattern?

I will have to depend on URL as users should be able to share URLs of different filters.

Answer 1

You could maybe go for the capabilities of Object.assign and the spread syntax:

getFilterFromParams(params) :SearchFilter {
    return Object.assign(new SearchFilter(), params,
        ...['pin', 'qty'].map(key => key in params && { [key]: Number(params[key]) })
    );
}

Answer 2

Adding a static factory method would work:

class SearchFilter { 
  constructor(
    bucket: string,
    pin: number,
    qty: number,
    category: string) {
  }

  public static fromParams({ bucket, pin, qty, category }) {
    // TODO Add validation to ensure pin & qty are integers
    return new SearchFilter(
      bucket,
      parseInt(pin),
      parseInt(qty),
      category);
  }
}

Then we can use it like this:

const demoParams = {
  bucket: "MPC123",
  category: "JOINT",
  qty: "90",
  pin: "9087"
};

const filter = SearchFilter.fromParams(demoParams);