React组件出现“PropType已定义但未使用”ESLint错误求解

你遇到的这个误报，本质是ESLint的TypeScript规则没正确识别类型的实际使用场景，具体原因和解决方法如下：

问题原因 #

你在map回调里给解构的对象手动标注了: LinkType，但TypeScript已经能通过MyComponentPropsType中links?: LinkType[]的定义，自动推断出数组每个元素的类型。这种手动重复标注的行为，让ESLint的@typescript-eslint/no-unused-vars规则误判为“类型属性未被使用”。另外，代码里links可能为undefined，直接调用map还会触发运行时错误，这也是需要修复的点。

解决方案 #

方案1：移除手动类型标注（推荐） #

利用TypeScript的自动推断能力，去掉map回调里的: LinkType标注，ESLint就能正确识别类型属性的使用情况，同时给links加可选链避免空值报错：

type LinkType = {
  name: string;
  href: string;
  target?: string;
  rel?: string;
};

type MyComponentPropsType = {
  links?: LinkType[];
};

function MyComponent({ links }: MyComponentPropsType): React.ReactElement {
  return (
    <ul>
      {links?.map(({ name, href, target, rel }) => (
        <li key={name}>
          <a href={href} rel={rel} target={target}>
            {name}
          </a>
        </li>
      ))}
    </ul>
  );
}

方案2：调整ESLint规则配置 #

如果必须保留手动类型标注，可以修改ESLint配置文件，调整@typescript-eslint/no-unused-vars规则忽略这类场景：

{
  "rules": {
    "@typescript-eslint/no-unused-vars": [
      "error",
      {
        "varsIgnorePattern": "^LinkType$"
      }
    ]
  }
}

不过这种方案不如第一种简洁，不推荐优先使用。

内容的提问来源于stack exchange，提问作者Tais Reis