Preserving the length information in Typescript while utilizing the .map method

Question

Preserving the length information in Typescript while utilizing the .map method

Here is the strategy I am currently implementing:

const createMainOrientations = <T extends readonly string[]>(
  mainOrientationsNames: T
): { [Index in keyof T]: Orientation } => {
  const temp: Orientation[] = mainOrientationsNames.map(
    mainOrientationName => ({
      name: mainOrientationName,
      getYear(date) {
        return date.getFullYear()
      },
      getRecordContent: getMainOrientationRecordContent
    })
  )

  return temp as unknown as { [Index in keyof T]: Orientation }
}

const mainOrientations = createMainOrientations([
  "One",
  "Two",
  "Three"
] as const)

Nevertheless, I find myself having to resort to

as unknown as { [Index in keyof T]: Orientation }

, which is not ideal. If not used (even by removing the type assertion from the temp variable), it will result in an error:

Type '{ name: string; getYear(date: any): any; getRecordContent: (values: number[]) => string[]; }[]' is not assignable to type '{ [Index in keyof T]: Orientation; }'.ts(2322)

However, please note that

{ name: string; getYear(date: any): any; getRecordContent: (values: number[]) => string[]; }

corresponds to the definition of Orientation

This signifies that any information regarding length is lost after applying the map function.

Is there a more natural approach to achieve this, without relying on type assertions or at least avoiding the use of as unknown? The aim is to have mainOrientations as a tuple of Orientation items equal in length to the argument provided to createMainOrientations. Therefore, it should be like

[Orientation, Orientation, Orientation]

in this instance, and not Orientation[].

Playground

javascript arrays typescript tuples type-inference

Answer 1

Answer №1

To achieve the desired functionality, you must overload your function:

interface Orientation {
  name: string,
  getYear(date: Date): number,
  getRecordContent(values: number[]): string[]
}

declare function getMainOrientationRecordContent(values: number[]): string[]

function createMainOrientations<T extends string, Tuple extends T[]>(
  mainOrientationsNames: [...Tuple]
): { [Index in keyof Tuple]: Orientation }
function createMainOrientations(
  mainOrientationsNames: string[]
) {
  return mainOrientationsNames.map(
    mainOrientationName => ({
      name: mainOrientationName,
      getYear: (date: Date) => date.getFullYear(),
      getRecordContent: getMainOrientationRecordContent
    })
  )
}

// [Orientation, Orientation, Orientation]
const mainOrientations = createMainOrientations([
  "One",
  "Two",
  "Three"
])

Check out on Playground

It's important to note that when using Array.prototype.map, TypeScript does not maintain the tuple length. You can read more about it here.

Therefore, there are only two options available: overloading and type assertion.

You can enhance the implementation by parameterizing the name property:

interface Orientation<Name extends string> {
  name: Name,
  getYear(date: Date): number,
  getRecordContent(values: number[]): string[]
}

declare function getMainOrientationRecordContent(values: number[]): string[]

function createMainOrientations<T extends string, Tuple extends T[]>(
  mainOrientationsNames: [...Tuple]
): { [Index in keyof Tuple]: Orientation<Tuple[Index] & string> }
function generateMainOrientations(
  mainOrientationsNames: string[]
) {
  return mainOrientationsNames.map<Orientation<string>>(
    name => ({
      name,
      getYear: (date) => date.getFullYear(),
      getRecordContent: getMainOrientationRecordContent
    })
  )
}

// [Orientation<"One">, Orientation<"Two">, Orientation<"Three">]
const mainOrientations = createMainOrientations([
  "One",
  "Two",
  "Three"
])

Answer 2

To achieve the desired functionality, you must overload your function:

interface Orientation {
  name: string,
  getYear(date: Date): number,
  getRecordContent(values: number[]): string[]
}

declare function getMainOrientationRecordContent(values: number[]): string[]

function createMainOrientations<T extends string, Tuple extends T[]>(
  mainOrientationsNames: [...Tuple]
): { [Index in keyof Tuple]: Orientation }
function createMainOrientations(
  mainOrientationsNames: string[]
) {
  return mainOrientationsNames.map(
    mainOrientationName => ({
      name: mainOrientationName,
      getYear: (date: Date) => date.getFullYear(),
      getRecordContent: getMainOrientationRecordContent
    })
  )
}

// [Orientation, Orientation, Orientation]
const mainOrientations = createMainOrientations([
  "One",
  "Two",
  "Three"
])

Check out on Playground

It's important to note that when using Array.prototype.map, TypeScript does not maintain the tuple length. You can read more about it here.

Therefore, there are only two options available: overloading and type assertion.

You can enhance the implementation by parameterizing the name property:

interface Orientation<Name extends string> {
  name: Name,
  getYear(date: Date): number,
  getRecordContent(values: number[]): string[]
}

declare function getMainOrientationRecordContent(values: number[]): string[]

function createMainOrientations<T extends string, Tuple extends T[]>(
  mainOrientationsNames: [...Tuple]
): { [Index in keyof Tuple]: Orientation<Tuple[Index] & string> }
function generateMainOrientations(
  mainOrientationsNames: string[]
) {
  return mainOrientationsNames.map<Orientation<string>>(
    name => ({
      name,
      getYear: (date) => date.getFullYear(),
      getRecordContent: getMainOrientationRecordContent
    })
  )
}

// [Orientation<"One">, Orientation<"Two">, Orientation<"Three">]
const mainOrientations = createMainOrientations([
  "One",
  "Two",
  "Three"
])

Answer 3

Answer №2

If you want to define temp as any

const findMainDirections = <T extends readonly string[]>(
  mainDirectionsNames: T
): { [Index in keyof T]: Direction } => {
  const temp = mainDirectionsNames.map((mainDirectionName) => ({
    name: mainDirectionName,
    getYear(date: Date) {
      return date.getFullYear();
    },
    getContent: getMainDirectionContent
  }));

  return temp as any;
};

Answer 4

If you want to define temp as any

const findMainDirections = <T extends readonly string[]>(
  mainDirectionsNames: T
): { [Index in keyof T]: Direction } => {
  const temp = mainDirectionsNames.map((mainDirectionName) => ({
    name: mainDirectionName,
    getYear(date: Date) {
      return date.getFullYear();
    },
    getContent: getMainDirectionContent
  }));

  return temp as any;
};

Preserving the length information in Typescript while utilizing the .map method

Answer №1

Answer №2

Similar questions

Utilizing Bootstrap and JavaScript/JQuery for enhancing functionality in Android applications

Header buttons not displaying on FullCalendar

How about "Extract information from a database and split it using a specified delimiter?"

transferring information between pages in nextjs

What is the best way to access a variable in one file and then utilize it in multiple other files?

Continuous updates triggered by mouse movement with jQuery

How come my links to the ID sections stop working after the third page?

Error: Unable to access 'target' property as it is undefined in React JS

Setting a blank value or null equivalent to a field: Tips and tricks

"Utilizing Ruby's Regex to perform a search and replace operation

Display a paragraph on a webpage based on the user's response being either true or false

Adding Javascript and CSS files to the document dynamically

Hermes js engine encounters a TypeError when attempting to access the property '__expo_module_name__' of an undefined value

Can all the files in a folder be imported?

Mesh from Three-JS is appearing on the other side of the model

Modifying colors and applying transparency to objects in Three.js (loading from .obj + .mtl files)

Tips for dealing with event bubbling in React

Reloading and redirecting web pages with PHP and Ajax techniques

Is this example a strong demonstration of implementing simple inheritance in JavaScript?

Tips for effectively invoking a method in a Vue component