babel-eslint + typescript

[TrejGun]

Hi guys! thanks for awesome work on typescript integration I was playing with it and found out that new TS features are not working

in this example it does not recognize Pick type

interface Foo {
  x: string;
  y?: string;
  z?: string;
}

type Bar = Pick<Foo, 'x'>;

but its ok

The problem is some older staff

1 static properties and methods

export class X {
  public static x: string = "x";
}

export class X {
  public static x () {};
}

2 abstract class

export abstract class X {}

3 enum

export enum X {
  X = "x",
}

4 constructor type

export type ObjectType<T> = new () => T;

Here is my .babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false,
        "targets": {
          "browsers": [
            "last 2 versions",
            "ie >= 9"
          ]
        }
      }
    ],
    "@babel/preset-react",
    "@babel/preset-typescript"
  ],
  "plugins": [
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-proposal-class-properties"
  ],
  "ignore": [
    "node_modules/**"
  ]
}

and .eslintrc

{
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 2019,
    "ecmaFeatures": {
      "jsx": true
    },
    "sourceType": "module"
  },
  "env": {
    "browser": true
  },
  "extends": [
    "eslint:recommended",
    "prettier",
    "prettier/react",
    "plugin:react/recommended"
  ],
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "plugins": [
    "babel",
    "react",
    "prettier"
  ],
  "rules": {
    "indent": [
      2,
      2
    ],
    "react/jsx-indent": [
      2,
      2
    ]
  }
}

Is it some missconfiguration issue, old TS or plugins are not playing well together?

[nrei0]

@TrejGun did you check that plugin https://www.npmjs.com/package/babel-plugin-const-enum ? Maybe it could solve problems with enums?

[TrejGun]

@Ateiri, nope) Actually its a good question. I believe enum is one of the basic features of TS, so why this plugin exists in the first place) and then all other broken features which are not enum)))

I believe something essential is broken and could be fixed in relatively small commit but it looks like nobody is woirking on this at all

[nrei0]

@TrejGun Look there https://babeljs.io/docs/en/babel-plugin-transform-typescript#caveats

This plugin does not support const enums because those require type information to compile.

[TrejGun]

oh I see now what are you talking about)

However I was talking about enums which are perfectly fine. Let me try to make it as clear as possible. There is some code which works (transpiles/executes) with @babel/preset-typescript but in the same time is invalid in babel-eslint. I do understans that babel-eslint is not using tsconfig.json and babel does not emit type information in *.d.ts files so I'm not asking to be as precise as @typescript-eslint/parser but at least not fail on keywords such as enum and abstract and static

[nrei0]

@TrejGun Ah, I see. But why we can't use @typescript-eslint/parser with @typescript-eslint plugin instead?

As mentioned above, TypeScript produces a different AST format to the one that ESLint requires to work. This means that by default, the TypeScript AST is not compatible with the 1000s of rules which have been written by and for ESLint users over the many years the project has been going.

So that's why we need to use the parser, right?

From ESLint team's news (https://eslint.org/blog/2019/01/future-typescript-eslint)

That work focused mainly on the TypeScript parser, typescript-eslint-parser (and partly on eslint-plugin-typescript, which was not maintained by the ESLint team but had been maintained by Nicholas and James until recently). The Typescript parser would undoubtedly become the centerpiece of the TypeScript-in-ESLint story going forward; as such, we wanted to make sure that it would be properly maintained.

That's probably a defined focus on the working of parser implementation and improvements.

Ref; https://github.com/typescript-eslint/typescript-eslint (monorepo with parser).

[TrejGun]

I'm using typescript-eslint for now, but want to use babel-eslint for reasons discribed here

[kaicataldo]

Thank you for the PR. Now that @babel/eslint-parser has been released, we are making this repository read-only. If this is a change you would still like to advocate for, please reopen this in the babel/babel monorepo.