Using generics in Typescript, transform an array of strings into various types and values

Question

Using generics in Typescript, transform an array of strings into various types and values

Enhanced with coding norms

I have obtained an array of fruit values:

const fruitsArray = ["apple", "banana", "peach"] as const;

Utilizing this array as a foundation, I generated types and values in the following manner:

type FruitsType = (typeof fruitsArray)[number]; // "apple" | "banana" | "peach"
type FruitsTypeMap = { [K in FruitsType]: K }; // {apple: "apple", banana: "banana", peach: "peach"}
const fruitsMap: FruitsTypeMap = fruitsArray.reduce(
    (obj, key) => Object.assign(obj, { [key]: key }),
    {} as FruitsTypeMap
); // {apple: "apple", banana: "banana", peach: "peach"}

All functionalities are operating smoothly.

My query is how to create FruitsType, FruitsTypeMap, and fruitsMap from fruitsArray using generics since I have various other arrays resembling fruitsArray.

typescript generics typescript-generics

Answer 1

Answer №1

To simplify your operation, one strategy is to create a single generic function called stringArrToMap(). This function takes an array of strings as input and returns an object where each input string becomes both a key and a value in the output object. Here's how you could implement it:

function stringArrToMap<K extends string>(arr: readonly K[]) {
    return Object.fromEntries(arr.map(k => [k, k])) as { [P in K]: P }
}

I opted to use Object.fromEntries() for a more straightforward implementation. Since there isn't a foolproof way to ensure type safety for all inputs, I utilized a type assertion to inform the compiler that we can treat the returned object as type {[P in K]: P}.

Let's put it to the test:

const fruitsMap = stringArrToMap(["apple", "banana", "peach"]);
/* const fruitsMap: {
    apple: "apple";
    banana: "banana";
    peach: "peach";
} */
console.log(fruitsMap);
/* {
  "apple": "apple",
  "banana": "banana",
  "peach": "peach"
}  */

const otherMap = stringArrToMap(["a", "b", "c", "x", "y", "z"]);
/* const otherMap: {
    a: "a";
    b: "b";
    c: "c";
    x: "x";
    y: "y";
    z: "z";
} */
console.log(otherMap);
/* {
  "a": "a",
  "b": "b",
  "c": "c",
  "x": "x",
  "y": "y",
  "z": "z"
} */

Everything appears to be in order. The types and values align with expectations.

Access Playground link here

Answer 2

To simplify your operation, one strategy is to create a single generic function called stringArrToMap(). This function takes an array of strings as input and returns an object where each input string becomes both a key and a value in the output object. Here's how you could implement it:

function stringArrToMap<K extends string>(arr: readonly K[]) {
    return Object.fromEntries(arr.map(k => [k, k])) as { [P in K]: P }
}

I opted to use Object.fromEntries() for a more straightforward implementation. Since there isn't a foolproof way to ensure type safety for all inputs, I utilized a type assertion to inform the compiler that we can treat the returned object as type {[P in K]: P}.

Let's put it to the test:

const fruitsMap = stringArrToMap(["apple", "banana", "peach"]);
/* const fruitsMap: {
    apple: "apple";
    banana: "banana";
    peach: "peach";
} */
console.log(fruitsMap);
/* {
  "apple": "apple",
  "banana": "banana",
  "peach": "peach"
}  */

const otherMap = stringArrToMap(["a", "b", "c", "x", "y", "z"]);
/* const otherMap: {
    a: "a";
    b: "b";
    c: "c";
    x: "x";
    y: "y";
    z: "z";
} */
console.log(otherMap);
/* {
  "a": "a",
  "b": "b",
  "c": "c",
  "x": "x",
  "y": "y",
  "z": "z"
} */

Everything appears to be in order. The types and values align with expectations.

Access Playground link here

Using generics in Typescript, transform an array of strings into various types and values

Answer №1

Similar questions

A guide on converting TypeScript to JavaScript while utilizing top-level await

Issues arise when attempting to extract data from a data provider using JSON within the context of the Ionic framework

Error message in VsCode plugin stating that property 'X' is not found on type '{}' within a Vue 3 template

Nested arrays in an Angular interface

Creating a concise TypeScript declaration file for an established JavaScript library

The function is trying to access a property that has not been defined, resulting in

Issue with manipulating element styles using jQuery in Angular2

Errors related to missing RxJS operators are occurring in the browser, but are not showing up in Visual Studio

What is the best way to transform an array containing double sets of brackets into a single set of brackets?

Images in the Ionic app are failing to display certain asset files

Extract data from an HTTP request and assign it to variables using filter and map in Angular

Is there a way to increase the level of detail in the error trace provided by tsc? This error trace is

When converting to TypeScript, the error 'express.Router() is not defined' may

Error: Reference to an undeclared variable cannot be accessed. TypeScript, Cordova, iOS platforms

Issue with Moment.js: inability to append hours and minutes to a designated time

Creating HTML elements dynamically with attributes based on the `as` prop in React using TypeScript

A guide on passing variables to the MUI styled function within ReactJS

A guide on incorporating JavaScript variables within a GraphQL-tag mutation

Tips for managing onChange events in TypeScript

What could be causing ESLint to run on its own configuration file while working with Typescript?