打字稿映射和或减少：将数组映射到其他数组类型

Question

I need to map an Array<Quote> , where Quote is:

export interface Quote {
    readonly chronoUnit: Quote.ChronoUnitEnum;
    readonly downloadedDocs: number;
    readonly downloadedKb: number;
    readonly uploadedKb: number;
    readonly uploadedRefs: number;
}

export namespace Quote {
    export type ChronoUnitEnum = 'HOUR' | 'DAY' | 'MONTH' | 'YEAR';
    export const ChronoUnitEnum = {
        HOUR: 'HOUR' as ChronoUnitEnum,
        DAY: 'DAY' as ChronoUnitEnum,
        MONTH: 'MONTH' as ChronoUnitEnum,
        YEAR: 'YEAR' as ChronoUnitEnum
    };
}

To an Array<AlignedQuote> :

export interface AlignedQuote {
    readonly alignedType: AlignedQuote.AlignedEnum;
    readonly hour: number;
    readonly day: number;
    readonly month: number;
    readonly year: number;
}

export namespace AlignedQuote {
    export type AlignedEnum = 'DOWNLOADEDDOCS' | 'DOWNLOADEDKB' | 'UPLOADEDKB' | 'UPLOADEDREFS';
    export const AlignedEnum = {
        HOUR: 'DOWNLOADEDDOCS' as AlignedEnum,
        DAY: 'DOWNLOADEDKB' as AlignedEnum,
        MONTH: 'UPLOADEDKB' as AlignedEnum,
        YEAR: 'UPLOADEDREFS' as AlignedEnum
    };
}

I was thinking about using any kind of map , but I don't quite figure out how.

let quotes: Array<Quote>;
let alignedQuotes: Array<AlignedQuotes> = quotes.map(???).reduce(????);

Example:

quotes: [{
  chronoUnit:ChronoUnit.HOUR,
  downloadedDocs:1,
  downloadedKb:23,
  uploadedKb:65,
  uploadedRefs:7
}];

alignedQuotes: [ 
  {alignedType: AlignedQuote.AlignedEnum.DOWNLOADEDDOCS, hour: 1, day: null, month: null, year: null},
  {alignedType: AlignedQuote.AlignedEnum.DOWNLOADEDKBS, hour: 23, day: null, month: null, year: null},
  {alignedType: AlignedQuote.AlignedEnum.UPLOADEDKBS, hour: 65, day: null, month: null, year: null},
  {alignedType: AlignedQuote.AlignedEnum.UPLOADEDREFS, hour: 7, day: null, month: null, year: null}
]

Any ideas?

Answer 1

I`m not sure how exactly your two objects are related, but you can check here how Array.Map() works with basic example. It is a function and you can do whatever you need inside the brackets

Click

Possible solution to your case:

let alignedQuotes: Array<AlignedQuotes> = quotes.map(quote => <AlignedQuotes>{ 
     hour: quote.downloadedDocs,
     day: null, 
     month: null, 
     year: null
});

quote here is single Quote obj (.map iterates over all of them), you can use his properties when needed like in the 'hour' example.

Answer 2

I would break down the problem into three parts.

• a plucker
• a selector
• a summer

Based upon this example:

{alignedType: AlignedQuote.AlignedEnum.DOWNLOADEDDOCS, hour: 1, day: null, month: null, year: null},

For the above, DOWNLOADEDDOCS is the plucker of which property to read, and hour is the selector of which quotes to iterate and 1 is the sum. You need to use four different selectors to get all of hour , day , month and year for a single AlignedQuote .

So we write each of the above as separate functions.

const plucker = (quote: Quote, x: AlignedQuote.AlignedEnum): number => quote[x];
const selector = (quotes: Quote[], x: Quote.ChronoUnitEnum): Quote[] => quotes.filter(q => q.chronoUnit === x);
const sum = (nums: number[]): number => nums.reduce((acc, next) => acc + next, 0);

We want to use the above to produce a single row like this:

{alignedType: AlignedQuote.AlignedEnum.DOWNLOADEDDOCS, hour: 1, day: null, month: null, year: null},

Which can be written like this:

const hours = {
    alignedType: AlignedQuote.AlignedEnum.HOUR,
    hour: sum(selector(quotes, ChronoUnitEnum.HOUR).map(q => pluck(q, AlignedEnum.HOUR))),
    day: null,
    month: null,
    year: null
};

Now we want to produce the above for each hour , day , month and year .

const nulls = {hour: null, day: null, month: null, year: null};
const totals = [
    [AlignedQuote.AlignedEnum.HOUR, ChronoUnitEnum.HOUR],
    [AlignedQuote.AlignedEnum.DAY, ChronoUnitEnum.DAY],
    [AlignedQuote.AlignedEnum.MONTH, ChronoUnitEnum.MONTH],
    [AlignedQuote.AlignedEnum.YEAR, ChronoUnitEnum.YEAR]
].map(([alignedType, unit]: [AlignedQuote.AlignedEnum, ChronoUnitEnum]) => {
    const values = {
        alignedType,
        [unit]: sum(selector(quotes, unit).map(q => pluck(q, alignedType)))
    };
    return {...nulls, ...values};
});

The above only works if the enum values match the letter case of the property fields. Otherwise, you'll have to add functions that convert the enum to a property field name (which is just a simple object map). But, to save time of posting an answer I just modified the enums.

Like this:

export namespace Quote {
    export type ChronoUnitEnum = 'hour' | 'day' | 'month' | 'year';
    export const ChronoUnitEnum = {
        HOUR: 'hour' as ChronoUnitEnum,
        DAY: 'day' as ChronoUnitEnum,
        MONTH: 'month' as ChronoUnitEnum,
        YEAR: 'year' as ChronoUnitEnum
    };
}

export namespace AlignedQuote {
    export type AlignedEnum = 'downloadedDocs' | 'downloadedKb' | 'uploadedKb' | 'uploadedRefs';
    export const AlignedEnum = {
        HOUR: 'downloadedDocs' as AlignedEnum,
        DAY: 'downloadedKb' as AlignedEnum,
        MONTH: 'uploadedKb' as AlignedEnum,
        YEAR: 'uploadedRefs' as AlignedEnum
    };
}

Answer 3

I was able to solve your example with a reduce. You can take a look at the following code (I removed some types for the example). It's not the solution but maybe a good lead.

const quotes = [{
  chronoUnit: 'hour',
  downloadedDocs:1,
  downloadedKb:23,
  uploadedKb:65,
  uploadedRefs:7
}];

const alignedQuotes = [ 
  {alignedType: 'DOWNLOADEDDOCS', hour: 1, day: null, month: null, year: null},
  {alignedType: 'DOWNLOADEDKBS', hour: 23, day: null, month: null, year: null},
  {alignedType: 'UPLOADEDKBS', hour: 65, day: null, month: null, year: null},
  {alignedType: 'UPLOADEDREFS', hour: 7, day: null, month: null, year: null}
]

return quotes.reduce((acc, item) => {
    const quote = Object.keys(item).filter(key => key !== 'chronoUnit').map(key => {
    return {
      alignedType: key.toUpperCase(),
      hour: item['chronoUnit'] === 'hour' ? item[key] : null,
      day: item['chronoUnit'] === 'day' ? item[key] : null,
      month: item['chronoUnit'] === 'month' ? item[key] : null,
      year: item['chronoUnit'] === 'year' ? item[key] : null,
    }
  })
    return acc.concat(quote);
}, []);