Indeed, utilizing TypeScript enums in generic functions

I'm struggling to define the appropriate types for a function that produces a yup schema for oneOf using TypeScript enums.

The following code functions correctly and returns the type yup.MixSchema<SomeEnum>

const schema1 = yup.mixed<SomeEnum>().oneOf(Object.values(SomeEnum)); // yup.MixSchema<SomeEnum>

However, when attempting to create a generic function to return the schema, I end up with the type 

yup.MixSchema<typeof SomeEnum>
. Note the presence of typeof.

const oneOfEnum = <T>(enumObject: T) =>
  yup.mixed<T>().oneOf(Object.values(enumObject));

const schema2 = oneOfEnum(SomeEnum); // yup.MixSchema<typeof SomeEnum>

https://codesandbox.io/s/yup-typescript-oneof-enum-vpvjn?file=/src/index.ts

typescriptenumsyup

Answer №1

To resolve this issue, simply adjust the argument type to align with the argument for Object.values:

const enumValidator = <T>(enumObject: { [s: string]: T } | ArrayLike<T>) =>
  yup.mixed<T>().oneOf(Object.values(enumObject));

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

The parameter 'host: string | undefined; user: string | undefined' does not match the expected type 'string | ConnectionConfig' and cannot be assigned

My attempt to establish a connection to an AWS MySQL database looks like this: const config = { host: process.env.RDS_HOSTNAME, user: process.env.RDS_USERNAME, password: process.env.RDS_PASSWORD, port: 3306, database: process.env.RDS_DB_NAME, } ...

typescriptexpressmysql-connector

Extending injections in Angular 5 by inheriting from a base class

I have created a class with the following structure: @Injectable FooService { constructor(protected _bar:BarService){ } } Then, I extended this class as shown below: @Injectable ExtFooService extends FooService { constructor(_bar:BarServi ...

typescriptdependency-injectionangular5extends

What is the process for creating a Deep Copy of an object in Angular?

I have a specific entity class defined as follows: export class Contact { id: number; firstName: string; lastName: string; constructor(id?, firstName?, lastName?) { this.id = id; this.firstName = firstName; this.lastName = lastName; ...

angulartypescriptdeep-copy

The OR operator in TypeORM allows for more flexibility in querying multiple conditions

Is there any OR operator in TypeORM that I missed in the documentation or source code? I'm attempting to conduct a simple search using a repository. db.getRepository(MyModel).find({ name : "john", lastName: "doe" }) I am awar ...

sqltypescriptoperatorstypeorm

Creating Concurrent Svelte Applications with Local State Management

Note: Self-answer provided. There are three primary methods in Svelte for passing data between components: 1. Utilizing Props This involves passing data from a parent component to a child component. Data transfer is one-way only. Data can only be passed ...

typescriptsveltesveltekitsvelte-componentsvelte-store

invoking a function within an object in Typescript

export class MockedDataService { constructor(private Session: SessionService) {} private getMockedResponse(name:string){ return ""; // placeholder for the response data, will be a promise } public mocked:{ products:{ ...

angulartypescriptclassobject

What is the best way to utilize a function prop in Typescript with the React-Selectize library?

I'm currently in the process of incorporating the MultiSelect functionality from the React-Selectize library into my project, specifically using Typescript. The properties for MultiSelectProps are outlined as follows: export interface MultiSelectProp ...

reactjstypescriptreact-redux

Learn the process of importing different types from a `.ts` file into a `.d.ts` file

In my electron project, the structure looks like this: // preload.ts import { contextBridge, ipcRenderer, IpcRendererEvent } from 'electron' import { IpcChannels } from '@shared/channelNames' contextBridge.exposeInMainWorld('api&a ...

typescriptelectrondeclaration

Searching in TypeScript tables with Angular's search bar

I've successfully completed a basic CRUD application, but now I need to incorporate a Search Bar that can filter my table and display rows with matching letters. I'm unsure how to approach this in my component. I've seen examples using pipe ...

javascripthtmlangulartypescriptangular-ngmodelchange

Using typescript, encountering an issue with dynamic import and json file integration

When creating a function to retrieve test data for multiple environments, I encountered an issue: export class DataHelper { public static async getTestData(fileName: string): Promise<any> { return await import(`../${fileName}`); } } Running ...

typescript

The upload function does not allow re-uploading of a file that has been previously deleted

Attempting to upload a file using the following code onDrag(event:any) { console.log(this.toUpload); if(this.toUpload.length >0){ this.error = "Only one file at a time is accepted"; }else{ let fileName = event[0].name; let split ...

htmlangulartypescriptfile-upload

What is the expected return type in TypeScript of a function that returns a void function?

I recently received feedback during a code review suggesting that I add return type values to my functions. However, I am unsure of what return type to assign to this particular function: function mysteryTypeFunction(): mysteryType { return function() ...

javascriptangulartypescript

Type children are not permitted in the TypeScript container

Container is a component that extends from @material-ui/core and does not accept children of type React.ReactNode. Layout.tsx: import { Container } from "@material-ui/core"; type LayoutProps = { children: React.ReactNode; }; function Layout( ...

reactjstypescriptmaterial-uinext.js

Combining declarations with a personalized interface using TypeScript

My goal is to enhance the express.Request type by adding a user property so that req.user will be of my custom IUser type. After learning about declaration merging, I decided to create a custom.d.ts file. declare namespace Express { export interface ...

node.jstypescriptexpressmiddleware

Node.js has been giving me trouble as I try to install Inquirer

:***Hey Guys I'm Working on a TypeScript/JavaScript Calculator! ...

node.jsjsontypescriptnpmyarnpkg

Encountering the "Not all code paths return a value" TypeScript error when attempting to manipulate a response before returning it, however, returning the response directly works without any issues

Encountering an issue where manipulating/process response and return triggers an error in TypeScript with the message "Not all code paths return a value.". Data is fetched from a backend API using RxJS lastValueFrom operator, along with lodash functions as ...

javascriptangulartypescriptasync-awaitrxjs

In order to successfully run this generator XXX, you need to have a minimum of version 4.0.0-rc.0 of yeoman-environment. However, the current version available

When attempting to run a generator using the latest version of yeoman-generator (7.1.0), yo discord An error message pops up saying: This generator (discord:app) requires yeoman-environment version 4.0.0-rc.0 or higher, but the current version is 3.19.3. ...

typescriptyeomanyeoman-generator

Unable to build due to TypeScript Firebase typings not being compatible

This is what I have done: npm install firebase --save typings install npm~firebase --save After executing the above commands, my typings.json file now looks like this: { "ambientDevDependencies": { "angular-protractor": "registry:dt/angular-protract ...

typescriptangularfirebaseangular-clitypescript-typings

The Angular Date Pipe is currently unable to display solely the Month and Year; it instead presents the complete date, including day, month,

I'm currently using the Bootstrap input date feature to save a new Date from a dialog box. However, I only want to display the month and year when showing the date. Even though I added a pipe to show just the month and year, it still displays the mont ...

javascriptangulartypescriptdate-pipe

The function did not return a Promise or value as expected when using async and await

    I have been working on implementing this code structure for my cloud functions using httpRequest. It has worked seamlessly with those httpRequest functions in the past. However, I recently encountered an error when trying to use it with the OnWrite ...

typescriptfirebaseasync-awaitgoogle-cloud-functions