Modify interface property type based on another property

Question

Modify interface property type based on another property

Currently, I am tackling a grid project in React and have come across specific types and interfaces (view code here):

export type DataGridColumnType = 'currency' | 'date' | 'number' | 'text';

interface CurrencyColumnOptions {
  symbol: string;
}

interface DateColumnOptions {
  format: string;
}

interface NumberColumnOptions {
  decimalPoint: string;
  thousandSeparator: string;
}

type TextColumnOptions = {};

export interface DataGridColumn {
  field: string;
  label: string;
  title: string;
  columnOptions?: {}; // either CurrencyColumnOptions, DateColumnOptions, NumberColumnOptions or TextColumnOptions based on the "type" property
  type?: DataGridColumnType;
}

export interface DataGrid {
  columns: DataGridColumn[];
  rows: Record<string, unknown>[];
}

const column: DataGridColumn = {
  field: 'id',
  label: 'ID',
  title: 'ID',
  type: 'date',
  columnOptions: {
    format: 'YYYY-mm-dd',
  },
};

My objective is to switch the type of the "columnOptions" property in "DataGridColumn" based on the value of "type". For instance, when "type" is "date", I want to utilize DateColumnOptions for the "columnOptions" property.

I understand that utilizing a generic could be a solution, but these interfaces are buried deep within my grid system, and introducing a generic might complicate the grid usage.

Researching this issue has not yielded definitive results. Can this be achieved, or must I create multiple interfaces and apply union types?

Your insights would be greatly appreciated.

typescript

Answer 1

Answer №1

When you need to restrict two or more properties of an object type in a specific way, you can achieve this by either creating a union of acceptable configurations for that object type or using a generic type where the constrained properties are dependent on the generic type parameter.

In the given scenario, the type property is a string literal that determines the type of the columnOptions property. This situation is a perfect fit for a discriminated union, with type acting as the discriminant.

Keep in mind that an interface cannot be a union type; if you want DataGridColumn to be a discriminated union, you will have to use a type alias instead. While this change is acceptable, there are some key differences between type aliases and interfaces to consider.

Instead of manually enumerating all configurations of DataGridColumn, you can refactor the code and utilize type manipulation techniques to define DataGridColumn without redundancy:

// Refactored approach
type DataGridColumnType = keyof DataGridColumnOptions;

type DataGridColumn = { [K in DataGridColumnType]: BaseDataGridColumn & {
  type: K,
  columnOptions?: DataGridColumnOptions[K]
}}[DataGridColumnType]

By following this refactored approach, you can define DataGridColumn in terms of non-redundant types and leverage type mapping to achieve the desired discriminated union.

If this solution aligns with your requirements, great! There are further optimizations and adjustments that can be made, but those can be explored as needed.

Answer 2

When you need to restrict two or more properties of an object type in a specific way, you can achieve this by either creating a union of acceptable configurations for that object type or using a generic type where the constrained properties are dependent on the generic type parameter.

In the given scenario, the type property is a string literal that determines the type of the columnOptions property. This situation is a perfect fit for a discriminated union, with type acting as the discriminant.

Keep in mind that an interface cannot be a union type; if you want DataGridColumn to be a discriminated union, you will have to use a type alias instead. While this change is acceptable, there are some key differences between type aliases and interfaces to consider.

Instead of manually enumerating all configurations of DataGridColumn, you can refactor the code and utilize type manipulation techniques to define DataGridColumn without redundancy:

// Refactored approach
type DataGridColumnType = keyof DataGridColumnOptions;

type DataGridColumn = { [K in DataGridColumnType]: BaseDataGridColumn & {
  type: K,
  columnOptions?: DataGridColumnOptions[K]
}}[DataGridColumnType]

By following this refactored approach, you can define DataGridColumn in terms of non-redundant types and leverage type mapping to achieve the desired discriminated union.

If this solution aligns with your requirements, great! There are further optimizations and adjustments that can be made, but those can be explored as needed.

Answer 3

Answer №2

It may not be exactly what you had in mind, but it could be helpful.

One way to declare a variable is by using the typeof keyword.

let variable1: string = 'asd';
let variable2: typeof variable1; // variable2 is a string

For more information, check out https://www.typescriptlang.org/docs/handbook/2/typeof-types.html

Answer 4

It may not be exactly what you had in mind, but it could be helpful.

One way to declare a variable is by using the typeof keyword.

let variable1: string = 'asd';
let variable2: typeof variable1; // variable2 is a string

For more information, check out https://www.typescriptlang.org/docs/handbook/2/typeof-types.html

Answer 5

Answer №3

To create a versatile interface, consider implementing IColumnType to house shared data among various types. By doing so, you enable the flexibility to assign any type to columnOptions as long as it adheres to the IColumnType interface.

Alternatively

Another approach is to utilize generic programming. Here is an example:

export interface DataGridColumn<T>{
  field: string;
  label: string;
  title: string;
  columnOptions?: T;
  component?: React.ReactNode;
  type?: DataGridColumnType;
}

Implement it as follows:

let dgc = new {
  ...
} as DataGridColumn<DataGridColumnType>;

Answer 6

To create a versatile interface, consider implementing IColumnType to house shared data among various types. By doing so, you enable the flexibility to assign any type to columnOptions as long as it adheres to the IColumnType interface.

Alternatively

Another approach is to utilize generic programming. Here is an example:

export interface DataGridColumn<T>{
  field: string;
  label: string;
  title: string;
  columnOptions?: T;
  component?: React.ReactNode;
  type?: DataGridColumnType;
}

Implement it as follows:

let dgc = new {
  ...
} as DataGridColumn<DataGridColumnType>;

Modify interface property type based on another property

Answer №1

Answer №2

Answer №3

Similar questions

Having trouble getting the styles property to work in the component metadata in Angular 2?

Issues arise in TypeScript 5.1.3 with lodash due to type errors involving excessively deep type instantiation, which may potentially be infinite

What is the process for including a new attribute to the Component in the _app.tsx file when using Next.js along with Typescript?

What is the process of creating an asynchronous function that will resolve a promise when the readline on('close') event is triggered within it in Typescript?

When a property is designated as readonly in a TypeScript class, it can still be modified despite its intended

What is the process for importing a map from an external JSON file?

Choose a specific div element from a collection of dynamically generated divs in Angular

Instructions on how to present a list of employee information according to the user's gender preference using a selection of three radio buttons

The 'Set-Cookie' response header failed to be recognized for a subsequent HTTP request

A guide to utilizing the spread operator within a typescript tuple

I'm diving into the world of Typescript and trying to figure out how to use tooltips for my d3 stacked bar chart. Any guidance on implementing mouseover effects in Typescript would be greatly

Angular failing to retrieve URL parameters correctly

Issue with type narrowing and `Extract` helper unexpectedly causing type error in a generic type interaction

What is an example of an array attribute within a generic class?

Angular 2 does not recognize the existence of .then in type void

The Typescript hello world example encounters an issue with Karma

Dynamically incorporating validation to an ngModel input

Could the selection determine if a value is exported?

Utilizing external imports in webpack (dynamic importing at runtime)

Unable to utilize the namespace 'RouteComponentProps' as a specified type