Disable ts errors in js project

Question

So I have a cra app and I have set up a .eslintrc.json config with the help of eslint --init. Here's how it looks:

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "plugin:react/recommended",
        "airbnb",
        "prettier"
    ],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "react/jsx-filename-extension": "off"
    }
}

I also have a jsconfig.json file. From what I understood, this is derived from the tsconfig.json config. Here's how mine looks:

{
  "compilerOptions": {
    "baseUrl": "./<path/to/src>",
    "checkJs": true,
    "jsx": "react"
  },
  "exclude": ["node_modules", "build"]
}

From what I've read, if you set checkJs to true you get some features like auto-imports and from what I've tested, this is true and I like it. But what I don't like is having ts errors in my js files and getting recommended to add ts-ignore to the top of the file or to a certain line. What I can do is set the checkJs flag to false and those will go away, but so would some features like auto-import.

Can I keep the checkJs flag to true and still disable all ts errors in my js project? Is there a eslint rule for that? From what I saw, I would need to install a bunch of ts eslint packages and alter my eslint config, but this seems a bit off. Can this be done in a somewhat elegant way?

Do you want those features ("auto-import" and other IDE hints and inference) in your project or are you maintaining a library and want those features for your consumers? — Ernesto Stifano
– Ernesto Stifano, Commented Aug 6, 2021 at 9:25

Ernesto Stifano · Accepted Answer · 2021-08-06 09:56:08Z

1

I have worked on a monorepo project that uses TypeScript for type declaration files generation only (.d.ts files) based on JSDoc/TSDoc annotations. So, no real TypeScript code is used, only special comments.

This is the merged configuration for one of the packages:

{
    "compilerOptions": {
        "target": "ESNext",
        "module": "ESNext",
        "moduleResolution": "Node",
        "resolveJsonModule": true,
        "lib": ["ESNext", "DOM"],
        "allowJs": true,
        "checkJs": true,
        "noEmitOnError": true,
        "strict": true,
        "noImplicitAny": false,
        "strictNullChecks": false,
        "esModuleInterop": false,
        "forceConsistentCasingInFileNames": true,
        "useDefineForClassFields": true,
        "removeComments": false,
        "types": ["node", "mocha", "chai", "webpack", "tapable", "react"],
        "allowSyntheticDefaultImports": true,
        "noEmit": false,
        "declaration": true,
        "emitDeclarationOnly": true,
        "declarationDir": "./types"
    }
}

We get full type checking and no errors that can't be solved by pure JavaScript (our TypeScript version is ^4.2.4).

However, keep in mind that when you work with a type checker, generally you'll be forced to write your code in a stricter way (it is a pain, but it is worth it).

If you don't want to deal with TypeScript, because it may be hard to setup and maybe it is an overkill if you won't use all of its features, you can try JSDoc (in my opinion, it should have been the standard for JavaScript type annotations, but the reality is far from that).

Also consider that it is possible that you will have to provide type annotations somehow (the only way to use TypeScript as a type-checking engine without actually writing TypeScript is by using JSDoc or TSDoc which is a variant of the former specifically designed for TypeScript).

Here is a great article (there are many more, I recommend you to learn more about JavaScript type checking) (see this that specifically writes about JSDoc + TypeScript).

In our project, we do things like this:

/** @type {Array<number>} */
const myNumbersArray = [];

myNumbersArray.push(0);   // OK
myNumbersArray.push('0'); // ERROR

Or

/** @module core/modules/string-utils/split-by-words */

import {parse} from './parse.js';

/**
 * @description Splits passed string by words.
 * @param {string} str - Input string.
 * @returns {Array<string>} Results array.
 */
function splitByWords(str) {
    return parse(str).map((item) => item.content);
}

export {splitByWords};

Finally, there are many JSDoc ESLint libraries that you can use.

answered Aug 6, 2021 at 9:56

Ernesto Stifano

3,1301 gold badge13 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Vivere Over a year ago

This is not what I'm looking for. I don't have any problem with TS, I prefer it really over JS but for a certain small project I decided to use pure JS and I simply want the TS errors to disappear.

Ernesto Stifano Over a year ago

@Vivere if you wan't TS errors to disappear I would recommend you to disable/remove TS altogether. Using TS and adding ts-ignore comments in all files just to make your IDE 'smarter' seems a bit extreme. Using JSDoc could be a valid alternative because it is pure JS, but without the TS interpreter I think there will be no difference at IDE level.

Vivere Over a year ago

I agree, I will look into JSDoc. I still hope for a solution whitin jsconfig though.

Collectives™ on Stack Overflow

Disable ts errors in js project

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related