Shapeshift nested object | Sapphire - Imagine a Framework | Page 1

opal walrus Jul 23, 2023, 10:50 AM

#

How can I use @sapphire/shapeshift with nested objects and TypeScript compile. The types are known in VS-Code, but when compiled, the nested objects are turned into any...

const autoCompleteSubreddit = s.object({
    numSubscribers: s.number,
    name: s.string,
    allowedPostTypes: s.object({
        images: s.boolean,
        text: s.boolean,
        videos: s.boolean,
        links: s.boolean,
        spoilers: s.boolean,
    }),
    id: s.string,
    primaryColor: s.string,
    communityIcon: s.union(s.literal(""), s.string.url()),
    icon: s.union(s.literal(""), s.string.url()),

});

export type SubredditAutoComplete = InferType<typeof autoCompleteSubreddit>[];

turnes into (.d.ts)

declare const autoCompleteSubreddit: import("@sapphire/shapeshift").ObjectValidator<{
    numSubscribers: number;
    name: string;
    allowedPostTypes: import("@sapphire/shapeshift").UndefinedToOptional<{
        images: any;
        text: any;
        videos: any;
        links: any;
        spoilers: any;
    }>;
    id: string;
    primaryColor: string;
    communityIcon: string;
    icon: string;
}, import("@sapphire/shapeshift").UndefinedToOptional<{
    numSubscribers: number;
    name: string;
    allowedPostTypes: import("@sapphire/shapeshift").UndefinedToOptional<{
        images: any;
        text: any;
        videos: any;
        links: any;
        spoilers: any;
    }>;
    id: string;
    primaryColor: string;
    communityIcon: string;
    icon: string;
}>>;
export type SubredditAutoComplete = InferType<typeof autoCompleteSubreddit>[];

scenic nicheBOT Jul 23, 2023, 10:50 AM

#

To help others find answers, you can mark your question as solved via Right click solution message -> Apps -> ✅ Mark Solution

desert remnant Jul 23, 2023, 12:56 PM

#

@digital bear

digital bear Jul 23, 2023, 1:00 PM

#

Well, tsconfig?

#

I'm not available until late tonight, but I'll most likely be dead tired by then

opal walrus Jul 23, 2023, 1:02 PM

#

digital bear Well, tsconfig?

I kinda forgot about that, but: https://github.com/RiskyMH/RiskyBOT/blob/main/tsconfig.json

#

i haven't looked at it in a while (did the config ages ago)

#

and it is being extended but i don't think that should have any impact: https://github.com/RiskyMH/RiskyBOT/blob/main/packages/apis/tsconfig.json

desert remnant Jul 23, 2023, 1:11 PM

#

Good lord, that's a setup and a half

