What is the best way to design a type that exclusively allows for a list of properties from a different type?

Question

What is the best way to design a type that exclusively allows for a list of properties from a different type?

My current challenge involves creating a "FormField" generic type that will only accept a tuple of properties' names/values from a specified type, along with additional properties like "checked".

For instance:

const formProperties: FormField<User> = [{name: "name", value: "Toto", checked: false}, {name: "age", value: 30, checked: true}]` with User defined as `interface User { name: string; age: number;}` or `const formProperties: FormField<House> = [{name: "width", value: 100, checked: true}, {name: "height", value: 50, checked: false}]` with House defined as: `interface House { width: number; height: number; }

I am aware that I could simply use:

{name: string; value: string | number | CustomType }[]

but that approach limits the ability to determine the type of "value".

Attempts with mapped types have not yielded success either.

type FormField<T> = {[Property in keyof T]: T[Property]};

typescript types

Answer 1

Answer №1

Resolution

type FormDataFieldItem<T, Key extends keyof T> = {
  field: Key;
  data: T[Key];
  isSelected: boolean;
}

type FormDataField<T> = {
  [K in keyof T]: FormDataFieldItem<T, K>;
}[keyof T][];

What is the process here?

To simplify the structure, I have separated a single list item into its own type called FormDataFieldItem. This organization not only enhances readability but also provides flexibility for future modifications.
The FormDataFieldItem type requires two generic parameters:

T: represents the complete object for mapping the specified Key type
Key: maps the type of the field property and the type of the data property

We utilize the FormDataFieldItem type within our FormDataField type to initially create a new object by pairing each key of the object (T) with the respective FormDataFieldItem. Subsequently, we iterate through all keyof T's to generate a Union of all probable FormDataFieldItem's. Ultimately, we anticipate a list comprising these unions (indicated by the final []).

Is it functional?

You can validate this using the values you provided in your explanation. Interactive TypeScript Playground link

interface Person { name: string; age: number; }

const formDataFields: FormDataField<Person> = [
  // valid
  { field: "name", data: "John", isSelected: true },
  // valid
  { field: "age", data: 25, isSelected: false },
  // invalid
  { field: "name", data: 30, isSelected: true },
];

Answer 2

Resolution

type FormDataFieldItem<T, Key extends keyof T> = {
  field: Key;
  data: T[Key];
  isSelected: boolean;
}

type FormDataField<T> = {
  [K in keyof T]: FormDataFieldItem<T, K>;
}[keyof T][];

What is the process here?

To simplify the structure, I have separated a single list item into its own type called FormDataFieldItem. This organization not only enhances readability but also provides flexibility for future modifications.
The FormDataFieldItem type requires two generic parameters:

T: represents the complete object for mapping the specified Key type
Key: maps the type of the field property and the type of the data property

We utilize the FormDataFieldItem type within our FormDataField type to initially create a new object by pairing each key of the object (T) with the respective FormDataFieldItem. Subsequently, we iterate through all keyof T's to generate a Union of all probable FormDataFieldItem's. Ultimately, we anticipate a list comprising these unions (indicated by the final []).

Is it functional?

You can validate this using the values you provided in your explanation. Interactive TypeScript Playground link

interface Person { name: string; age: number; }

const formDataFields: FormDataField<Person> = [
  // valid
  { field: "name", data: "John", isSelected: true },
  // valid
  { field: "age", data: 25, isSelected: false },
  // invalid
  { field: "name", data: 30, isSelected: true },
];

What is the best way to design a type that exclusively allows for a list of properties from a different type?

Answer №1

Resolution

What is the process here?

Is it functional?

Similar questions

Tips for selecting specific types from a list using generic types in TypeScript

Visual Studio encountering an error with AngularJS TypeScript integration

When working with the Sequelize-Typescript One To Many Association and Repository, a situation may arise where the query returns only one child entity even though there are multiple

Authentication checkpoint within an Angular application using a JWT cookie

Is it possible to transform a webpack bundled javascript file into typescript source code?

angular2 and ionic2 encounter issues when handling requests with observable and promises

A guide on transforming JSON data to an array format where nested arrays are encapsulated within objects using curly braces instead of square brackets in TypeScript

During the process of running mocha tests, an error is encountered stating that a "reflect-metadata shim is necessary when utilizing class decorators."

The compilation time of Webpack and Angular 2

Can the internal types be accessed through Assembly.GetExportedTypes()?

Angular: use an icon in place of text

Is there a TypeScript equivalent to NSUserDefaults or SharedPreferences?

Error Encountered: Unable to locate angular/core module in Angular 2

Trying to automatically select a checkbox upon page load in Angular 6

Ignore a directory during TypeScript compilation

Angular: Retrieving the Time Format from the Browser

Is it possible to dynamically assign a CSS class to a DOM element during a drag operation while the mouse button is held down?

How can you verify the data type of an object without resorting to type guarding

Tips on utilizing JavaScript to retrieve all HTML elements that have text within them, then eliminating the designated element and its descendants

Inserting a pause between a trio of separate phrases