What is the reason behind the failure of this RecursivePartial implementation to properly handle Dates?

Exploring the topic of implementing a recursive partial in typescript, a question on Stack Overflow sparked some interesting discussions. The answers provided seemed promising, but upon further examination, the latest answer pointed out their incompleteness.

To delve deeper into this issue, let's consider three proposed solutions:

//Solution A
type SolutionA<T> = {
    [P in keyof T]?: SolutionA<T[P]>;
};

//Solution B
type SolutionB<T> = {
  [P in keyof T]?:
    T[P] extends (infer U)[] ? SolutionB<U>[] :
    T[P] extends object ? SolutionB<T[P]> :
    T[P];
};

//Solution C
type SolutionC<T> = {
    [P in keyof T]?:
    T[P] extends Array<infer U> ? Array<Value<U>> : Value<T[P]>;
};
type AllowedPrimitives = boolean | string | number | Date /* add any types than should be considered as a value, say, DateTimeOffset */;
type Value<T> = T extends AllowedPrimitives ? T : SolutionC<T>;

An example is provided to demonstrate that Solutions A and B fall short:

type TT = { dateValue: Date }
const x1: SolutionA<TT> = { dateValue: "0" } // allowed unexpectedly
const x2: SolutionB<TT> = { dateValue: "0" } // allowed unexpectedly
const x3: SolutionC<TT> = { dateValue: "0" } // correctly disallowed by TypeScript

This raises questions about the necessity for manual inclusion of exceptions like Maps and Sets when creating a recursive partial. Are there common characteristics among these 'exceptional' types? Is there a concern about potential new exceptions arising that require adding to the list?

Answer №1

To properly address each native data type (such as Date, Map, Set, etc.), you would need to handle them individually, in a manner similar to the following:

Type NonAny = number | boolean | string | symbol | null;
Type DeepPartial<T> = {
  [P in keyof T]?: T[P] extends NonAny[] // checks for nested any[]
    ? T[P]
    : T[P] extends ReadonlyArray<NonAny> // checks for nested ReadonlyArray<any>
    ? T[P]
    : T[P] extends Date // checks for Date
    ? T[P]
    : T[P] extends (infer U)[]
    ? DeepPartial<U>[]
    : T[P] extends ReadonlyArray<infer U>
    ? ReadonlyArray<DeepPartial<U>>
    : T[P] extends Set<infer V> // checks for Sets
    ? Set<DeepPartial<V>>
    : T[P] extends Map<infer K, infer V> // checks for Maps
    ? Map<K, DeepPartial<V>>
    : T[P] extends NonAny // checks for primative values
    ? T[P]
    : DeepPartial<T[P]>; // recurse for all non-array, non-date and non-primative values
};

By implementing this structure, your type enforcement will be accurate. Refer to the How to implement TypeScript deep partial mapped type not breaking array properties

For troubleshooting TS playground with 'Data' instead of 'String', see

You would need to handle each native type (i.e. Date, Map, Set, etc.) individually, something like...

type NonAny = number | boolean | string | symbol | null;
type DeepPartial<T> = {
  [P in keyof T]?: T[P] extends NonAny[] // checks for nested any[]
    ? T[P]
    : T[P] extends ReadonlyArray<NonAny> // checks for nested ReadonlyArray<any>
    ? T[P]
    : T[P] extends Date // checks for Date
    ? T[P]
    : T[P] extends (infer U)[]
    ? DeepPartial<U>[]
    : T[P] extends ReadonlyArray<infer U>
    ? ReadonlyArray<DeepPartial<U>>
    : T[P] extends Set<infer V> // checks for Sets
    ? Set<DeepPartial<V>>
    : T[P] extends Map<infer K, infer V> // checks for Maps
    ? Map<K, DeepPartial<V>>
    : T[P] extends NonAny // checks for primative values
    ? T[P]
    : DeepPartial<T[P]>; // recurse for all non-array, non-date and non-primative values
};

Then your type enforcement would be correct. See TS playground.

type TT = { dateValue: Date }
const x1: DeepPartial<TT> = { dateValue: "0" } // correctly disallowed by ts

x1.dateValue?.getDate() // allowed method invocation

See related post How to implement TypeScript deep partial mapped type not breaking array properties

See TS playground troubleshooting Data as string condition here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Attempting to load the parent window of a framed page from a separate domain results in a permission denial issue in Internet

Having an issue with a login page that is hosted within an iframe on a different domain. After a successful login, I am attempting to load the following page: <html> <head> </head> <body onload="parent.window.loca ...

Dealing with Overwhelmingly Large Angular 5 Components

I'm currently developing a project in Angular 5 and one of our component files is becoming quite large, reaching nearly a thousand lines and continuing to grow. This will eventually make it difficult to manage and understand. We are seeking advice on ...

