为什么我的React SVG图标组件触发“Missing return type on function”ESLint警告？

这个警告由ESLint的@typescript-eslint/explicit-function-return-type规则触发，该规则要求所有TS函数必须显式声明返回值类型。你当前定义的Icon函数组件没有声明返回值类型，TS虽然可以自动推断出返回值是JSX元素，但ESLint规则要求你手动标注，所以触发了警告。

你可以根据自己的开发习惯选任意一种方案：

• 方案1：显式标注组件返回类型，符合ESLint规则要求，推荐用这种写法
  两种常用标注方式的代码示例：

  import * as React from "react";
  
  // 写法1：用React.FC标注组件类型，自带返回类型定义，还支持默认props、children等类型校验
  export const Icon: React.FC = () => {
    return (
      <svg viewBox="">
        {/* 省略path内容 */}
      </svg>
    );
  };
  
  // 写法2：直接标注函数返回值为JSX.Element
  export const Icon = (): JSX.Element => {
    return (
      <svg viewBox="">
        {/* 省略path内容 */}
      </svg>
    );
  };
  

• 方案2：调整ESLint规则，关闭该校验
  如果你觉得每个函数都加返回类型太繁琐，可以在项目的ESLint配置文件（.eslintrc.js、.eslintrc.json等）中修改规则：

  {
    "rules": {
      // 完全关闭显式返回类型的校验
      "@typescript-eslint/explicit-function-return-type": "off"
    }
  }
  

  如果你只想关闭React组件的校验，保留普通业务函数的校验要求，可以配置为：

  {
    "rules": {
      "@typescript-eslint/explicit-function-return-type": ["warn", {
        "allowExpressions": true,
        "allowTypedFunctionExpressions": true
      }]
    }
  }
  

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