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

Angular 5+ does not have any compatible call signatures for Type Search

Click on the div in Ionic 2 to send a variable

Tips for effectively using ngOnChanges in Angular 2 to validate inputs without causing the 'Expression has changed after it was checked' error

Ionic Vue is throwing an error indicating that a property is not found on the type '{ $route(currentRoute: any): void; }'

HTTP Interceptor never finishes executing (finalization is never triggered)

Tips for simulating or monitoring an external function without an object using Typescript 2 and Jasmine 2 within an Angular 4 application

The default value in an Ionic select dropdown remains hidden until it is clicked for the first time

Can you explain the significance of the colon in this context?

Activate the mat-menu within a child component using the parent component

What is the best way to create three distinct fractions in JavaScript that cannot be simplified?

What is the process for transferring a Pulumi Output<T> to the container definition of a task in ECS?

Module not found in Typescript

Disabling dynamic color updates upon refresh

Tips for expanding third-party classes in a versatile manner using Typescript

Validator for IP addresses in Angular reactive forms

TensorflowJS Error: The property 'fetch' cannot be read as it is undefined

Ways to Access HTTP Request Headers in Angular 6 upon Page Load

Creating interactive forms - Incorporating dynamic checkbox options within the expansion panel element

Ensuring type safety for functions with multiple definitions in TypeScript

When using `JSON.stringify`, the resulting data may vary from the original object