ESLint is having trouble recognizing `DocumentEventMap` and is throwing an error for no-undef

My simple type is defined as shown below,

export type ClickEventProps = {
  handler: (event: MouseEvent) => void;
  additionalEvents?: Array<keyof DocumentEventMap>;
};

I'm facing an issue with ESLint, where it's flagging 'DocumentEventMap' as undefined and throwing a 'no-undef' error. Is there a way to resolve this without turning off the rule for this line? Could this possibly be a bug in '@typescript-eslint'?

The current development dependencies and versions I have for '@typescript-eslint' are,

"@typescript-eslint/eslint-plugin": "^5.59.7",
"@typescript-eslint/parser": "^5.59.7",

In .eslintrc.js, my configuration looks like this,

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['prettier', 'react', '@typescript-eslint'],
};

And here is my tsconfig setup:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext", "WebWorker"],
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "module": "esnext",
    "jsx": "react-jsx",
    "types": ["cypress", "node", "cypress-real-events"],
  },
}

Answer №1

Looking for answers in the typescript-eslint documentation? Here's a helpful FAQ article that addresses your query:

Key points to note:

The no-undef lint rule does not rely on TypeScript for determining global variables; instead, it utilizes ESLint's configuration.

We recommend refraining from using the no-undef lint rule in TypeScript projects as TypeScript already covers these checks more efficiently without any extra configuration.

Starting from our v4.0.0 release, this also pertains to types. If you are utilizing global types from a third-party package (e.g., those from an @types package), you will need to configure ESLint appropriately to define these global types. For instance, the JSX namespace from @types/react is a third-party global type that should be defined in your ESLint config.

...

If you opt to keep the ESLint no-undef lint rule enabled, you have the option to manually specify the set of permitted globals in your ESLint config, and/or use one of the pre-defined environment (env) configurations.

Answer №2

To ensure proper event handling, it is recommended that each EventTarget be accompanied by its own EventMap, even if no specific event types are assigned to that target. This would result in an empty object for such targets. The EventMap for a particular EventTarget can be accessed in the following manner:

const DocumentEventMap = EventMap<Document>;

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

Unlocking the power of global JavaScript variables within an Angular 2 component

Below, you will find a global JavaScript variable that is defined. Note that @Url is an ASP.Net MVC html helper and it will be converted to a string value: <script> var rootVar = '@Url.Action("Index","Home",new { Area = ""}, null)'; Sy ...

What advantages do binary shifts offer in enums?

What do you think about this code snippet? /** * Bitmask of states */ export const enum ViewState { FirstCheck = 1 << 0, // result is 1 ChecksEnabled = 1 << 1, // result is 2 Errored = 1 << 2, // result is 4 ...

Angular 2's RXJS observable failing to retain reference to 'this' object

Hey there! I'm currently working on an Angular 2 application and running into some trouble with observables for HTTP requests. Everything seems to work well in general, but I'm curious as to why it appears to be losing track of 'this'? ...

Splitting Ngrx actions for individual items into multiple actions

I'm currently attempting to create an Ngrx effect that can retrieve posts from several users instead of just one. I have successfully implemented an effect that loads posts from a single user, and now I want to split the LoadUsersPosts effect into ind ...

TypeScript overlooking mismatched type arguments in generics

Currently, I am in the process of constructing a pluggable interface/class system that enables an "output" to connect with an "input". To my surprise, TypeScript seems to overlook any warnings or errors that might arise when a compatible interface is pai ...

When using vs code, the autoimport feature tends to offer up confusing import suggestions for rxjs operators and the CanActivate interface

While working on my Angular service, I utilized the rxjs map and switchMap operators. When prompted by VS Code to choose between two import statements for switchMap, I opted for the first one without noticing any major differences. However, this decision l ...

Developing in TypeScript with styled-components allows for seamless integration between

New to TypeScript and seeking guidance. I currently have a component utilizing styled-components that I want to transition to TypeScript. import React from 'react' import PropTypes from 'prop-types' import styled from 'styled-comp ...

Troubleshooting the issue of process.nextTick not being recognized in Calgolia places.js

After successfully implementing Algolia's places.js in my Angular 7 project using NPM, I encountered an issue. I have integrated a form where one of the fields should be an input. <form [formGroup]="myForm"> <pre style="color: white; b ...

Allowing cross-origin resource sharing (CORS) in .NET Core Web API and Angular 6

Currently, I am facing an issue with my HTTP POST request from Angular 6. The request is successfully hitting the .net core Web API endpoint, but unfortunately, I am not receiving the expected response back in Angular 6. To make matters worse, when checkin ...

Leverage the power of react-redux useSelector with the precision of TypeScript

When attempting to utilize the new useSelector hook (shown in the example below) from react-redux in TypeScript, an error is encountered indicating that the function does not exist: Module '"../../../node_modules/@types/react-redux"' has no expo ...

Testing the Angular router-outlet using Jasmine

When testing web-app navigation using Jasmine spec with RouterTestingModule, I am facing challenges with nested fixture.whenStable().then(() => {}). For instance: After clicking on multiple links where the router-outlet changes the displayed component ...

Discovering the Java Map's value in Typescript

My application's backend is built using Spring Boot and the frontend is Angular 7. I need to send a map as a response, like this: Map<String, Object> additionalResponse = new HashMap<>() { { put("key1"," ...

picker elementClass()

I encountered an issue while using the datepicker from Material UI. The datepicker has a method called dateClass: dateClass() { return (date: Date): MatCalendarCellCssClasses => { const unvailableArray = this.shareDate.unavailableDates; ...

Issue with Adding Additional Property to react-leaflet Marker Component in TypeScript

I'm attempting to include an extra property count in the Marker component provided by react-leaflet. Unfortunately, we're encountering an error. Type '{ children: Element; position: [number, number]; key: number; count: number; }' is n ...

The API Gateway LogGroup is experiencing duplication issues and lacks critical details

I've been encountering difficulties setting up CloudWatch logs for my RestApi using cdk. Here is the code I'm using: const logGroup = new LogGroup(this, `apiLogs`, { logGroupName: `apiLogs`, retention: RetentionDays.ONE_WEEK }); ...

Encountering Errors while executing the yarn build or tsc commands

https://i.sstatic.net/JuueZ.pngWhenever I attempt to build a project or run the yarn tsc command, I encounter various types of errors. This seems to be due to them being installed in the incorrect location. But what could be causing this issue? Feel free ...

What is the process for retrieving information from Sanity?

Having trouble with creating a schema and fetching data from sanity. The console log is showing undefined. Not sure where I went wrong but suspect it's related to the schema creation. Testimonials.tsx interface Props { testimonial: [Testimonial] ...

Exploring Markdown in Nuxt.js 3: A Comprehensive Guide

I'm currently working on a new project using Nuxtjs 3, TypeScript, and the composition API. While I've been able to render the markdown content in the project successfully, there are specific instances where I need to access certain content withi ...

TS2802 Error message: Iterating through Type Map<> requires use of the '--downlevelIteration' flag or a '--target' setting of 'es2015' or higher

I've been grappling with this problem to no avail. Despite poring over various articles on downlevelIteration and target, and making adjustments to both tsconfig.json and package.json, I still keep encountering the same pesky error message. Here&apos ...

Encountering TAR_BAD_ARCHIVE Error While Installing Specific npm Modules

Encountering a peculiar issue while trying to install certain npm packages. Specifically, when attempting to install packages such as eslint, an error pops up: npm error code TAR_BAD_ARCHIVE npm error TAR_BAD_ARCHIVE: Unrecognized archive format Oddly eno ...