Reactjs &引用；函数“上缺少返回类型”；样式化组件插值函数中存在错误

用于从道具提取主题数据的插值函数会产生“函数上缺少返回类型”。eslint错误。我使用声明合并来键入主题数据，如中所述。合并似乎工作正常，因为

props.theme

是根据我的声明键入的

通过为插值函数指定返回类型，可以解决此问题

${（道具）：string=>props.theme.colors.secondary}

但我认为这不必要，因为我已经在类型声明文件中指定了

props.theme.colors.secondary

的类型。此外，在vs代码错误弹出窗口中，返回类型似乎是已知的（

函数（…）：string

），但仍然给出了错误

输入密码

vs代码中的错误弹出窗口

---

我通过将以下规则添加到我的

.eslintrc.js

“@typescript eslint/显式函数返回类型”：[
“错误”，
{
allowExpressions:true
}
]

它允许函数表达式不具有明确定义的返回类型，这将从样式化组件的插值函数中删除缺少的返回类型错误，因为它们是函数表达式

然而，我仍然不完全满意这个解决方案，因为它只是简单地关闭错误，而不是直接修复它。如果您有更好的解决方案，请与他人分享。

以下方法有效：

从“样式化组件”导入样式化；
constyledapp=styled.div（（道具）=>{
返回{
背景色：props.theme.colors.secondary，
};
});

---

我已经在我的

索引.tsx中设置了
ThemeProviders
，如下所述：
您使用
ThemeProvider
自定义还是直接从
样式化组件
？我使用默认的
ThemeProvider
从
样式化组件
生成类型。您有这种类型的文件吗：
https://www.styled-components.com/docs/api#create-a-声明-文件
或
https://gist.github.com/chrislopresto/490ef5692621177ac71c424543702bbb#file-样式化组件ts
如果不是，你应该添加它。是的，我有
https://www.styled-components.com/docs/api#create-a-声明-文件
，上面我的帖子中也显示了这一点。这并不是问题的真正解决方案。我更喜欢使用显式形式
${（props）：string=>props.theme.colors.secondary}
，即使这样它也不是最优的。@bjunix您应该将您的评论作为一个答案。这是一个恰当的解决方案！
// App.tsx
import React from 'react';
import styled, { ThemeProvider } from 'styled-components';
import theme from 'theme/default';

const StyledApp = styled.div`
  // The error is caused by this interpolator function     
  background-color: ${(props) => props.theme.colors.secondary};
`;

// styled.d.ts
import 'styled-components';

// Extend the default theme type
declare module 'styled-components' {
  export interface DefaultTheme {
    colors: {
      primary: string;
      primaryLight: string;
      primaryLighter: string;
      primaryDark: string;
      secondary: string;
      secondaryLight: string;
      secondaryDark: string;
      font: string;
    };
  }
}

// theme/default.tsx
import { DefaultTheme } from 'styled-components';

const theme: DefaultTheme = {
  colors: {
    primary: 'hsl(0, 98%, 33%)',
    primaryLight: 'hsl(359, 98%, 41%)',
    primaryLighter: 'hsl(14, 54%, 52%)',
    primaryDark: 'hsl(2, 90%, 20%)',
    secondary: 'hsl(260, 4%, 31%)',
    secondaryLight: 'hsl(35, 13%, 45%)',
    secondaryDark: 'hsl(0, 14%, 1%)',
    font: 'hsl(317, 7%, 79%)'
  }
};

export default theme;

// .eslintrc.js
module.exports = {
  env: {
    browser: true
  },
  parser: '@typescript-eslint/parser',
  extends: [
    'airbnb',
    'airbnb/hooks',
    'plugin:@typescript-eslint/recommended',
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module'
  },
  rules: {
    'react/jsx-filename-extension': [1, { extensions: ['.jsx', '.tsx'] }],
    'react/prop-types': 'off'
  },
  settings: {
    'import/extensions': ['.js', '.jsx', '.ts', '.tsx'],
    'import/parsers': {
      '@typescript-eslint/parser': ['.ts', '.tsx']
    },
    'import/resolver': {
      node: {
        paths: 'src',
        extensions: ['.js', '.jsx', '.ts', '.tsx']
      }
    }
  }
};

// tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "baseUrl": "src"
  },
  "include": ["src"]
}

    // deps
    "@types/react": "16.9.2",
    "@types/react-dom": "16.9.0",
    "@types/styled-components": "^4.1.18",
    "overmind": "^19.1.1",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "3.1.1",
    "styled-components": "^4.3.2",
    "typescript": "3.6.2"
    "@typescript-eslint/eslint-plugin": "^2.1.0",
    "@typescript-eslint/parser": "^2.1.0",
    "babel-core": "^7.0.0-bridge.0",
    "eslint": "^6.1.0",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-config-prettier": "^6.2.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-prettier": "^3.1.0",
    "eslint-plugin-react": "^7.14.3",
    "eslint-plugin-react-hooks": "^1.7.0",
    "prettier": "^1.18.2"