禁用js项目中的ts错误

Question

所以我有一个 cra 应用程序，并且我在 eslint --init 的帮助下设置了一个 .eslintrc.json 配置。外观如下：

{
    "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"
    }
}

我还有一个 jsconfig.json 文件。据我了解，这是从 tsconfig.json 配置派生的。这是我的样子：

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

根据我的阅读，如果将 checkJs 设置为 true，您将获得一些功能，例如自动导入，根据我的测试，这是正确的，我喜欢它。但我不喜欢的是我的 js 文件中有 ts 错误，并被推荐将 ts-ignore 添加到文件顶部或特定行。我能做的是将 checkJs 标志设置为 false，这些都会消失，但自动导入等功能也会消失。

我能否将 checkJs 标志保留为 true 并仍然禁用我的 js 项目中的所有 ts 错误？是否有 eslint 规则？据我所知，我需要安装一堆 ts eslint 软件包并更改我的 eslint 配置，但这似乎有点不对劲。这可以用一种稍微优雅的方式完成吗？

Answer 1

我参与了一个 monorepo 项目，该项目使用 TypeScript 仅基于 JSDoc/TSDoc 注释生成类型声明文件（.d.ts 文件）。所以，没有使用真正的 TypeScript 代码，只有特殊注释。

这是其中一个包的合并配置：

{
    "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"
    }
}

我们得到完整的类型检查，没有纯 JavaScript 无法解决的错误（我们的 TypeScript 版本是 ^4.2.4）。

但是，请记住，当您使用类型检查器时，通常您将被迫以更严格的方式编写代码（这很痛苦，但值得）。

如果您不想使用 TypeScript，因为它可能很难设置，而且如果您不想使用它的所有功能，那么它可能有点矫枉过正，您可以尝试 JSDoc（在我的看法，它应该是 JavaScript 类型注释的标准，但现实远非如此。

还考虑到您可能必须以某种方式提供类型注释（使用 TypeScript 作为类型检查引擎而不实际编写 TypeScript 的唯一方法是使用 JSDoc 或 TSDoc，这是前者的变体专为 TypeScript 设计）。

这里有一篇great article (there are many more, I recommend you to learn more about JavaScript type checking) (see this专门写JSDoc + TypeScript的。

在我们的项目中，我们是这样做的：

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

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

或者

/** @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};

最后，还有许多 JSDoc ESLint 库可供您使用。

禁用js项目中的ts错误

Disable ts errors in js project

javascript

typescript

eslint