if true: conflicts with discord-api-types untrue, @sapphire/ts-config/extra-strict also sets it to true and it works just fine
your jsconfig and tsconfig diverge. You should remove jsconfig and either update or keep tsconfig like it is
tsconfig excludes is only to exclude what is included by includes, your excludes is pretty useless
you really shouldnt be including your test files in your tsconfig. Either set up a tsconfig for each src and test directory, or dont at all seeing as your tests arent even typescript to begin with.
above will also let you set rootDir for src so you dont get dist/src/* but just dist/* which is much cleaner.

at any rate, it's a reproduceable issue

opal walrus Jul 23, 2023, 1:12 PM

#

thanks for your recommendations

#

im getting the result in dist/* not dist/src/*

desert remnant Jul 23, 2023, 1:13 PM

#

hm

opal walrus Jul 23, 2023, 1:13 PM

#

yeah it is big (i should clean it)

desert remnant Jul 23, 2023, 1:13 PM

#

probably because of the wildcard src/* instead of src then

#

but point still stands

#

that would probably also mean that if your tests were TS then they'd also end up in dist

opal walrus Jul 23, 2023, 1:14 PM

#

idk why i was adding my tests to ts... i think it was to let it check for issues with my code (but i have disable checking js...)

opal walrus Jul 23, 2023, 1:22 PM

#

desert remnant Good lord, that's a setup and a half - `if true: conflicts with discord-api-type...

I believe i have done your recomendations, but the error still exists https://github.com/RiskyMH/RiskyBOT/commit/ccdee8b9965734d220136e8d1f6890e7ca177147

GitHub

Fix recommendations · RiskyMH/RiskyBOT@ccdee8b

desert remnant Jul 23, 2023, 1:23 PM

#

the error as referring to the any's? yes as I said, it's reproducible. Idk why that happens.

opal walrus Jul 23, 2023, 1:23 PM

#

ye

#

but thanks for your recomendations 👍

opal walrus Jul 23, 2023, 1:28 PM

#

opal walrus idk why i was adding my tests to ts... i think it was to let it check for issues...

ahh i know why, eslint didn't check it unless tsconfig had it and when i manualy said locations (eslint src/**/*.mts tests/*.mjs), it errored "that TSConfig does not include this file."

desert remnant Jul 23, 2023, 1:29 PM

#

that's on how you configure your eslint parser.

opal walrus Jul 23, 2023, 1:30 PM

#

its just "parser": "@typescript-eslint/parser", basicly

desert remnant Jul 23, 2023, 1:31 PM

#

yes exactly, that's the problem. https://typescript-eslint.io/packages/parser/#project:~:text=If your existing configuration does not include all of the files you would like to lint%2C you can create a separate tsconfig.eslint.json as follows%3A

I mean you need only look at some of the Sapphire repos for example. There is a reason they are set up the way they are.

opal walrus Jul 23, 2023, 1:31 PM

#

oh oh, ill look in to that

#

but yeah, glad to have brought up the issue (hope the team can fix it sometime 🙂 )

desert remnant Jul 26, 2023, 9:26 AM

#

@opal walrus so I tried a thing that I thought might be related but it's not. I really have no idea why TS does this. It's extremely black box too really. My best guess is that TS fallsback to any to prevent a runaway type instantiation but I have no idea how we could fix this.

I have 2 recommendations

Create an issue on the typescript repo. Very highly recommended. For example a good issue that ended up involving shapeshift is https://github.com/microsoft/TypeScript/issues/54491. Hopefully someone on the TS team can guide both you why it's any and what we can do to ensure it is no longer any.
Using SchemaOf ensures that you don't get any's:

import { s, type SchemaOf } from '@sapphire/shapeshift';

interface SubredditAllowedPostTypes {
    images: boolean;
    text: boolean;
    videos: boolean;
    links: boolean;
    spoilers: boolean;
}

interface SubredditAutoComplete {
    numSubscribers: number;
    name: string;
    allowedPostTypes: SubredditAllowedPostTypes;
    id: string;
    primaryColor: string;
    communityIcon: string;
    icon: string;
}

export const allowedPostTypes: SchemaOf<SubredditAllowedPostTypes> = s.object({
    images: s.boolean,
    text: s.boolean,
    videos: s.boolean,
    links: s.boolean,
    spoilers: s.boolean
});

export const autoCompleteSubreddit: SchemaOf<SubredditAutoComplete> = s.object({
    numSubscribers: s.number,
    name: s.string,
    allowedPostTypes,
    id: s.string,
    primaryColor: s.string,
    communityIcon: s.union(s.literal(''), s.string.url()),
    icon: s.union(s.literal(''), s.string.url())
});

This gives .d.ts of:

import { type SchemaOf } from '@sapphire/shapeshift';
interface SubredditAllowedPostTypes {
    images: boolean;
    text: boolean;
    videos: boolean;
    links: boolean;
    spoilers: boolean;
}
interface SubredditAutoComplete {
    numSubscribers: number;
    name: string;
    allowedPostTypes: SubredditAllowedPostTypes;
    id: string;
    primaryColor: string;
    communityIcon: string;
    icon: string;
}
export declare const allowedPostTypes: SchemaOf<SubredditAllowedPostTypes>;
export declare const autoCompleteSubreddit: SchemaOf<SubredditAutoComplete>;
export {};
//# sourceMappingURL=test-type.d.ts.map

So using SchemaOf you go from interface to validation schema, rather than from validation schema to interface like you would with InferType

opal walrus Jul 26, 2023, 9:37 AM

#

Ah, thank you for that recommendation, I think I will do the second one as I don't really know how to make a good issue... (And do not have much time right now)

#Shapeshift nested object