Returning a value with an `any` type without proper validation.eslint@typescript-eslint/no-unsafe-return

I am currently working on a project using Vue and TypeScript, and I am encountering an issue with returning a function while attempting to validate my form. Below are the errors I am facing:

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ name: ((v: string) => string | true)[]; enrollment: ((v?: string) => Fn)[]; cpf: ((number: string) => string | true)[]; profession: ((v: unknown) => Fn)[]; admission_date: ((v: unknown) => Fn)[]; department: ((v: unknown) => Fn)[]; email: ((v: unknown) => Fn)[]; phone: ((v: unknown) => Fn)[]; }'. No index signature with a parameter of type 'string' was found on type '{ name: ((v: string) => string | true)[]; enrollment: ((v?: string) => Fn)[]; cpf: ((number: string) => string | true)[]; profession: ((v: unknown) => Fn)[]; admission_date: ((v: unknown) => Fn)[]; department: ((v: unknown) => Fn)[]; email: ((v: unknown) => Fn)[]; phone: ((v: unknown) => Fn)[]; }'.

And

Unsafe return of an `any` typed value.eslint@typescript-eslint/no-unsafe-return

My code:

const myRules = {
  name: [
    isPersonName('', t),
  ],      
  enrollment: [
    eqLength('', 4, t)
  ],    
  cpf: [
    isValidCpf(t),
  ],
  profession: [isRequired('', t)],
  admission_date: [isRequired('', t)],
  department: [isRequired('', t)],
  email: [isRequired('', t)],
  phone: [isRequired('', t)],      
}  

This is where the error occurs:

//@ts-ignore
const getMyRules = (item: string) => myRules[item]

I find it confusing that when I log the data in the console, everything appears correct, but when I try to return the value, ESLint throws an error.

    //@ts-ignore
    const getMyRules = (item: string) => console.log(fieldRules[item])

Here are my inputs:

<component
  v-for="field in getFields()"
  v-bind="field.props"
  :mask="addMaskInputs(field.name)"
  :rules="getMyRules(field.name)"
/>

Answer №1

Within the code snippet you provided, there appears to be a lack of type definitions for the myRules object. This could potentially be causing TypeScript to struggle with inferring the result when accessing properties from that object. To resolve this issue, consider specifying that the item parameter should be of type keyof myRules:

const myRules = {/* ... */};
const getMyRules = (item: keyof myRules) => myRules[item];

It is important to note that I omitted | undefined from the 'item' parameter, as allowing undefined values could lead TypeScript to interpret getMyRules as possibly returning

myRules[undefined]</code (which likely results in <code>undefined
or a runtime error).

If there is a possibility that you might call getMyRules with a variable that could be either defined or undefined, it is crucial to address the type definitions accordingly. Inconsistencies in type definitions can have a cascading effect on your entire type system.

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

Issues with utilizing Jquery datepicker within a Vue.js component's v-for loop in Laravel

I am facing an issue with the Jquery date picker inside a v-for loop in my vue.js component. The date picker works fine outside of the loop, but inside the loop it does not behave as expected. Here is a snippet of code where the date picker is working cor ...

Fetching values from dynamically generated elements in a Vue.js loop

I am currently working on creating a table that includes checkboxes and text fields based on an array of items, essentially building a "questionnaire" where the questions are pulled from a database. My question now is how can I efficiently retrieve inform ...

Typescript best practice: limiting global variables per file

I found it very useful in jslint to require declaring all used globals at the beginning of a file using the following syntax: /*global console, document */ Is there a similar feature available in Typescript? I managed to disable the implicit availabilit ...

Can classes be encapsulated within a NgModule in Angular 2/4?

