Creating a custom utility type in TypeScript for serializing an array of objects: What you need to know

Question

Creating a custom utility type in TypeScript for serializing an array of objects: What you need to know

Imagine I have the following specified object:

type Test = {
  date: Date
  num: number
  str: string
}

In this object, there is a Date type that needs to be converted into a string ("serialized"). To achieve this, I came up with the concept of a Generic Type as shown below:

type Serializer<T extends {[key: string]: unknown}> = {
  [key in keyof T]: T[key] extends Date ? string : T[key]
}

This Generic Type performs the task effectively. You can experiment with it on this playground link.

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

Now, if I have a type of Test[], what kind of generic type could help me "serialize" this particular data structure?

typescript typescript-generics

Answer 1

Answer №1

If you want to create a serializer that can handle an array as input, you will need to define a custom ArrayElement type that can determine the type of elements in the array.

Your serializer will then have two generic types: the array (A) and the array element (T) which is represented by ArrayElement<A>

Here is an example:

type ArrayElement<A> = A extends readonly (infer T)[] ? T : never;

type Serializer<A extends Array<{ [key: string]: unknown }>, T = ArrayElement<A> > = {
  [key in keyof T]: T[key] extends Date ? string : T[key];
};

type Result = Serializer<Test>
//  type Result = {
//     date: string;
//     num: number;
//     str: string;
// }

Edit: It is possible to condense the ArrayElement type into one line, but it may make the code harder to read.

type Serializer<A extends Array<{ [key: string]: unknown }>, T = A extends readonly (infer T)[] ? T : never > = {
  [key in keyof T]: T[key] extends Date ? string : T[key];
};

Answer 2

If you want to create a serializer that can handle an array as input, you will need to define a custom ArrayElement type that can determine the type of elements in the array.

Your serializer will then have two generic types: the array (A) and the array element (T) which is represented by ArrayElement<A>

Here is an example:

type ArrayElement<A> = A extends readonly (infer T)[] ? T : never;

type Serializer<A extends Array<{ [key: string]: unknown }>, T = ArrayElement<A> > = {
  [key in keyof T]: T[key] extends Date ? string : T[key];
};

type Result = Serializer<Test>
//  type Result = {
//     date: string;
//     num: number;
//     str: string;
// }

Edit: It is possible to condense the ArrayElement type into one line, but it may make the code harder to read.

type Serializer<A extends Array<{ [key: string]: unknown }>, T = A extends readonly (infer T)[] ? T : never > = {
  [key in keyof T]: T[key] extends Date ? string : T[key];
};

Creating a custom utility type in TypeScript for serializing an array of objects: What you need to know

Answer №1

Similar questions

Encountering an error in Chrome where the property 'command' is undefined

Exploring the concept of union return types in TypeScript

Warning in Typescript: potential undefined access detected when strict mode is enabled

Removing excess space at the bottom of a gauge chart using Echarts

Ways to extract link value in Angular

Can you please explain the significance of classes <T> and <U> in Angular 2?

How Can I Build a Dynamic Field Form Builder in Angular 4?

Associative TypeScript Arrays

Create the accurate data format rather than a combination in GraphQL code generation

Dealing with null-safe operators issues has been a challenge for me, especially while working on my Mac using

Determine the output type of a function in Typescript using an input value specified by an enum

Nested forwardRef in React is a powerful feature that allows

Adjusting table to include hashed passwords for migration

Exploring the capabilities of Vue combined with Typescript and Audio Worklets

openapi-generator is generating subpar api documentation for TypeScript

Dynamic addition of script to <head> element in Angular is a common task for many developers

Issue with Authentication - Sequencing of Observables and Promises in Angular/REST APIs

React TypeScript - creating a component with a defined interface and extra properties

Unleashing the power of storytelling with React: A guide to creating dynamic story

Having issues with inline conditional statements in Angular 5