Zod combinator that accepts a dynamic field name

Question

Zod combinator that accepts a dynamic field name

When converting XML to JSON, my library outputs {MyKey: T} for single-element lists and {MyKey: T[]} for multi-element lists. The equivalent TypeScript type is

type XmlJsonArray<T, element extends string> = Record<element, T | T[]>

. To implement this as a Zod schema, I have used the following code:

const XmlJsonArray = <T, element extends string>(element: element, schema: z.Schema<T>) => {
  // TODO what is the best practice here?
  const outerSchema: Record<element, z.Schema<T | T[]>> = {} as any;
  outerSchema[element] = z.union([schema, z.array(schema)]);
  return z.object(outerSchema);
};

Would it be possible to achieve this without resorting to using any?

typescript zod

Answer 1

Answer №1

From @username:

function JsonXmlObject = <Key extends string, Schema extends z.Schema<any>>(
  tag: Key,
  schema: Schema,
) => {
  return z.object({}).setKey(tag, z.union([schema, z.array(schema)]));
};

const data = JsonXmlObject('name', z.string());

The parsing is functioning correctly:

// both cases work
data.parse({ name: 'value' });
data.parse({ name: ['value'] });

Type inference is also successful:

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

Answer 2

From @username:

function JsonXmlObject = <Key extends string, Schema extends z.Schema<any>>(
  tag: Key,
  schema: Schema,
) => {
  return z.object({}).setKey(tag, z.union([schema, z.array(schema)]));
};

const data = JsonXmlObject('name', z.string());

The parsing is functioning correctly:

// both cases work
data.parse({ name: 'value' });
data.parse({ name: ['value'] });

Type inference is also successful:

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

Zod combinator that accepts a dynamic field name

Answer №1

Similar questions

DeActivation only occurs once per route

Using React with Typescript: Passing Props and Defining Data Types

Using a targeted div as a child component in React

"Handling dependency injection with cyclic dependencies along with a custom implementation of HTTP and ConfigService

"Strange Type Conversion Behavior in next.js 13: Why is res.json() Converting Numbers to Strings

Steps for assigning a parameter to a general purpose function

Union does not contain the specified property in Typescript

What is the correct way to define types for higher-order class components in TypeScript?

Embedded Facebook SDK posts appearing only after performing a hard refresh

Try querying again if you receive no results from an http.get request in Angular using RXJS Operators

How can I add multiple filters to a Kendo Grid?

What could be causing my controller method in TypeScript to throw an error message unexpectedly?

The module '@ngmodule/material-carousel' could not be located

Transferring data between components in React by passing parameters through Links

Determining the data type of an object key in Typescript

Typescript compilation fails to include require statements in certain files

A Guide to Implementing Inner CSS in Angular

Redirecting to login on browser refresh in Angular using Firebase's canActivate feature

Identifying collisions or contact between HTML elements with Angular 4

In the domain of React and Typescript, a minimum of '3' arguments is anticipated; nonetheless, the JSX factory 'React.createElement' is only equipped with a maximum of '2' arguments. This incongruity is signaled by the