Eslint and prettier are unfamiliar with the keyof typeof keyword

My TypeScript code, which should work, is getting an error from my eslint:

const foo = {
  key1: 'value1',
  key2: 'value2'
};

type MyType = keyof typeof foo;

ESLint: Parsing error: Unexpected token `typeof`, expected the token `;`(prettier/prettier

The application was created using the create-react-app tool with default eslint config and added prettier support. Here is the configuration:

// eslintrc
"extends": [
    "react-app",
    "react-app/jest",
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],

Here is a screenshot of my IDE showing the error.

Any suggestions or ideas on how to fix this? Thank you!

Edit1: I discovered that the plugin:prettier/recommended is causing the issue, but I would like to keep it if possible.

typescripteslintprettier

Answer №1

Ensure that you are using a compatible parser for eslintrc.js file, consider these configurations:

module.exports = {
      root: true,
      parser: '@typescript-eslint/parser',
      plugins: ['@typescript-eslint'],
      extends: [
        "react-app",
        "react-app/jest",
        "plugin:prettier/recommended",
        "prettier/@typescript-eslint",
        "prettier/react"
     ]
};

Answer №2

Despite making changes to my configuration like this:

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "extends": [
    "react-app",
    "react-app/jest",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "no-console": "warn"
  },
  "globals": {
    "JSX": true
  }
}

I had to remove plugins: ['@typescript-eslint'], due to encountering the following issue: 

Error: "prettier/@typescript-eslint" has been merged into "prettier" in eslint-config-prettier 8.0.0

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

Facing a TypeScript Error when using the ts-node-dev --rs (restart) option in Node environment

When I use the --rs option (--rs - Allow to restart with "rs" line entered in stdio, disabled by default), it gives me an error when running npm run publish: https://i.sstatic.net/Vxnel.png Here is the package.json file: { "name": & ...

node.jstypescriptnpm

Adding custom type definitions for an untyped npm module in TypeScript 2

Despite attempting various methods recommended in other sources, I am struggling to configure a TypeScript project that utilizes an untyped NPM module. Below is a simplified example along with the steps I have taken. Let's imagine, for this demonstra ...

typescriptnpmtypescript-typings

.env file cannot be utilized in JavaScript

Currently, I am working on a project where both the front-end and server are located in one directory. I am using a .env file in the root directory, and the structure of the project looks like this: project frontend (directory) server (directory) .env (fi ...

javascripttypescriptenvironment-variablesfrontend

The error message "TypeError: is not a function" has been encountered while using NodeJS with Typescript

I am encountering an issue in nodeJS with TypeScript. I have tested my code both without and with this.: this.funktion2(); ^ TypeError: this.funktion2 is not a function funktion1(); //case #two ^ ReferenceError: funktion1 is not ...

node.jstypescriptionic2

The RadListView in Angular Nativescript fails to update when triggered from a different page

My RadListView is populated with data from an http request: <RadListView #listView separatorColor="transparent" pullToRefresh="true" (pullToRefreshInitiated)="refreshFavorites($event);" *ngIf="filteredItems && filteredItems.length; else ...

angulartypescriptnativescript

Encountering difficulties in creating a custom Response type in Express.js with TypeScript

I have encountered a TypeScript error while trying to create my own custom Response interface by extending some methods instead of using the default Response type of Express.js: The last overload resulted in the following error: Argument of type '(r ...

node.jstypescriptexpress

Cucumber Wrangler

I am completely new to using protractor/cucumber and restler in Typescript. The code below is what I have so far for hitting an endpoint URL and getting the response: Given('Hit the {string}', async (string) => { browser.quit() var data: ...

typescriptprotractorcucumberrestler

Flatten a specific property of an object recursively

If I have a data structure containing nested objects, I need to create a type that removes specific keys and flattens certain fields recursively Input: { sys: { id: string; }; metadata: { author: string; }; fields: { ...

typescript

What is the reason for this assignment not being activated?

After going through the official xstate tutorial, I decided to create my own state machine inspired by a post on dev.to by a member of the xstate team. Everything is working fine except for the fact that the output is not being updated. It seems like the ...

javascriptreactjstypescriptxstate

Sharing data between different Angular components that are not directly related can be achieved by utilizing a service in Angular

This is the service class for managing data export class DataService { public confirmationStatus = new Subject(); updateConfirmationStatus(status: boolean) { this.confirmationStatus.next(status); } getConfirmationStatus(): Observable<any&g ...

angulartypescriptangular-servicesangular-route-guards

Exploring Transformation in Angular

I am looking to enhance my understanding of how ChangeDetection works, and I have a query in this regard. When using changeDetection: ChangeDetectionStrategy.OnPush, do I also need to check if currentValue exists in the ngOnChanges lifecycle hook, or is i ...

angulartypescriptangular-changedetection

Transform to a type specialized for a generic type

Is it possible to achieve something similar in TypeScript? type Something = {...} interface A extends Something {...} interface B extends Something {...} interface MyInterface<T extends Something> { method(): T anotherMethod(): number | num ...

typescripttypescript-typingstypescript-generics

Obtaining data attributes in Angular 8

I'm working with Angular 8 and I came across an issue. In my code snippet, there are two data attributes assigned to a button element, but only one attribute is showing up. Is this a syntax error or a bug? <button [attr.data-popolamento]="all" [a ...

htmlangulartypescript

Implementing Dynamic Tooltip Values in Angular

Is there a way to dynamically assign tooltip text in Angular? I've attempted the following code with no success: <h5>Contract Name </h5> <span tooltip="{{ContractName}}" class="fac-tooltip tip-left" ...

angulartypescript

Strategies for managing the "ref" property of Material-UI component props within our custom components

I have a unique custom component setup as shown below: // ... import { PaperProps, styled } from '@mui/material'; type ComponentProps = PaperProps & { a: string, b: string }; export const MyPaper = styled(Paper)(/* ... */); const Compo ...

javascriptreactjstypescripttypesmaterial-ui

How can I access members outside of a class without a name in Typescript?

I recently developed an "anonymous" class inspired by this insightful discussion on Typescript anonymous classes. However, I'm facing a challenge in accessing the outer scope members. Here's a snippet of my code for context: class BaseCounter { ...

typescript

Can we verify if this API response is accurate?

I am currently delving into the world of API's and developing a basic response for users when they hit an endpoint on my express app. One question that has been lingering in my mind is what constitutes a proper API response – must it always be an o ...

javascripttypescriptapiexpress

What exactly is the purpose of the colon in JavaScript's import statement?

Looking at the following example. import { QueryClientContract, TransactionClientContract } from '@ioc:Adonis/Lucid/Database' I am puzzled by the use of colons and I am unsure about where the imported files are being referenced from. ...

javascriptnode.jstypescriptes6-modulesadonis.js

What is the best way to distribute an eslint file among a team?

Situation Managing an eslint file that is utilized in various Nodejs projects within a team can be cumbersome. Each time the file is updated, it needs to be manually propagated to all projects, leading to confusion about which projects have the latest ver ...

node.jsnpmcontinuous-integrationeslint

Why is it advantageous to use Observable as the type for Angular 5 component variables?

Being a beginner in Angular 6, I have been exploring the process of http mentioned in this link: https://angular.io/tutorial/toh-pt6#create-herosearchcomponent One thing that caught my attention was that the heroes array type is set to Observable in the ...

angulartypescripthttpobservable