Creating a Array of objects from the union type.

Consider

type Gender = "Male" | "Female"

type Gender = "Male" | "Female"

I want to create a custom array of object with a prop value to be in Gender Union

type SelectOptions = {
label: string,
value: // Either Male or Female
}[]. // I want both Male and Female SelectOption object to be present

type SelectOptions = {
label: string,
value: // Either Male or Female
}[]. // I want both Male and Female SelectOption object to be present

22 Replies

glutonium•3mo ago

are u looking for something like this value: Gender[]

glutonium•3mo ago

k_vasenOP•3mo ago

Here there is no error by typescript even though female option is missing.

k_vasenOP•3mo ago

If there is a Zod schema like

const schema = z.object({
gender: z.enum(["Male", "Female"])
});

const schema = z.object({
gender: z.enum(["Male", "Female"])
});

and I have to used this gender as a select component in shadcn. Shadcn requires the options to be in the type of {label: string, value: string} . I am exporting a prop which is like

let fieldConfig: FieldConfig<z.infer<typeof schema>> = {
gender: {
options: [] // Here I would like to ensure that the all enum values are given in the shadcn required object format
}
}

let fieldConfig: FieldConfig<z.infer<typeof schema>> = {
gender: {
options: [] // Here I would like to ensure that the all enum values are given in the shadcn required object format
}
}

glutonium•3mo ago

where is it supposed to give error? this code and the code i showed r diff

k_vasenOP•3mo ago

there should be a error on options prop. since not all Gender options are given Baiscally Mapping the Union type into Array of object

glutonium•3mo ago

wdym? like value is type of Gender which means value can either be male or frmale here if u do value: "something else" it will give error

prophile•3mo ago

is this bait

k_vasenOP•3mo ago

glutonium•3mo ago

u cant have selected option work for both OR and AND u should make a diff type for that then hol ap r u saying u want to make sure that Selected option array should have at least an object with value male and at least one object with value female? so at the least it will have 2 objects ? one male one female?

k_vasenOP•3mo ago

yes...

glutonium•3mo ago

it cant have only male nor only female not none

rik•3mo ago

He wants to ensure that all the options are used, not that the inputs are onl selected from the options.

glutonium•3mo ago

ya i got it now

rik•3mo ago

This feels like the same thing that @t3-oss/t3-env does, to ensure that all defined zod schemas have an environment variable mapped to them.

k_vasenOP•3mo ago

And Gender is an example. Tyring to componentize the sveltekit-superform using Shadcn-svelte Couldn't able to figure out what you're saying. Can you send me the link for any documentation

rik•3mo ago

https://env.t3.gg/docs/introduction

Env

Never build your apps with invalid environment variables again. Validate and transform your environment with the full power of Zod.

rik•3mo ago

I confess that I am still new enough to TypeScript that I can't easily read the source to understand how it works. What it gives you is an env.js file where you define zod schemas for what you want your environment variables to be, and then which environment variables you want them to come from. If you don't map one, then TypeScript gives an error. Alas, aside from "this feels like the same sort of thing you're trying to do", I can't explain it very well yet. I have no idea how to make it work. I'm a programmer, but I'm barely a TypeScript programmer.

k_vasenOP•3mo ago

Yes kind of that I am looking for Thank you @rik.I'll look for the source code you ts-oss/env

rik•3mo ago

@glutonium Sorry if I stepped on your toes here. That wasn't my intention.

glutonium•3mo ago

nah, u know more than me lol

rik•3mo ago

@k_vasen I think these 3 videos are helpful in understanding the issue at hand. I haven't had a case where I need to use it yet, though, so I haven't been through and actually tried: https://www.youtube.com/watch?v=vjsmv7M1iBE https://www.youtube.com/watch?v=6k20-gRH2tI https://www.youtube.com/watch?v=iCEJY9XpfG8 I have no idea how urgent your problem is, but I could probably try it later. I've got things I need to do for the next 12 or so hours, though.

Typed Rocks

YouTube

Let's INFER some types - Advanced TypeScript made EASY

TypeScript itself internally relies heavily on infer to create it's builtin types. But still this awesome feature is rarely used by developers. So let's shine a light on it and its usefulness. This video should provide you a basic understanding of how infer works and when to use it. In the next videos of this series, we will use it to do some f...

Typed Rocks

YouTube

EXTRACT types using RECURSIVE TYPES - Advanced TypeScript made EASY

In the first episode of our new series about recursive types, we will figure out how we can use the, I call it "extraction" pattern to extract nested types from existing ones and create new types from it. We will analyze, how TypeScript uses recursion to provide types like 'Awaited' and leverage this knowledge to create powerful types ourselfs.

Typed Rocks

YouTube

Mapped Types Explained: Keep Your Types in Sync Automatically - Adv...

Code: https://github.com/typed-rocks/typescript/blob/main/mapped_types.ts Template literals: https://www.youtube.com/watch?v=5AiHHTMnt8E never type:
https://www.youtube.com/watch?v=2BJa3Zy0di4&t=2s Mapped types are an essential feature every TypeScript developer should know about to write more robust and type-safe code. In this video we ...

Gaming

Programming

Creating a Array of objects from the union type.