Using Typescript to import Eslint with the `import/named` method

My project utilizes Eslint with the following configurations:

  • parser: @typescript-eslint/parser 1.4.2
  • plugin: @typescript-eslint/eslint-plugin 1.4.2
  • resolver: 
    eslint-import-resolver-typescript
    1.1.1
  • rule extends: airbnb-base and 
    plugin:@typescript-eslint/recommended

You can also refer to my .eslintrc file for more details:

{
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint"
  ],
  "extends": ["airbnb-base", "plugin:@typescript-eslint/recommended"],
  "settings": {
    "import/parsers": {
      "@typescript-eslint/parser": [".ts"]
    },
    "import/resolver": {
      "typescript": {}
    }
  },
  "rules": {
    "no-plusplus": "off",
    "import/no-cycle": "warn",
    "@typescript-eslint/indent": ["error", 2],
    "@typescript-eslint/explicit-member-accessibility": "off"
  }
}

In the file A.ts, I have defined: export type Id = string; and imported it from B.ts: import { Id } from '../A';

I attempted to use:

import A from '../A';

and tried calling A.Id, but encountered an error message:

A only refers to a type, but is being used as a namespace here

Both methods resulted in errors, one triggered by eslint, and the other by my IDE (VS Code or Tshint).

Would you be able to assist me in resolving one of these issues?

Thank you in advance!

typescripteslinteslint-config-airbnb

Answer №1

It appears that the issue you are experiencing is not related to Eslint but rather a Typescript error.

Missing from your A.ts file is a default export. To import the entire module from A.ts, you should use:

import * as A from '../A';

For further information, refer to the Typescript documentation on import statements.

Answer №2

According to this document on import/named:

Please be aware that imports and exports of type, commonly seen in TypeScript, are always exempted.

Answer №3

Are you familiar with this method?

import A as A from '../A';

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

What is the relationship between Typescript references, builds, and Docker?

I am facing a dilemma with my projectA which utilizes a common package that is also needed by my other Nodejs services. I am unsure of the best approach to package this in a Docker file. Ideally, running tsc build would compile both the project and the dep ...

node.jstypescriptnpm

Definition of TypeScript array properties

Having some trouble creating a type for an array with properties. Can't seem to figure out how to add typings to it, wondering if it's even possible. // Scale of font weights const fontWeights: FontWeights = [300, 400, 500]; // Font weight alia ...

typescript

Transform a JSON array containing individual objects into a new JSON array with objects

My array contains objects with nested objects in each element, structured like this: [ { "person": { "name": "John", "isActive": true, "id": 1 } }, { "person": { "name": "Ted", "isActive": true, "id": 2 } } ] I ...

javascriptjsontypescript

What is the process of disabling console log in a Vue template?

Origins of the $log variable: Vue.prototype.$log = console.log Restricted Areas: <template> <!-- Restricted Area 1 --> <div @click="$log"> <!-- Restricted Area 2 --> {{ $log }} <!-- Restricted Area 3 -- ...

javascriptvue.jseslint

Is it possible to iterate through TypeScript using both keys and indexes?