Using ReactJS and JavaScript to transform an array into a fresh array

I am working with an array that looks like this: var oldArray = [ {number: '12345', alphabet: 'abcde'}, {number: '54321', alphabet: 'abcde'}, {number: '67891', alphabet: 'abcde'}, ...

Tips for effectively binding attributes based on conditions in Vue.js

Is it possible to conditionally bind attributes in Vue? Yes, you can achieve this using the v-bind directive: Here is an example: <img :src=" status = true ? 'open.svg' : 'close.svg'"> In Angular, this functionality i ...

To calculate the sum of input field rows that are filled in upon button click using predetermined values (HTML, CSS, JavaScript)

Greetings for exploring this content. I have been creating a survey that involves rows of buttons which, when clicked, populate input fields with ratings ranging from 5 to -5. The current code fills in one of two input fields located on opposite sides of ...

A guide on extracting data from an HTML table containing various input fields

I have a webpage with this table generated by a PHP script. What I need to do is extract the values from each of the 4 input fields and save them in separate JavaScript variables. Each button already has an onclick="fetchGrades(); trigger added. How can ...

What is the best way to include a new attribute in a TypeScript internal object?

I am trying to include a property declaration in the window.history object, but I received a TypeScript error message This is my code: const historyInstance = createHashHistory(); // npm hoistory module window.history.historyInstance = historyInstance; / ...

Arranging JSON elements according to a separate array in Angular 2 or Node.js

Looking for a solution with optimal performance, I am seeking to achieve the rearrangement of a list using either Angular2 or NodeJS. My input consists of user fruit preferences' IDs {15, 43, 55, 67, 98}; In addition, I have a JSON object containin ...

Building forms within an AngularJS directive

I recently developed an AngularJS directive that includes a form. This form consists of a required text field along with two additional child forms. Each child form also contains a required text field. The distinguishing factor between the two child forms ...

What could be the reason my mat-form-field is not displaying the label?

I'm currently working on a project using Angular Material to build a web page. I am facing an issue with the mat-form-field component as the label is not displaying, and I can't figure out why. Any assistance would be greatly appreciated. Thank y ...

Testing TypeScript functionality within the Eclipse environment with unit tests

Is there a method to test TypeScript code on the Eclipse platform? I'm searching for something similar to JUnit, but most of the tools I've come across are geared towards Visual Studio. ...

The Vue application is encountering an unexpected error in Chrome that is puzzling me as I search for a solution

Currently, I am delving deep into learning Vue.js and have decided to revisit the documentation from scratch and work through it in reverse order. Below is the content of my index.html file: <!DOCTYPE html> <html lang="en"> <hea ...

Struggling to connect to an express route?

I'm currently working on a MERN project and I'm encountering a small issue. When trying to make a POST request to a specific route, Express throws a 404 error and tells me that it can't find the desired route. However, everything works perfe ...

What is the best way to generate a search link after a user has chosen their search criteria on a webpage?

In my search.html file, I have set up a form where users can input their search criteria and click the search button to find information within a database of 1000 records. The HTML part is complete, but I am unsure how to create the action link for the for ...

Utilize JavaScript to communicate with the backend server

I'm embarking on my first Cordova application, utilizing HTML, CSS, and JavaScript. My current objective is to trigger a local server call upon button click, with the intention of logging something to confirm functionality. However, I'm encounter ...

The stack property of [object Object] cannot be updated, as it only has a getter method

I can't figure out why I'm receiving this specific error in the Plunker below. Cannot set property stack of [object Object] which has only a getter Access the Plunker here: https://plnkr.co/edit/IP1ssat2Gpu1Cra495u2?p=preview The code causi ...

The API endpoint code functions perfectly in Express, but encounters an error when integrated into Next.js

Express Code: app.get('/', async (req, res) => { const devices = await gsmarena.catalog.getBrand("apple-phones-48"); const name = devices.map((device) => device.name); res.json(name); }) Nextjs Code: import {gsmarena} ...

Filling a text field using data from two dropdown menus using Jquery

Currently, I have a single input field that is being populated using a drop-down menu. I am successful in achieving this with one drop-down, but I am facing difficulty doing the same with two separate drop-downs. Let me illustrate what I am trying to accom ...

Angular Command Line Interface version 12.2.0 displays the message: "No overload matches this call."

I've been working on developing a shopping cart feature for an Angular project. I'm trying to define a product as a Product type, but I keep encountering an error message stating: "(product: Product) => { ..." The error message rea ...

I'm attempting to insert a line break after HTML elements that are being added from JavaScript code inside a `display: flex` div

I'm facing an issue where line breaks are not added after HTML elements are inserted via JavaScript upon clicking a button. For instance, the data from the inputs doesn't get separated even when I click submit multiple times: https://i.sstatic. ...