Develop a set of matching key/value pairs using TypeScript

Question

Develop a set of matching key/value pairs using TypeScript

Looking to develop a custom data type where InputKeys will serve as the keys, and the values will be key/value pairs. The keys should correspond to InputFieldKey, with the value being a string.

My current progress includes {[key: string]: string}, but I need the key in this context to relate to the main key.

I've successfully established a parent-child relationship using <Record, for the parent part. However, I am struggling with constructing the child part which necessitates another layer of parent/child connections.

There could be varying numbers of ???InputFieldKeys, each containing multiple fields beyond just 3 like (firstName, lastName, ..., ...)

I am open to adjusting the code as needed to achieve the desired structure, and potentially utilizing generics if beneficial.

type InputKeys = 'user' | 'building'

type UserInputFieldKey = 'firstName' | 'lastName' | 'age'
type AddressInputFieldKey = 'line1' | 'line2' | 'zip'

type InputError = Record<InputKeys, {[key: string]: string}>

const errors: InputError = {
  user: {
    firstName: 'First name must be entered',
  },
  address: {},
}

Guidance on this matter would be greatly appreciated.

typescript

Answer 1

Answer №1

If you were to manually perform this task, it seems like the structure you're aiming for is as follows:

interface InputErrorManual {
    user: {
        firstName?: string;
        lastName?: string;
        age?: string;
    },
    address: {
        line1?: string;
        line2?: string;
        age?: string;
    }
}

You have the option to do it that way.

If you prefer the compiler to handle it programmatically, then you must specify the parent/child relationship in a mapping type, such as shown below:

type InputKeyMapping = {
    user: "firstName" | "lastName" | "age";
    address: "line1" | "line2" | "zip"
}

You can utilize a mapped type to transform this into the desired structure:

type InputError = {
    [K in keyof InputKeyMapping]: Partial<Record<InputKeyMapping[K], string>>
};

You can confirm that this matches the structure of InputErrorManual.

Now, let's put them to the test:

const goodErrors: InputError = {
    user: {
        firstName: 'First name must be entered',
    },
    address: {},
}; // should work fine

const badErrors: InputError = {
    user: {
        lastName: "bad name",
        line1: "oops" // error!
    },
    address: {
        line1: "bad line",
        age: "oops" // error!
    }
}

Whether using manual or programmatic mapping is more suitable for your scenario, both methods should serve your needs equally well.

Hopefully, this information proves helpful; best of luck!

Playground link to code

Answer 2

If you were to manually perform this task, it seems like the structure you're aiming for is as follows:

interface InputErrorManual {
    user: {
        firstName?: string;
        lastName?: string;
        age?: string;
    },
    address: {
        line1?: string;
        line2?: string;
        age?: string;
    }
}

You have the option to do it that way.

If you prefer the compiler to handle it programmatically, then you must specify the parent/child relationship in a mapping type, such as shown below:

type InputKeyMapping = {
    user: "firstName" | "lastName" | "age";
    address: "line1" | "line2" | "zip"
}

You can utilize a mapped type to transform this into the desired structure:

type InputError = {
    [K in keyof InputKeyMapping]: Partial<Record<InputKeyMapping[K], string>>
};

You can confirm that this matches the structure of InputErrorManual.

Now, let's put them to the test:

const goodErrors: InputError = {
    user: {
        firstName: 'First name must be entered',
    },
    address: {},
}; // should work fine

const badErrors: InputError = {
    user: {
        lastName: "bad name",
        line1: "oops" // error!
    },
    address: {
        line1: "bad line",
        age: "oops" // error!
    }
}

Whether using manual or programmatic mapping is more suitable for your scenario, both methods should serve your needs equally well.

Hopefully, this information proves helpful; best of luck!

Playground link to code

Develop a set of matching key/value pairs using TypeScript

Answer №1

Similar questions

The Angular 2 UI is unable to successfully connect with the controller through the API call

Implementing the handling of multiple button events in a ListView through onclick function

Enabling CORS header 'Access-Control-Allow-Origin' in Angular 2 using Typescript

The subsequent code still running even with the implementation of async/await

Tips for sending props, state, or arguments to a TypeScript React component

Bringing in AuthError with TypeScript from Firebase

Command to update a document in AWS DynamoDB using the Document Client

When using tsdx with React, null values can prevent proper usage of hooks

Error: Gulp is using ts-node and returning 'void' instead of 'Task', but it cannot find the type 'Task'

Guide to Setting Up "Remember Me" Login for Users in Angular

Are optional parameters in TypeScript distinct from parameters that have the ability to be undefined?

When utilizing Angular 2, this message is triggered when a function is invoked from the Observable

What is the reason for TypeScript not displaying a type mismatch error in this particular instance?

Learn How to Implement Styling in Material UI using Styled Components

The name 'BrowseAnimationModule' cannot be located

Creating a generic component map resolver for flexible applications

Unexpected behavior encountered when using TypeScript type declarations

Unable to resolve every parameter

Dealing with null-safe operators issues has been a challenge for me, especially while working on my Mac using

An unusual error occurred stating that the `forEach` property does not exist on the given type