Explained in detail at this link, TypeScript introduces a foreach loop: let someArray = [9, 2, 5]; for (let item of someArray) { console.log(item); // 9,2,5 } However, is there a way to access the index/key? I was thinking something along the lines of ...

for-loopforeachtypescript

What is the best way to verify if the ReactDOM.render method has been invoked with a React component as an argument

Here's the code snippet: index.tsx: import React, { Component } from 'react'; import ReactDOM from 'react-dom'; export function Loading(props) { return <div {...props}>loading...</div>; } export class MyComponent e ...

reactjstypescriptunit-testingjestjsreact-dom

Customize your Joi message using the .or() method

I'm attempting to personalize a message for the .or() function in Joi, similar to this: https://i.stack.imgur.com/68dKx.png The default message from Joi is as follows: Validation Error: "value" must contain at least one of [optionOne, optionTwo] ...

node.jstypescriptjoi

The issue arises due to conflicting indent configurations between eslint and @typescript-eslint/indent

Currently, I am using eslint and prettier in a TS express application. I am trying to set the tab width to 4, but it appears that there is a conflict between the base eslint configuration and the typescript eslint. When looking at the same line, this is w ...

javascriptnode.jstypescriptexpresseslint

Execute a selector on child elements using cheerio

I am struggling to apply selectors to elements in cheerio (version 1.0.0-rc.3). Attempting to use find() results in an error. const xmlText = ` <table> <tr><td>Foo</td><td/></tr> <tr><td>1,2,3</td> ...

typescriptcheerio

Dragging element position updated

After implementing a ngFor loop in my component to render multiple CdkDrag elements from an array, I encountered the issue of their positions updating when deleting one element and splicing the array. Is there a way to prevent this unwanted position update ...

angulartypescriptdrag-and-dropangular-materialangular-cdk

The index type '{id:number, name:string}' is not compatible for use

I am attempting to generate mock data using a custom model type that I have created. Model export class CategoryModel { /** * Properties */ public id : number; public name : string; /** * Getters */ get Id():number{ return this.id; ...

angulartypescript

JavaScript - Employing the .every function with an array containing objects

Is it possible to use the array.every method on multidimensional arrays? The structure of my array is as follows: tabs=[ {label: string, icon: icon, routerLink: link}, {label: string, icon: icon, routerLink: link}, {label: string, icon: icon, routerLink: ...

javascriptarraystypescript

What's the best way to maintain the return type of a function as Promise<MyObject[]> when using forEach method?

I am currently working with a function called search, which at the moment is set up to return a type of Promise<MyObject[]>: export function search(args: SearchInput) { return SomeInterface.performSearch(args) .then(xmlRequest =&g ...

javascripttypescript

The TypeScript inference feature is not functioning correctly

Consider the following definitions- I am confused why TypeScript fails to infer the types correctly. If you have a solution, please share! Important Notes: * Ensure that the "Strict Null Check" option is enabled. * The code includes c ...

javascripttypescripttype-inference

Having trouble getting the Typescript overload arrow function to function properly

(I am implementing strict null checks) The arrow function I have includes overloaded types: type INumberConverter = { (value: number): number; (value: null): null; }; const decimalToPercent: INumberConverter = (value: number | nul ...

typescriptoverloadingarrow-functions

Cypress mistakenly looks for cypress.config.js instead of .ts and attempts to find a file in an incorrect directory

Working within a NX mono repo, I am running component tests for an Angular app using Cypress. However, I keep encountering an error in the cypress app that occurs when a test reruns after making changes to the testing code: Your configFile threw an error f ...

angulartypescriptcypressnomachine-nxcypress-configuration

The 'subscribe' property is not available on the type '() => Observable<any>'

File for providing service: import { Observable } from 'rxjs/Rx'; import { Http, Response} from '@angular/http'; import { Injectable } from '@angular/core'; import 'rxjs/add/operator/Map'; @Injectable() export clas ...

angulartypescriptrxjsobservableangular2-services

What is the process for creating a React Component with partially applied props?

I am struggling with a function that takes a React component and partially applies its props. This approach is commonly used to provide components with themes from consumers. Essentially, it transforms <FancyComponent theme="black" text="blah"/> int ...

javascriptreactjstypescript

Gulp is failing to create a JavaScript file from TypeScript

Below is the Gulp task I am using: var gulp = require('gulp'); var typescript = require('gulp-typescript'); var sourcemaps = require('gulp-sourcemaps'); var tsProject = typescript.createProject('tsconfig.json'); var ...

node.jsimporttypescriptgulp

Using React Testing Library with TypeScript revealed issues with ES6 modules causing test failures

I am currently working on a small project that involves React, Typescript, and Mui v5. The application is relatively small and uses the default Create React App setup. Although I am new to unit and integration testing, I am eager to make use of the tools ...

reactjstypescriptmaterial-uireact-testing-librarybabel-jest