Typescript 在 import 语句之前为 ...rest 参数生成变量，导致 es-lint import/first 错误

Question

在使用

...rest

传播 props 编译组件代码时遇到 es-lint 错误（在模块主体中导入）。

我想做的是创建为某些道具设置默认值的组件，而不使用defaultProps（我收到控制台日志警告，这将在未来的版本中删除）。

以下是我如何编写组件的示例：

ButtonTest.tsx：

type ButtonTestProps = {
  style?: string;
  label: string;
};

// By default this component should have the style "border"
export function ButtonTest({ style = "border", ...rest }: ButtonTestProps) {
  const { label } = rest;
  return (
    <button className={style === "border" ? "border-4 border-blue" : ""}>
      {label}
    </button>
  );
}

此文件不会引发任何 es-lint 错误，但是当 Typescript 将其编译为 JavaScript 时，它会在导入 jsx 之前在文件顶部创建一个定义(?)

...rest

的变量，这会导致es-lint 错误（“在模块主体中导入；重新排序到顶部导入/第一个”）：

ButtonTest.js：

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { jsx as _jsx } from "react/jsx-runtime";
export function ButtonTest(_a) {
    var { style = "border" } = _a, rest = __rest(_a, ["style"]);
    const { label } = rest;
    return (_jsx("button", { className: style === "border" ? "border-4 border-blue" : "", children: label }));
}
//# sourceMappingURL=ButtonTest.js.map

我尝试保存并重新启动编译器以获得相同的结果。我知道我可以通过禁用文件的 es-lint 来解决这个问题，但我真的想了解为什么会发生这种情况，以及是否是因为我做错了什么。

有什么方法可以配置源映射/打字稿编译器来避免此错误，或者我尝试使用默认组件道具进行设置是否存在问题？

如果有人能对此提供一些建议或见解，我将非常感激！如果需要有关该问题的更多信息，我很乐意提供。

Answer 1

不要在转译输出 JavaScript 文件上运行 ESLint (https://typescript-eslint.io/troubleshooting/faqs/javascript#should-i-run-eslint-on-transpiled-output-javascript-files)。源 TypeScript 文件包含输出 JavaScript 文件的所有内容以及类型注释。对输出 JavaScript 文件进行 linting 没有任何好处。