Looking to organize my classes by creating a module where I can easily import them like a separate package. Take a look at this example: human.ts (my class file) export class Human { private numOfLegs: Number; constructor() { this.numOfLegs = 2 ...

When the file is active on a local machine, the bot commands run smoothly. However, these commands do not execute on a remote

Lately, while working on coding a discord bot using discord.js, I came across an issue. Whenever I run my bot on my local machine, all the commands work perfectly fine. However, after committing and pushing the code to GitHub, and then allowing buddy.works ...

Incorporate a progress bar into the Material-UI table design

I have the following example of a Material-UI table: import React from "react"; import clsx from "clsx"; import { createStyles, lighten, makeStyles, Theme } from "@material-ui/core/styles"; import Table from "@mat ...

How can I trigger the modal if emitting "go-modal" at another instance does not work?

I have implemented the standard vuetifyjs/dialogs on my page without any server-side scripts. The layout of the components on the page is structured as follows: <div id="main"> ... <v-expansion-panel>...<!-- v-for... --> <v ...

Creating a personalized design for MUI TextField spin button

Looking to customize the appearance of the up/down spin buttons in MUI TextField. Desiring white arrows and a black surrounding area that's slightly larger, akin to this: I'm aware that adjustments need to be made within input::-webkit-outer-sp ...

When viewing an array, the objects' values are displayed clearly; however, when attempting to access a specific value, it

I am attempting to retrieve the board_id of my objects in the columnsServer array... columnsServer: Column[]; this.service.getColumns() .subscribe(data => { this.columnsServer = data; console.log(this.columnsServer); for (this.i = 0; this.i ...

What could be the reason for my image not loading properly in Vue.js 3?

I'm struggling to load an image using a relative path and value binding with v-for in my template code. Despite following the correct syntax, the website is displaying an error indicating that it can't retrieve the image. Here's a snippet of ...

Oh no! Nuxt3 is throwing an error because it's unable to access the properties of undefined when trying to read 'options

When attempting to create a Nuxt 3 application, I encountered this error. At the moment, I have not yet utilized Axios and the project is mostly empty aside from the initial code. (base) app % npx nuxi build Nuxi 3.0.0 ...

The error message "MediaMetadata is not defined as no-undef and cannot be used as a constructor" appeared when trying to use MediaMetadata

I have successfully implemented a playlist player using howler.js in vuejs. Now, I am looking to enhance it by integrating the MediaMetadata API. While the MediaSession API is functioning well with controls like notification bar, keyboard controls, and rem ...

In React TS, the function Window.webkitRequestAnimationFrame is not supported

I'm facing an issue where React TS is throwing an error for window.webkitRequestAnimationFrame and window.mozRequestAnimationFrame, assuming that I meant 'requestAnimationFrame'. Any suggestions on what to replace it with? App.tsx import Re ...

What type should React Router props be?

For a specific scenario, I developed a custom router component that redirects if certain parameters are missing: const StateParamRoute = (props: any) => { ... return stateParam ? <Route {...props} /> : <Redirect to="/error" />; ...

Configuring TypeScript for Firefox to recognize specific types such as browser.storage

As per the documentation from Mozilla, I should be able to utilize browser.storage.sync.get in my extension. However, I am encountering some challenges in getting TypeScript to recognize that I can use browser. I have attempted the following (which has wo ...

Using TypeScript in React, how can I implement automation to increment a number column in a datatable?

My goal is to achieve a simple task: displaying the row numbers on a column of a Primereact DataTable component. The issue is that the only apparent way to do this involves adding a data field with indexes, which can get disorganized when sorting is appli ...

The Right Way to Set Up Form Data in VueJS

Currently, I am facing an issue with a component that renders a form and pre-fills the fields with data retrieved from an ajax request. The problem lies in my desire to edit existing fields and simultaneously add new fields for submission. To accomplish t ...

VueJS integrated with FullCalendar: Dynamically load FullCalendar only after linking required scripts in index.html

When trying to incorporate fullCalendar into my Vue component, I encountered the error message "fullCalendar is not a function." It appears that the scripts I have included in my index.html file are loading after the Vue component has already been loaded. ...

Vue.js combined with Video.js (MPEG-DASH) is throwing an error: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED)

I am facing an issue with Video.js when using it as a component in vue.js. I receive a .mpd link from a server and I want to display the video from that link. Following the example in the documentation of Video.js and Vue integration. Every time I call th ...

What is the most effective way to retrieve the value of a child component in Angular 2 and pass it to the parent component?

I am working on a project with a child component (calendar) and a parent component (form). I need to select a value in the calendar and then access that value in the form component. What is the best way to achieve this? Child Component.ts: import { ...