What is the process for creating a typed object map using an array of pairs?

Question

What is the process for creating a typed object map using an array of pairs?

Suppose I have an array of pairs as shown below:

const attributes = [
  ['Strength', 'STR'],
  ['Agility', 'AGI'],
  ['Intelligence', 'INT']
  // ..
] as const;

I aim to create a structure like this:

const attributesMap = {
  Strength: {
    name: 'Strength',
    shortName: 'STR',
  },
  Agility: {
    name: 'Agility',
    shortName: 'AGI',
  },
  // ..
};

This structure should be fully typed, ensuring that accessing attributesMap.Strength.shortName will return "STR".

How can we achieve this level of typing?

The approach I've devised so far involves using the following type definition. However, it falls short in properly constraining the shortName property to a specific value:

type mapType = {
  [P in typeof attributes[number][0]]: {
    name: P;
    shortName: typeof attributes[number][1];
  };
};

typescript

Answer 1

Answer №1

You're almost there:

type mapType = {
  [P in typeof attributes[number][0]]: {
    name: P;
    // Add Extract function here
    shortName: Extract<typeof attributes[number], readonly [P, unknown]>[1];
  };
};

This code snippet will output:

type mapType = {
    Strength: {
        name: "Strength";
        shortName: "STR";
    };
    Agility: {
        name: "Agility";
        shortName: "AGI";
    };
    Intelligence: {
        name: "Intelligence";
        shortName: "INT";
    };
}

Answer 2

You're almost there:

type mapType = {
  [P in typeof attributes[number][0]]: {
    name: P;
    // Add Extract function here
    shortName: Extract<typeof attributes[number], readonly [P, unknown]>[1];
  };
};

This code snippet will output:

type mapType = {
    Strength: {
        name: "Strength";
        shortName: "STR";
    };
    Agility: {
        name: "Agility";
        shortName: "AGI";
    };
    Intelligence: {
        name: "Intelligence";
        shortName: "INT";
    };
}

Answer 3

Answer №2

@Coding_Master's response is spot on; I'd like to add a twist by showcasing an approach that leverages TypeScript 4.1's key remapping functionality instead of relying on Extract. Consider this:

const characteristics = [
    ['Strength', 'STR'],
    ['Agility', 'AGI'],
    ['Intelligence', 'INT']
    // ..
] as const;

First, let's assign a name to the type of characteristics for future use, ensuring it only includes numeric literal keys (e.g., 0, 1, 2) and not other array properties like push, pop, etc:

type Traits = Omit<typeof characteristics, keyof any[]>;
/* type Traits = {
    readonly 0: readonly ["Strength", "STR"];
    readonly 1: readonly ["Agility", "AGI"];
    readonly 2: readonly ["Intelligence", "INT"];
} */

With Traits defined, we can now remap using an as clause. For every key I in Traits, Traits[I][0] represents the key/name, while Traits[I][1] corresponds to the shortName:

type MappedTraits = {
    -readonly [I in keyof Traits as Traits[I][0]]: {
        name: Traits[I][0],
        shortName: Traits[I][1]
    }
};

/*
type MappedTraits = {
    Strength: {
        name: "Strength";
        shortName: "STR";
    };
    Agility: {
        name: "Agility";
        shortName: "AGI";
    };
    Intelligence: {
        name: "Intelligence";
        shortName: "INT";
    };
}
*/

