Create an alternate name for a specific type of key within a nested record

There are three simple types available:

const structureTypes = z.enum(["atom","molecule"])
const atomTypes = z.enum(["oxygen","hydrogen"])
const moleculeTypes = z.enum(["water","ammonia"])

The goal is to define a type for a cache where the keys correspond to the names of atoms or molecules, nested within their respective structure types. The object structure should look like this:

{
  atom: { oxygen: "abdshc7823", hydrogen: "hjksdfkjh" }
  molecule: { water: "hjfsdlkjj3", ammonia: "trewuivx67" }
}

Using Zod's record() method, we can come close:

const structureIdCacheSchema = z.record(
  structureTypes,
  z.record(z.union([atomTypes, moleculeTypes]), z.string())
)
export type StructureIdCache = z.infer<typeof structureIdCacheSchema>;

However, the issue arises when the keys for the nested objects are not restricted to their corresponding structure type. Is there a way to create an alias for keys in a similar manner with Zod record?

I have also attempted another approach as shown below:

export const structureTypeCacheSchema = z.object({
  atom: z.record(atomTypeSchema, z.string()),
  molecule: z.record(moleculeTypeSchema, z.string()),
})

This method requires separate maintenance from the enums but encounters an error when trying to access the nested elements:

Element implicitly has an 'any' type because expression of type "oxygen" | "hydrogen" | "water" | "ammonia" cannot be used to index type 'Partial<Record<"paragraph" | "oxygen" | "hydrogen", string>> | Partial<...>'.
 Property 'oxygen' does not exist on type 'Partial<Record<"oxygen" | "hydrogen", string>> | Partial<...>'.ts(7053)

Answer №1

Here is a solution that meets your needs

const idCacheSchema = z.object({
  element: z.record(elementTypes, z.string()),
  compound: z.record(compoundTypes, z.string())
})

export type IdCache = z.infer<typeof idCacheSchema>

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

Methods for setting a global instance within a local function

Hello, I'm fairly new to using TypeScript and Angular2. Let me quickly explain what I'm trying to accomplish with my method. I have some hard-coded XML data that I need to parse into JSON format. Once parsed, each JSON object needs to be assigned ...

rxjs iterates through an array executing each item in sequential order

Is there a way to make observables wait until the previous one has completed when they are created from an array? Any help is appreciated! export class AppComponent{ arr: number[] = [5, 4, 1, 2, 3]; fetchWithObs() { from(this.arr) ...

Troubleshooting React TypeScript in Visual Studio Code

I've recently set up an ASP Core project with the React TypeScript template, but I'm encountering difficulties when it comes to debugging. The transition between the TypeScript code and the corresponding generated JavaScript code is proving to be ...

How to pass data/props to a dynamic page in NextJS?

Currently, I am facing a challenge in my NextJS project where I am struggling to pass data into dynamically generated pages. In this application, I fetch data from an Amazon S3 bucket and then map it. The fetching process works flawlessly, generating a se ...

The most effective method for transferring a JavaScript object between a TypeScript frontend and a Node.js backend

I need some advice on how to effectively share a JavaScript object between my Angular2 with Typescript frontend and NodeJS backend in an application I'm working on. Currently, I am using a .d.ts file for the frontend and adding a module.exports in the ...

Is there a sophisticated method for breaking down a nested property or member from TypeScript imports?

Just curious if it's possible, not a big deal otherwise. import * as yargs from 'yargs'; // default import I'm looking to extract the port or argv property. This would simplify the code from: bootstrap(yargs.argv.port || 3000) to: ...

Convert an interface type variable to a string representation

I'm just starting to learn angular and I'm attempting to convert my response from an interface type into a string so that I can store it in session storage. However, when I try to save them, they are being stored as [object] in the session storag ...

Deactivate the chosen tab by clicking the Mat-Tab button

I was trying to implement a way to disable the selected mat-tab and its elements when a button is clicked, //HTML <mat-tab-group #tabGroup> <mat-tab *ngFor="let subject of subjects" [label]="subject.name"> {{ subject.name }} ...

Finding the common dates between two date arrays in Node.js

Looking for help with correctly intersecting matrices while working in nodejs? Trying to compare two arrays to find common elements, also known as an "array intersection." This seems to be a common question, and despite trying various solutions mentioned o ...

Show JSON information in an angular-data-table

I am trying to showcase the following JSON dataset within an angular-data-table {"_links":{"self":[{"href":"http://uni/api/v1/cycle1"},{"href":"http://uni/api/v1/cycle2"},{"href":"http://uni/api/v1/cycle3"}]}} This is what I have written so far in my cod ...

I encountered an issue where I did not receive a response when utilizing res.write() within the fetch function

Currently, I am utilizing the <res.write()> method in nodejs at https://nodejs.org/api/http.html#responsewritechunk-encoding-callback. In addition to this, I am also implementing the fetch function which can be found at https://developer.mozilla.org/ ...

Discovering the dimensions of a video in Angular 2 using TypeScript

To determine whether the video is portrait or landscape, I am attempting to retrieve the height and width of the video using the following method: import { Component, OnInit, AfterViewInit } from '@angular/core'; @Component({ selector: ' ...

Find the combined key names in an object where the values can be accessed by index

I am currently working on creating a function called indexByProp, which will only allow the selection of props to index by if they are strings, numbers, or symbols. This particular issue is related to https://github.com/microsoft/TypeScript/issues/33521. ...

Angular is reporting that the check-in component is nonexistent

I encountered an error in my Angular 8 application while working on a component. The error seems to be related to nested components within the main component. It appears that if the component is empty, the error will be shown, but if it's not null, th ...

Incorporate JavaScript Library into StencilJs Using TypeScript

Recently, I decided to incorporate a JavaScript library called Particles.js into my project. The process involved importing it and initializing it within my component: import { Component, h } from '@stencil/core'; import * as particlesJS from &a ...

Failure to trigger the callback for mongoose.connection.once('open') event

Currently, I am in the process of setting up a custom Node server using Next.js. Although I'm utilizing Next.js this time around, it should not affect the outcome. In my previous applications, I always relied on mongoose.connection.once('open&ap ...

The npm warning indicates that the file node_modules/.staging/typescript-8be04997/lib/zh-CN/diagnosticMessages.generated.json does not exist due to an ENOENT error

I am currently in the process of running npm install on a Linux machine where I do not have sudo access. Unfortunately, I have a machine-specific package.json and package-lock.json that cannot be changed. However, I encountered some errors during the insta ...

Guide to adding a loading spinner into your Angular project

I've been attempting to incorporate a spinner into my application, but unfortunately, the spinner isn't showing up. Despite checking the console and terminal for errors, there doesn't seem to be any indication as to why the spinner is not a ...

Error message: "Angular requires either importing or local installation"

For my ionic application development, I encountered an issue while trying to link pages together in the ionic creator. The error message on the .ts file is: typescript: src/pages/home/home.ts, line: 4 Individual declarations in merged declar ...

Encountering "Invalid hook call" error with React Router while integrating Higher Order Components for authentication

Dealing with an error: React Router shows "Invalid hook call" with higher-order components for authentication Dilemma I have developed two distinct approaches for authentication wrappers in my React components with React Router. The first method functions ...