Styled Components插值函数触发Missing return type on function ESLint错误

我之前碰到过一模一样的问题，这本质是ESLint规则和TypeScript类型推断的冲突——虽然TypeScript能准确识别你的插值函数返回string，但@typescript-eslint/explicit-function-return-type规则默认要求所有函数必须显式声明返回类型，哪怕类型已经能被完美推断。

下面是几个实用的解决方案：

方案1：调整ESLint规则，允许表达式函数省略返回类型 #

这是最推荐的全局解决方式，既不破坏代码规范，又能让styled-components的插值函数正常工作。修改你的.eslintrc.js中的@typescript-eslint/explicit-function-return-type规则，开启allowExpressions选项：

module.exports = {
  // ...其他配置项
  rules: {
    // ...你已有的规则
    '@typescript-eslint/explicit-function-return-type': [
      'error',
      {
        allowExpressions: true, // 允许作为表达式使用的函数省略返回类型
        allowArrowFunctions: true, // 可选，进一步明确允许箭头函数场景
      },
    ],
  },
};

这个配置告诉ESLint：对于像styled-components插值箭头函数这种表达式形式的函数，不需要强制显式声明返回类型，因为TypeScript已经能准确推断出类型。

方案2：临时禁用单条插值函数的ESLint检查 #

如果你不想修改全局规则，可以在报错的插值函数上方添加注释，临时禁用该规则：

const StyledApp = styled.div`
  // 临时跳过返回类型检查
  background-color: ${/* eslint-disable-next-line @typescript-eslint/explicit-function-return-type */ (props) => props.theme.colors.secondary};
`;

这种方式适合偶尔出现的场景，但如果有大量插值函数，会让代码显得冗余。

为什么你的类型声明没解决这个问题？ #

你的主题类型合并是完全正确的——TypeScript确实能识别props.theme.colors.secondary是string，所以VS Code会显示函数返回类型为string。但ESLint的@typescript-eslint/explicit-function-return-type规则是独立于TypeScript类型推断的，它只检查代码的语法结构，不会读取TypeScript的推断结果，所以即使类型正确，它依然会触发报错。

额外检查：确保类型声明文件被正确识别 #

确认你的styled.d.ts在tsconfig.json的include范围内（你的配置里include: ["src"]，只要文件在src目录下就没问题），否则TypeScript无法读取你的主题扩展类型，但从你的描述来看，这个不是问题的根源。

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