Guide to making a custom type by extending a union type in TypeScript

Question

Guide to making a custom type by extending a union type in TypeScript

Looking to define a new structure here

type DataTableCol<T, K extends keyof T> = {
  title: string;
  key: K;
  render?: (value: T[K]) => ReactElement;
};

In need of creating a type called DataTableRow<T> based on the above. For instance, with

type MyData = { name: string; value: number; }

, it should look like this:

type DataTableRow<MyData> = (DataTableCol<MyData, 'name'> | DataTableCol<MyData, 'value'>)[]

This will essentially involve an array of multiple types, customized for each property in T using generics for reusability purposes. Is it achievable?

typescript generics union keyof

Answer 1

Answer №1

To implement a distributive conditional type in TypeScript, you can utilize the following code snippet:

type DataTableCol<T, K extends keyof T> = {
  title: string;
  key: K;
  render?: (value: T[K]) => any;
};

type Distribute<T, K> = K extends keyof T ? DataTableCol<T, K> : never;

type DataTableRow<T> = (Distribute<T, keyof T>)[];

type MyData = { name: string; value: number; };

type Foo = DataTableRow<MyData>;
// (DataTableCol<MyData, "name"> | DataTableCol<MyData, "value">)[]

Try it out on TypeScript Playground

Answer 2

To implement a distributive conditional type in TypeScript, you can utilize the following code snippet:

type DataTableCol<T, K extends keyof T> = {
  title: string;
  key: K;
  render?: (value: T[K]) => any;
};

type Distribute<T, K> = K extends keyof T ? DataTableCol<T, K> : never;

type DataTableRow<T> = (Distribute<T, keyof T>)[];

type MyData = { name: string; value: number; };

type Foo = DataTableRow<MyData>;
// (DataTableCol<MyData, "name"> | DataTableCol<MyData, "value">)[]

Try it out on TypeScript Playground

Guide to making a custom type by extending a union type in TypeScript

Answer №1

Similar questions

React and TypeScript are not compatible - there is no overload that matches this call

What steps should I take to resolve the 'invalid mime type' issue while transmitting an image as a binary string to Stability AI via Express?

Saving JSON data in a variable or array post subscription: What's the preferred method?

Is there a way to utilize reflection for accessing C data structures in C++ in a generic manner?

Dealing with the issue of incompatible types in TypeScript with Vue 3 and Vuetify: How to handle numbers that are not assignable to type Readonly<any

Issue with rendering Base64 image array strings in FlatList component in React Native

The identifier 'before' could not be located

Transforming the elements within an array of objects into individual key-value pairs and then adding them to a fresh array

How can I save a TypeScript object to Firebase using serialization?

An error occurred with the datepicker: Unable to connect to 'bsValue' as it is not recognized as a property of 'input'

Combine form data from a reactive form into a string using interpolation

Cypress - Ensuring selective environment variables are committed to source control

Developing an Angular directive that accepts a function parameter using TypeScript

Angular's getter value triggers the ExpressionChangedAfterItHasBeenCheckedError

Implement tooltip functionality in ssr chart using echarts

Tips for successfully passing store state as a prop in React-Redux with TypeScript

Exploring the Power of Vercel Deployment: Crafting a Custom CORS Middleware for Your API

Utilizing Conditional Aurelia Validation Based on Element's Display Status

Is there a way to ensure that the return type of a generic function is always optional in Typescript?

combine two separate typescript declaration files into a single package