(I've also omitted readonly here, but feel free to include it if needed). That's the final outcome you were aiming for!

Playground link for code demo

Answer 4

@Coding_Master's response is spot on; I'd like to add a twist by showcasing an approach that leverages TypeScript 4.1's key remapping functionality instead of relying on Extract. Consider this:

const characteristics = [
    ['Strength', 'STR'],
    ['Agility', 'AGI'],
    ['Intelligence', 'INT']
    // ..
] as const;

First, let's assign a name to the type of characteristics for future use, ensuring it only includes numeric literal keys (e.g., 0, 1, 2) and not other array properties like push, pop, etc:

type Traits = Omit<typeof characteristics, keyof any[]>;
/* type Traits = {
    readonly 0: readonly ["Strength", "STR"];
    readonly 1: readonly ["Agility", "AGI"];
    readonly 2: readonly ["Intelligence", "INT"];
} */

With Traits defined, we can now remap using an as clause. For every key I in Traits, Traits[I][0] represents the key/name, while Traits[I][1] corresponds to the shortName:

type MappedTraits = {
    -readonly [I in keyof Traits as Traits[I][0]]: {
        name: Traits[I][0],
        shortName: Traits[I][1]
    }
};

/*
type MappedTraits = {
    Strength: {
        name: "Strength";
        shortName: "STR";
    };
    Agility: {
        name: "Agility";
        shortName: "AGI";
    };
    Intelligence: {
        name: "Intelligence";
        shortName: "INT";
    };
}
*/

(I've also omitted readonly here, but feel free to include it if needed). That's the final outcome you were aiming for!

Playground link for code demo

Answer 5

Answer №3

You can utilize a recursive type structure as shown below:

type MapType<T extends readonly (readonly [string, unknown])[]> = 
    // if the list can be split into a head and a tail
    T extends readonly [readonly [infer A, infer B], ...infer R]
        // these conditions must hold true, but TypeScript may not recognize it
        ? A extends string ? R extends readonly (readonly [string, unknown])[]
            ? {
                // this represents a single property
                [K in A]: {
                    name: A,
                    shortName: B
                }
            // we intersect with the type recursively applied to the tail
            } & MapType<R>
            // these scenarios should never occur
            : never : never
        // base case, return an empty object
        : {};

Playground link

Alternatively, you can create a type that removes the readonly keyword through recursion:

type RemoveReadonly<T> = T extends readonly unknown[] ? {
    -readonly [K in keyof T]: RemoveReadonly<T[K]>;
} : T;

type MapType<T extends [string, unknown][]> = 
    // if the list can be split into a head and a tail
    T extends [[infer A, infer B], ...infer R]
        // these conditions must hold true, but TypeScript may not recognize it
        ? A extends string ? R extends [string, unknown][]
            ? {
                // this represents a single property
                [K in A]: {
                    name: A,
                    shortName: B
                }
            // we intersect with the type recursively applied to the tail
            } & MapType<R>
            // these scenarios should never occur
            : never : never
        // base case, return an empty object
        : {};

Playground link

Answer 6

You can utilize a recursive type structure as shown below:

type MapType<T extends readonly (readonly [string, unknown])[]> = 
    // if the list can be split into a head and a tail
    T extends readonly [readonly [infer A, infer B], ...infer R]
        // these conditions must hold true, but TypeScript may not recognize it
        ? A extends string ? R extends readonly (readonly [string, unknown])[]
            ? {
                // this represents a single property
                [K in A]: {
                    name: A,
                    shortName: B
                }
            // we intersect with the type recursively applied to the tail
            } & MapType<R>
            // these scenarios should never occur
            : never : never
        // base case, return an empty object
        : {};

Playground link

Alternatively, you can create a type that removes the readonly keyword through recursion:

type RemoveReadonly<T> = T extends readonly unknown[] ? {
    -readonly [K in keyof T]: RemoveReadonly<T[K]>;
} : T;

type MapType<T extends [string, unknown][]> = 
    // if the list can be split into a head and a tail
    T extends [[infer A, infer B], ...infer R]
        // these conditions must hold true, but TypeScript may not recognize it
        ? A extends string ? R extends [string, unknown][]
            ? {
                // this represents a single property
                [K in A]: {
                    name: A,
                    shortName: B
                }
            // we intersect with the type recursively applied to the tail
            } & MapType<R>
            // these scenarios should never occur
            : never : never
        // base case, return an empty object
        : {};

Playground link

What is the process for creating a typed object map using an array of pairs?

Answer №1

Answer №2

Answer №3

Similar questions

Anonymous function bundle where the imported namespace is undefined

The React.FC component encountered an invalid hook call

I'm experiencing issues with my TypeScript compiler within my Next.js v14 project

The combination of TypeScript decorators and Reflect metadata is a powerful tool for

Tips on obtaining a unique value that does not already exist in a specific property within an Array of objects

What factors contribute to the variations in results reported by Eslint on different machines?

Is it possible for TypeScript to automatically detect when an argument has been validated?

What are the steps to implementing MSAL in a React application?

Angular 2 - Initiating a function in a child component from its parent

Steps for integrating the ts component into the index.html file

Receiving an eslint error while trying to integrate Stripe pricing table into a React web application

Experiencing "localhost redirect loop due to NextJS Middleware" error

Using Angular2 to bind HTML markup to a boolean flag and trigger a method when the flag is set

What is the best way to manage data types using express middleware?

Get an angular xml file by utilizing the response from a C# web API download

Enhancing Angular 2 with conditional directives such as #if

Tips for connecting a separate page to a button in Angular?

Developing an attribute in a constructor using Typescript

cdk-virtual-scroll-viewport displays every single element in the list

Retrieve an enumeration from a value within an enumeration