Utilizing Pick to define a type that is a combination of multiple types

Question

Utilizing Pick to define a type that is a combination of multiple types

I am currently working on simplifying an existing interface by creating a new type. The original type is derived from @mui/x-data-grid and is as follows:

export declare type GridEnrichedColDef<R extends GridValidRowModel = any, V = any, F = V> = GridColDef<R, V, F> | GridActionsColDef<R, V, F>;

The properties that I want to include in the new type are:

export type SupportedColumnProps =
  | 'field'
  | 'headerName'
  | 'width'
  | 'renderCell'
  | 'valueFormatter'
  | 'flex'
  | 'sortable'
  | 'hide'
  | 'type'
  | 'cellClassName';

In addition, I want to support the getActions property if the type property is set to 'actions'. However, I am facing an issue in defining the type to recognize that it should allow getActions only when the type is set to 'actions'.

How can I simplify the interface and provide default values for this new type?

Thank you!

Update 1/30/2023

Based on @Oblosys's response, I have updated the type definition as follows:

export type SupportedColumnProps =
  | 'field'
  | 'headerName'
  | 'width'
  | 'renderCell'
  | 'renderHeader'
  | 'valueFormatter'
  | 'flex'
  | 'sortable'
  | 'hide'
  | 'type'
  | 'cellClassName'
  | 'editable'
  | 'getActions'
  | 'valueOptions';

// Reference: https://stackoverflow.com/questions/75271774/creating-a-type-using-pick-with-a-type-that-is-defined-as-a-union-of-types/75290368#75290368
type KeyOfUnion<T> = T extends unknown ? keyof T : never;
type PickUnion<T, K extends KeyOfUnion<T>> = T extends unknown
  ? K & keyof T extends never
    ? never
    : Pick<T, K>
  : never;
export type GridColumn = PickUnion<GridEnrichedColDef, SupportedColumnProps> & { enableColumnMenu?: boolean };

However, I am now encountering an issue where if I define a column without the type or getActions properties, it does not satisfy the defined type. For example:

const column: GridColumn = {
  field: 'hello'
}

https://i.sstatic.net/Ngdwg.png

typescript material-ui mui-x

Answer 1

Answer №1

When dealing with a union and applying the Pick method, there are some nuances to consider. One challenge arises from the K extends keyof T constraint of Pick, where keyof only returns keys that are common in all union members. This means you cannot select a property that exists in only some of the union members. Additionally, applying Pick to a union results in a single object with union property values rather than a union of objects. For example,

Pick<{a: number} | {a: string}, 'a'>

gives {a: number | string} instead of {a: number} | {a: string}.

To address this issue, you can use a dummy extends clause to create a distributive conditional type that applies keyof to each union member and merges the results:

type KeyOfUnion<T> = T extends unknown ? keyof T : never

type Test = KeyOfUnion<{a: number, b: boolean} | {b: string, c: symbol}>
// type Test = "a" | "b" | "c"

By incorporating KeyOfUnion in the constraint, you can utilize another distributive conditional type to employ Pick on each union member while using an intersection to select only relevant keys:

type PickUnionNaive<T, K extends KeyOfUnion<T>> =
  T extends unknown ? Pick<T, K & keyof T> : never

type Test = PickUnionNaive<{a: number, b: boolean} | {a: string}, 'a'>
// type Test = PickUnionNaive<{a: number, b: boolean}, "a"> | PickUnion<{a: string}, "a">
// resulting in: {a: number} | {a: string}

Nevertheless, this approach encounters issues with keys that are not shared among all union members, leading to empty {} types in the union when using never as the key parameter:

type Test = PickUnionNaive<{a: number, b: boolean} | {a: string}, 'b'>
// type Test = Pick<{a: number, b: boolean}, "b"> | Pick<{a: string}, never>
// resulting in: {b: boolean} | {}

This situation essentially turns the resulting union into {}, allowing any type to be assigned. To eliminate the empty objects, an additional conditional statement can be included to return never if the intersection between the keys to pick and the keys of the union member is empty. This leads to the revised definition of PickUnion:

type PickUnion<T, K extends KeyOfUnion<T>> =
  T extends unknown
  ? K & keyof T extends never ? never : Pick<T, K & keyof T>
  : never

type Test = PickUnion<{a: number, b: boolean} | {a: string}, 'b'>
// type Test = {b: boolean}

Explore this example on TypeScript playground

Answer 2

When dealing with a union and applying the Pick method, there are some nuances to consider. One challenge arises from the K extends keyof T constraint of Pick, where keyof only returns keys that are common in all union members. This means you cannot select a property that exists in only some of the union members. Additionally, applying Pick to a union results in a single object with union property values rather than a union of objects. For example,

Pick<{a: number} | {a: string}, 'a'>

gives {a: number | string} instead of {a: number} | {a: string}.

To address this issue, you can use a dummy extends clause to create a distributive conditional type that applies keyof to each union member and merges the results:

type KeyOfUnion<T> = T extends unknown ? keyof T : never

type Test = KeyOfUnion<{a: number, b: boolean} | {b: string, c: symbol}>
// type Test = "a" | "b" | "c"

By incorporating KeyOfUnion in the constraint, you can utilize another distributive conditional type to employ Pick on each union member while using an intersection to select only relevant keys:

type PickUnionNaive<T, K extends KeyOfUnion<T>> =
  T extends unknown ? Pick<T, K & keyof T> : never

type Test = PickUnionNaive<{a: number, b: boolean} | {a: string}, 'a'>
// type Test = PickUnionNaive<{a: number, b: boolean}, "a"> | PickUnion<{a: string}, "a">
// resulting in: {a: number} | {a: string}

Nevertheless, this approach encounters issues with keys that are not shared among all union members, leading to empty {} types in the union when using never as the key parameter:

type Test = PickUnionNaive<{a: number, b: boolean} | {a: string}, 'b'>
// type Test = Pick<{a: number, b: boolean}, "b"> | Pick<{a: string}, never>
// resulting in: {b: boolean} | {}

This situation essentially turns the resulting union into {}, allowing any type to be assigned. To eliminate the empty objects, an additional conditional statement can be included to return never if the intersection between the keys to pick and the keys of the union member is empty. This leads to the revised definition of PickUnion:

type PickUnion<T, K extends KeyOfUnion<T>> =
  T extends unknown
  ? K & keyof T extends never ? never : Pick<T, K & keyof T>
  : never

type Test = PickUnion<{a: number, b: boolean} | {a: string}, 'b'>
// type Test = {b: boolean}

Explore this example on TypeScript playground

Utilizing Pick to define a type that is a combination of multiple types

Update 1/30/2023

Answer №1

Similar questions

issue with visibility of checkbox in material ui table row

Tips for displaying only the initial 15 characters of a text value

Enhancing React MaterialUI Theming: Boosting Transition Duration for Theme Switching

Angular: Initiate multiple functions simultaneously and combine results afterwards

Please refrain from utilizing MUI - useGridRootProps outside of the DataGrid/DataGridPro component

Is it possible to assign a string literal type as a key in TypeScript mappings?

Arrange photos in a grid using React Dropzone uploaders

What is the process for sending JSON data in a file to a django rest api?

Unfulfilled expectation of a promise within an array slipping through the cracks of a for loop

ngOnInit unable to properly listen to event stream

Having trouble pushing data to a GraphQL database from my Next.js application

Having an issue with TypeScript and React where the onChange event on the <select> element is only setting the previous value instead of the current value when using the useState hook

Deep Dive into TypeScript String Literal Types

What is the proper way to define a new property for an object within an npm package?

The Art of Typing in TypeScript Classes

Incorporate a tooltip feature for enhancing user experience with filtering on Mui

Which is better for a React app theme: using material-ui makeStyles or SCSS architecture?

How to implement automatic scrolling to the bottom of a div in React

Top method for changing Enum to Set in TypeScript

Uncover the solution to eliminating webpack warnings associated with incorporating the winston logger by utilizing the ContextReplacementPlugin