The Type-Fest library in TypeScript is malfunctioning when used with a constant

Currently, I am utilizing a PartialDeep feature from the library type-fest. Here is an example of how I am using it with a const:

const test = {
  value: 1,
  secondLevel: {
    value: 1,
    thirdLvl: {
      value: 1,
      fifthLvl: {
        value: 1
      }
    }
  }
}

With my current set up, the defined type looks like this:

type PD = {
  value?: number;
  secondLevel?: {
    value?: number;
    thirdLvl?: {
      value?: number;
      fifthLvl?: {
        value?: number
      }
    }
  }
}

However, I am encountering an issue where only one level of optional properties is being recognized. Can anyone provide insight into this or suggest a workaround solution? Your help is much appreciated. Thank you.

Answer №1

Seems to be functioning properly.

Take note of the display style for this type. It might appear like:

type TestType = {
    value?: number | undefined;
    secondLevel?: PartialObjectDeep<{
        value: number;
        thirdLvl: {
            value: number;
            fifthLvl: {
                value: number;
            };
        };
    }> | undefined;
}

Although it seems that the second level lacks optional properties, remember that the second level is enclosed in PartialObjectDeep<...>, which mandates partiality at that level.

Testing this type will demonstrate expected results:

// No errors, everything works as anticipated
const testPartial: PartialDeep<typeof test> = {
  value: 1,
  secondLevel: {
    thirdLvl: {
      value: 1
    }
  }
}

Interactive Scenario

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

Having trouble generating a mock constructor for the user model

While attempting to simulate my user model in order to test my service, the nest console is throwing a TypeError. I am unsure of how to properly 'emulate' the constructor of the user model. user.service.spec.ts import { Test, TestingModule } fro ...

Executing a series of imported functions from a TypeScript module

I'm developing a program that requires importing multiple functions from a separate file and executing them all to add their return values to an expected output or data transformation. It's part of a larger project where I need these functions to ...

The data type 'T' cannot be assigned to type 'T'

Having extensive experience as a javascript developer, I recently delved into learning C# as my first statically typed language. My upcoming project involves using TypeScript, so I've been refreshing my knowledge on it. Below is the code I have writt ...

How come the inference mechanism selects the type from the last function in the intersection of functions?

type T = (() => 1) & (() => 2) extends () => infer R ? R : unknown What is the reason that T is not never (1 & 2)? Does the type always come from the last function, or can it come from one of them? ...

Please ensure that the property name is a valid type, such as 'string', 'number', 'symbol', or 'any'

Can anyone help me convert this JavaScript file to Typescript? import React, { useState } from 'react'; import { Button } from './Button'; import { Link } from 'react-router-dom'; import './Navbar.css'; import Settin ...

The attribute 'body' cannot be found in the specified 'Request' type

Why does the req variable of type Request not show intellisense for the property body? Could this be related to typings? import { Request, Response } from 'express' import { ok, bad } from './responses' export const signIn: async (req ...

"Combining the power of AngularJS2 beta with Spring Boot: the ultimate

I am currently using Atom 1.4.0 with the atom-typescript package to develop AngularJS2 modules in TypeScript. On the backend, I have a spring-boot application for handling the REST APIs. After making changes to the .ts files in Atom, it seems to compile t ...

What might be causing AngularJS to fail to display values when using TypeScript?

I have designed the layout for my introduction page in a file called introduction.html. <div ng-controller="IntroductionCtrl"> <h1>{{hello}}</h1> <h2>{{title}}</h2> </div> The controller responsible for handling th ...

At what point does the constructor of an injected service in Angular execute?

When using @Injectable({providedIn: 'root'}) in Angular 7 for a service, the constructor of the service executes when exactly? Is it upon the creation of a component that utilizes it as a dependency or does it wait until a method within the servi ...

Callback after completion of a for loop in Angular TypeScript

During the execution of my javascript async function, I encountered a situation where my printing code was running before the div creation. I needed to ensure that my print code would run only after the completion of the for loop, but I struggled to find a ...

Stop allowing the entry of zero after a minus sign

One of the features on our platform allows users to input a number that will be automatically converted to have a negative sign. However, we want to ensure that users are unable to manually add a negative sign themselves. We need to find a solution to pre ...

I am unable to transmit information using the `http.post` function

When attempting to send a post request to the backend, I am receiving a response code of 500 and an empty data object on the API side. Interestingly, using Postman gives successful results. return http.post(link,data,headers).subscribe(response=>{ ...

React TypeScript with ForwardRef feature is causing an error: Property 'ref' is not found in type 'IntrinsicAttributes'

After spending a considerable amount of time grappling with typings and forwardRefs in React and TypeScript, I am really hoping someone can help clarify things for me. I am currently working on a DataList component that consists of three main parts: A Co ...

Adjusting the array when items in the multi-select dropdown are changed (selected or unselected)

I am looking to create a multi-select dropdown in Angular where the selected values are displayed as chip tags. Users should be able to unselect a value by clicking on the 'X' sign next to the chip tag, removing it from the selection. <searcha ...

What is the best way to incorporate a module from an external 'include' folder in your code?

Within my project's tsconfig.json, I have specified the following: "include": [ "src/**/*", "generated**/*" ] In the directory, there exist two files named src/main.ts and generated/data.json. The task at hand is to be able to successfully ...

VS Code sees JavaScript files as if they were Typescript

I have recently delved into the world of Typescript and have been using it for a few days now. Everything seems to be working smoothly - Emmet, linting, etc. However, I've encountered an issue when trying to open my older JavaScript projects in VS Cod ...

Resolving "SyntaxError: Unexpected identifier" when using Enzyme with configurations in jest.setup.js

I'm currently facing an issue while trying to create tests in Typescript using Jest and Enzyme. The problem arises with a SyntaxError being thrown: FAIL src/_components/Button/__tests__/Button.spec.tsx ● Test suite failed to run /Users/mika ...

Tips for utilizing the material ui auto-complete search feature

I am in search of an alternative to material-ui-search-bar because it is no longer being maintained. I have been suggested to try using Material UI's auto complete instead. However, from the examples I've seen, it seems like only text field struc ...

What is the purpose of adding "/dist" to the library import statement?

Currently, I am in the process of developing a react component library using vite as my primary build tool. After successfully compiling the project and deploying it to the npm registry, I encountered an issue when importing it into my client app. Specifi ...

The name 'withStyles' is nowhere to be found

import * as React from "react"; import Button from "@material-ui/core/Button"; import * as PropTypes from "prop-types"; import {WithStyles} from '@material-ui/core'; import "./App.css"; import PageTwo from "./components/PageTwo"; ...