Zod•3w ago

MattIPv4 - :WaveDoggo: I think this might be a ...

:Wave_Doggo: I think this might be a Zod Q at this point rather than TypeScript itself -- I have a custom type that relies on import() types. I've figured out how to partially preserve them when generating declaration files, but I'm still getting some unknowns included instead of references to the import() types.

Solution:

Ahah! ```ts type ImagePng = (typeof import(".png"))["default"]; type ImageJpg = (typeof import(".jpg"))["default"];...

Jump to solution

16 Replies

MattIPv4OP•3w ago

https://tsplay.dev/WG9gMN

TS Playground - An online editor for exploring TypeScript and JavaS...

The Playground lets you write TypeScript or JavaScript online in a safe and sharable way.

Unknown User•3w ago

Message Not Public

MattIPv4OP•3w ago

Yah, the schema works, but if you try to z.infer from it, it doesn't work (updated my example link as I'd pasted one w/o the infer)

Unknown User•3w ago

Message Not Public

MattIPv4OP•3w ago

For one of our usages they'll be URLs, for the other they'll be objects Hence wanting the type to propagate through from the imports correctly, so the end type is correct where we're using it

Unknown User•3w ago

Message Not Public

MattIPv4OP•3w ago

The objects are a known type we set via module augmentation Writing custom CI/CD to implement my own version of type-checking sounds like an incredibly complex solution, unless I'm not following Fwiw, the workaround is just to do z.infer<typeof ambassadorImageSchema> & { src: ImageImport };, but I'd really rather z.infer just work correctly

Unknown User•3w ago

Message Not Public

MattIPv4OP•3w ago

These aren't JSON, I'm not sure where JSON comes into this at all?

Unknown User•3w ago

Message Not Public

MattIPv4OP•3w ago

They are images being imported And so a bundler of some type is going to process them What that bundler is and what it returns for those imports is up to the user of this library

Unknown User•3w ago

Message Not Public

MattIPv4OP•3w ago

One of our usages uses plain Webpack and returns a string for the file path, the other is Next.js which'll return an object with the file path, width, height, etc. But really, it could be anything, hence wanting to have this use those import()s correctly so that it'll just use whatever type the user of the library has setup in their module augmentations

Unknown User•3w ago

Message Not Public

Solution

MattIPv4•3w ago

Ahah!

type ImagePng = (typeof import("*.png"))["default"];
type ImageJpg = (typeof import("*.jpg"))["default"];
type ImageJpeg = (typeof import("*.jpeg"))["default"];
type ImageImport = ImagePng | ImageJpg | ImageJpeg;

// Manually set the type of the schema to avoid TS inferring `ImageImport` and `Position`
// We want `ImageImport` to retain its original type using `import` calls
type ZodImageObject = z.ZodObject<{
  src: z.ZodType<ImageImport>;
  alt: z.ZodString;
}>;

export const ambassadorImageSchema: ZodImageObject = z.object({
  src: z.custom<ImageImport>(),
  alt: z.string(),
});

type ImagePng = (typeof import("*.png"))["default"];
type ImageJpg = (typeof import("*.jpg"))["default"];
type ImageJpeg = (typeof import("*.jpeg"))["default"];
type ImageImport = ImagePng | ImageJpg | ImageJpeg;

// Manually set the type of the schema to avoid TS inferring `ImageImport` and `Position`
// We want `ImageImport` to retain its original type using `import` calls
type ZodImageObject = z.ZodObject<{
  src: z.ZodType<ImageImport>;
  alt: z.ZodString;
}>;

export const ambassadorImageSchema: ZodImageObject = z.object({
  src: z.custom<ImageImport>(),
  alt: z.string(),
});

Results in:

import * as __jpeg from '*.jpeg';
import * as __jpg from '*.jpg';
import * as __png from '*.png';

type ImagePng = (typeof __png)["default"];
type ImageJpg = (typeof __jpg)["default"];
type ImageJpeg = (typeof __jpeg)["default"];
type ImageImport = ImagePng | ImageJpg | ImageJpeg;
type ZodImageObject = z.ZodObject<{
    src: z.ZodType<ImageImport>;
    alt: z.ZodString;
    position: z.ZodOptional<z.ZodEffects<z.ZodString, Position>>;
}>;
declare const ambassadorImageSchema: ZodImageObject;

import * as __jpeg from '*.jpeg';
import * as __jpg from '*.jpg';
import * as __png from '*.png';

type ImagePng = (typeof __png)["default"];
type ImageJpg = (typeof __jpg)["default"];
type ImageJpeg = (typeof __jpeg)["default"];
type ImageImport = ImagePng | ImageJpg | ImageJpeg;
type ZodImageObject = z.ZodObject<{
    src: z.ZodType<ImageImport>;
    alt: z.ZodString;
    position: z.ZodOptional<z.ZodEffects<z.ZodString, Position>>;
}>;
declare const ambassadorImageSchema: ZodImageObject;

MattIPv4OP•3w ago

So I wasn't far off with what I had before manually setting the type for just the src, just needed to set the type manually for the entire schema

Gaming

Programming

MattIPv4 - :WaveDoggo: I think this might be a ...

Did you find this page helpful?