What is the data type returned by mapping an array in TypeScript?

Question

What is the data type returned by mapping an array in TypeScript?

I am working on a function that handles sorting columns

export const handleSortableColumns = (headerKeys: string[], sortKeys: object): string[] => {
  if (!headerKeys) return [];

  return headerKeys.map((key: string): any => sortKeys[key] || null);
};

The headerKeys parameter accepts a list of strings. The sortKeys parameter is supposed to be an object, but I'm not sure about specifying its type since the properties can be different each time. Should I use generics for this? How can I implement it? Also, the return type should be a list of strings including null values, so what would be the correct return type without using the any keyword?

typescript

Answer 1

Answer №1

To handle the sortKeys, one approach is as follows:

interface ISortKeys {
  [key: string]: string
}

When it comes to the output type, consider using

(string|null)[]

Answer 2

To handle the sortKeys, one approach is as follows:

interface ISortKeys {
  [key: string]: string
}

When it comes to the output type, consider using

(string|null)[]

Answer 3

Answer №2

I made a crucial change by swapping the positions of sortKeys and headerKeys. This adjustment enhances user experience as the type checker can now easily identify the object you are working on. Additionally, I modified headerKeys to be variadic, but if you prefer, it can be reverted back to a standard array.

const handleSortableColumns = <T>(sortKeys: T, ...headerKeys: (keyof T & string)[]): (string | null)[] => {
    if (!headerKeys) return [];
    const result = headerKeys.map(key => sortKeys[key] || null);
    return result as (string | null)[];
}

.

handleSortableColumns({ a: '1', b: 2 }, 'a', 'X');

This now results in a type error. However, it does not prevent scenarios like:

handleSortableColumns({ a: '1', b: 2 }, 'a', 'b');

Introducing more stringent checks for return types can quickly lead to convoluted code. Instead, I suggest utilizing run time checks, such as filter or throw, for better readability and maintainability.

Answer 4

I made a crucial change by swapping the positions of sortKeys and headerKeys. This adjustment enhances user experience as the type checker can now easily identify the object you are working on. Additionally, I modified headerKeys to be variadic, but if you prefer, it can be reverted back to a standard array.

const handleSortableColumns = <T>(sortKeys: T, ...headerKeys: (keyof T & string)[]): (string | null)[] => {
    if (!headerKeys) return [];
    const result = headerKeys.map(key => sortKeys[key] || null);
    return result as (string | null)[];
}

.

handleSortableColumns({ a: '1', b: 2 }, 'a', 'X');

This now results in a type error. However, it does not prevent scenarios like:

handleSortableColumns({ a: '1', b: 2 }, 'a', 'b');

Introducing more stringent checks for return types can quickly lead to convoluted code. Instead, I suggest utilizing run time checks, such as filter or throw, for better readability and maintainability.

Answer 5

Answer №3

By utilizing generic type parameters, you can deduce the types of input values and then utilize these generics to generate an array return type that signifies the subset of values in the object accessible through indexing the values in the input array (or null). Here's a demonstration:

TS Playground

function handleSortableColumns <
  Keys extends readonly string[],
  ValueMap extends Record<string, unknown>,
>(headerKeys: Keys, valueMap: ValueMap): (ValueMap[Extract<keyof ValueMap, Keys[number]>] | null)[] {
  return headerKeys.map(
    key => (valueMap[key] ?? null) as ValueMap[Extract<keyof ValueMap, Keys[number]>] | null
  );
}

const keys = ['a', 'b', 'c'] as const;

const map = {
  a: 1,
  c: false,
  d: 'hello world',
};

const result = handleSortableColumns(keys, map);
    //^? const result: (number | boolean | null)[]

console.log(result); // [1, null, false]

Compiled JS from the TS Playground:

"use strict";
function handleSortableColumns(headerKeys, valueMap) {
    return headerKeys.map(key => (valueMap[key] ?? null));
}
const keys = ['a', 'b', 'c'];
const map = {
    a: 1,
    c: false,
    d: 'hello world',
};
const result = handleSortableColumns(keys, map);
//^?
console.log(result); // [1, null, false]

Answer 6

By utilizing generic type parameters, you can deduce the types of input values and then utilize these generics to generate an array return type that signifies the subset of values in the object accessible through indexing the values in the input array (or null). Here's a demonstration:

TS Playground

function handleSortableColumns <
  Keys extends readonly string[],
  ValueMap extends Record<string, unknown>,
>(headerKeys: Keys, valueMap: ValueMap): (ValueMap[Extract<keyof ValueMap, Keys[number]>] | null)[] {
  return headerKeys.map(
    key => (valueMap[key] ?? null) as ValueMap[Extract<keyof ValueMap, Keys[number]>] | null
  );
}

const keys = ['a', 'b', 'c'] as const;

const map = {
  a: 1,
  c: false,
  d: 'hello world',
};

const result = handleSortableColumns(keys, map);
    //^? const result: (number | boolean | null)[]

console.log(result); // [1, null, false]

Compiled JS from the TS Playground:

"use strict";
function handleSortableColumns(headerKeys, valueMap) {
    return headerKeys.map(key => (valueMap[key] ?? null));
}
const keys = ['a', 'b', 'c'];
const map = {
    a: 1,
    c: false,
    d: 'hello world',
};
const result = handleSortableColumns(keys, map);
//^?
console.log(result); // [1, null, false]

What is the data type returned by mapping an array in TypeScript?

Answer №1

Answer №2

Answer №3

Similar questions

What is the correct way to write SVG markup within SVG tags in a React and NextJS environment?

Concealing the sidebar in React with the help of Ant Design

Leverage the exported data from Highcharts Editor to create a fresh React chart

Angular index.html file can include a conditional script

Using the index in Vue.js to locate a method within an HTML file

In Typescript, you can extend an interface with the Node type to specifically

Can Typescript automatically determine the return type based on the function argument value?

Familial Connection (TYPESCRIPT)

Sorting orders using Firebase

Supporting right-to-left (RTL) localization in Angular 2 and later versions

Converting SASS in real-time using SystemJS

Updating a Parent entity in Prisma with the option to also update its associated Child entity in a

Leveraging observables for loading fbx files in three.js

Error in Angular integrating with Stripe. No definition found for 'Stripe'. Perhaps you meant 'stripe'?

Applying ngClass to a row in an Angular material table

Using *ngFor to dynamically update the DOM when an array is modified via ngrx

Incorporating TypeScript into an established Node.js Express project

Navigate to a different directory within Cypress by utilizing the cy.exec() function

Where can the body of this function be located in Typescript and do the generics serve a practical purpose?

Displaying a list in Angular 2/4 without keeping track of any modifications