What is the process of converting an array of strings into property names at the type level?

Question

What is the process of converting an array of strings into property names at the type level?

Consider this function:

function invert(arr: string[]) {
  let result = {};

  arr.forEach((x, i) => {
    result[x] = i;
  })

  return result; // insert type cast here
}

I am seeking a solution to have intellisense in VSCode indicate the available properties in the resulting object. For instance,

const example = invert(['foo', 'bar', 'baz'])

Desired auto-completion output: https://i.sstatic.net/JzNs5.png

My current approach involves casting result as {[K in T[number]]: K}, where T is an alias for typeof arr. However, this method does not provide auto-completion.

How can I configure TypeScript to achieve this level of detail?

Note that the interface {[name]: number} serves as a simplified example (due to NDA constraints), while the primary focus remains on mapping array elements to property names.

typescript

Answer 1

Answer №1

If you choose to use as const when defining your array, here is a potential solution:

type StringToNumberMap<K extends string, A extends readonly K[]> = {[Key in A[number]]: number}

function reverseMapping<K extends string, A extends readonly K[]>(arr: A): StringToNumberMap<K, A> {
  let result: StringToNumberMap<K, A> = {} as StringToNumberMap<K, A>;

  arr
    .forEach(
      (element: K, index: number) => {
        result[element] = index;
      }
    )

  return result;
}

const sampleArray = ['apple', 'banana', 'carrot'] as const
const mappedValues = reverseMapping(sampleArray)
mappedValues. // access .apple, .banana or .carrot

Answer 2

If you choose to use as const when defining your array, here is a potential solution:

type StringToNumberMap<K extends string, A extends readonly K[]> = {[Key in A[number]]: number}

function reverseMapping<K extends string, A extends readonly K[]>(arr: A): StringToNumberMap<K, A> {
  let result: StringToNumberMap<K, A> = {} as StringToNumberMap<K, A>;

  arr
    .forEach(
      (element: K, index: number) => {
        result[element] = index;
      }
    )

  return result;
}

const sampleArray = ['apple', 'banana', 'carrot'] as const
const mappedValues = reverseMapping(sampleArray)
mappedValues. // access .apple, .banana or .carrot

Answer 3

Answer №2

As previously mentioned in the comments, one approach to achieve this is by making invert a generic function. Currently, arr is limited to being a string[], which is why your mapped type does not function as intended.

function invert<T extends string>(arr: T[]): Record<T, number> {
  let result = {} as Record<T, number>;

  arr.forEach((x, i) => {
    result[x] = i;
  })

  return result
}

This simple generic implementation generates a Record<T, number> where T represents the keys within the array provided.

const example = invert(['foo', 'bar', 'baz'])
// const example: Record<"foo" | "bar" | "baz", number>

Playground

While this method works, there's room for further improvement. Currently, the keys are typed simply as number, even though we can determine exactly which number corresponds to each key.

function invert<T extends string[]>(arr: [...T]): { 
    [K in keyof T & `${bigint}` as T[K] & string]: K extends `${infer N extends number}` ? N : never 
} {
  let result = {} as any;

  arr.forEach((x, i) => {
    result[x] = i;
  })

  return result
}

In this revised implementation, we directly iterate over the elements of T and filter out the number keys. Then, we convert the index K into a number.

The resulting return type is as follows:

const example = invert(['foo', 'bar', 'baz'])
// const example: {
//     foo: 0;
//     bar: 1;
//     baz: 2;
// }

Playground

Answer 4

As previously mentioned in the comments, one approach to achieve this is by making invert a generic function. Currently, arr is limited to being a string[], which is why your mapped type does not function as intended.

function invert<T extends string>(arr: T[]): Record<T, number> {
  let result = {} as Record<T, number>;

  arr.forEach((x, i) => {
    result[x] = i;
  })

  return result
}

This simple generic implementation generates a Record<T, number> where T represents the keys within the array provided.

const example = invert(['foo', 'bar', 'baz'])
// const example: Record<"foo" | "bar" | "baz", number>

Playground

While this method works, there's room for further improvement. Currently, the keys are typed simply as number, even though we can determine exactly which number corresponds to each key.

function invert<T extends string[]>(arr: [...T]): { 
    [K in keyof T & `${bigint}` as T[K] & string]: K extends `${infer N extends number}` ? N : never 
} {
  let result = {} as any;

  arr.forEach((x, i) => {
    result[x] = i;
  })

  return result
}

In this revised implementation, we directly iterate over the elements of T and filter out the number keys. Then, we convert the index K into a number.

The resulting return type is as follows:

const example = invert(['foo', 'bar', 'baz'])
// const example: {
//     foo: 0;
//     bar: 1;
//     baz: 2;
// }

Playground

What is the process of converting an array of strings into property names at the type level?

Answer №1

Answer №2

Similar questions

Using Cypress with Typescript: Extracting values from aliases in cy.origin

Leveraging a Derived-Class Object Within the Base-Class to Invoke a Base-Class Function with Derived-Class Information

Automatically compile files while performing an npm install or update

The reason why Node struggles to resolve the absolute path to a directory post bundling the code using Webpack

Developing a custom React component library using Webpack and Typescript, however encountering issues with Webpack consistently bundling React

Error in Typescript stating that the property 'children' is not found on the imported interface of type 'IntrinsicAttributes & Props'

Typescript KeyboardEvent bug: incorrect initialization of keys

Error: AWS.CognitoIdentityCredentials does not work as a constructor

What is causing this object to become populated only after the second call?

Issues with the Array functionality causing unexpected results to be displayed

Experiencing a type error within Redux in a React Native project utilizing TypeScript

At what juncture is the TypeScript compiler commonly used to generate JavaScript code?

Upgrading from Angular 2 to 4 causes compilation failure in project

What is the best way to define a Typescript type that can be either a string or an HTML element

Exploring nested JSON objects within an array using ngFor directive

Discovering the various categories of TypeScript-compatible JavaScript libraries using an example

An unexpected error occurred while running ng lint in an Angular project

Achieve top-notch performance with an integrated iFrame feature in Angular

Removing a value from a hashmap using Typescript - what is the best way to do it?

Converting a C# Dictionary<string,string> to a TypeScript Map<string,string>