所有样式化的组件都返回任何 (@types/styled-components)

Posted 2023-03-13

【中文标题】所有样式化的组件都返回任何 (@types/styled-components)

【英文标题】：All styled components return any (@types/styled-components)

【发布时间】：2020-11-28 14:04:19

【问题描述】：

在将样式组件与 VSCode 一起使用时，我遇到了一个奇怪的问题。下面基本上是我从样式组件中得到的任何组件，它们都返回任何。

我之前让它工作过，但不知道什么时候，我看不出设置中有什么问题来为所有组件返回任何内容。我试图回到 tslint 配置，删除/注释掉 eslintrc 文件中的所有规则，但也无法正常工作。

令人惊讶的是，我尝试了用于我的项目的starter kit，并且其中的类型与原始设置一起使用。

我尝试使用相同版本的 styled-components 包，但仍然无法使用。非常欢迎任何帮助或解决此问题的方向！

.eslintrc.js

module.exports = 
  env: 
    browser: true,
    es6: true,
  ,
  extends: [
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
    'plugin:react/recommended',
    'prettier/@typescript-eslint',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: 
    project: './tsconfig.json',
    sourceType: 'module',
    ecmaFeatures:  jsx: true ,
  ,
  plugins: ['@typescript-eslint', 'react', 'react-native'],
  rules: 
    camelcase: 'off',
    'react/display-name': 'off',
    'react/prop-types': 'off',
    '@typescript-eslint/ban-ts-ignore': 'off',
    '@typescript-eslint/camelcase': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/interface-name-prefix': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/no-use-before-define': 'off',
    '@typescript-eslint/no-unused-vars': ['error',  argsIgnorePattern: '^_' ],
    '@typescript-eslint/no-non-null-assertion': 'off',
    '@typescript-eslint/unbound-method': 'off',
    '@typescript-eslint/no-unsafe-assignment': 'off',
    '@typescript-eslint/no-unsafe-call': 'off',
    '@typescript-eslint/no-unsafe-member-access': 'off',
    '@typescript-eslint/no-unsafe-return': 'off',
    '@typescript-eslint/no-misused-promises': [
      'error',
      
        checksVoidReturn: false,
      ,
    ],
    '@typescript-eslint/explicit-module-boundary-types': ['error',  allowArgumentsExplicitlyTypedAsAny: true ],
  ,
  settings: 
    react: 
      pragma: 'React',
      version: 'detect',
    ,
  ,
  ignorePatterns: ['node_modules/**/*', 'docs/**/*', 'examples/**/*', 'lib/**/*'],
;

tsconfig.json

  "compilerOptions": 
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./src",
    "experimentalDecorators": true,
    "inlineSources": true,
    "jsx": "react",
    "lib": ["es2017", "dom"],
    "module": "commonjs",
    "moduleResolution": "node",
    "noEmit": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "plugins": [
      
        "name": "typescript-styled-plugin",
        "lint": 
          "validProperties": [
            "shadow-color",
            "shadow-opacity",
            "shadow-offset",
            "shadow-radius",
            "padding-horizontal",
            "padding-vertical",
            "margin-vertical",
            "margin-horizontal",
            "tint-color",
            "aspect-ratio",
            "elevation"
          ]
        
      
    ],
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "sourceRoot": "./src",
    "strict": true,
    "strictPropertyInitialization": false,
    "suppressImplicitAnyIndexErrors": true,
    "target": "es2015"
  ,
  "include": [".eslintrc.js", "src/**/*.ts", "src/**/*.tsx"]

"lint": "yarn format && yarn eslint && yarn stylelint",
"eslint": "tsc -p . --noEmit --skipLibCheck; eslint --fix 'src/**/*.ts,tsx'",
...
"@typescript-eslint/eslint-plugin": "3.8.0",
"@typescript-eslint/parser": "3.8.0",
"eslint": "7.6.0",
"eslint-config-prettier": "6.11.0",
"eslint-plugin-react": "7.20.5",
"eslint-plugin-react-native": "3.8.1",

styled.d.ts

import 'styled-components';

declare module 'styled-components' 
  // tslint:disable-next-line
  export interface DefaultTheme 
    darkMode: boolean;
    background: string;
    lightBackground: string;
    grayBackground: string;
    darkBackground: string;
    heading: string;
    subheading: string;
    copy: string;
    stroke: string;
    underlay: string;
    map: string;
  

【问题讨论】：

嗨@jbr，你找到解决方案了吗？我也有同样的问题...

没有，我还没有找到任何解决方案，有空再挖掘一下

同样的问题 :( 我已经尝试了很多 Typescript/styled-components/@types/styled-components 版本的组合，但都没有运气。

我无法解释如何，但它又可以工作了。我运行最新版本的 vscode、样式化组件和 eslint 依赖项。不确定发生了什么，但可能是产生此问题的依赖项的内部问题。

糟糕。一直希望有解决办法。我的项目中确实有一些较旧的eslint 依赖项存在这个问题，所以我将通过一个新的linting 设置开始，看看这是否是根本原因。很高兴你把它修好了！

【参考方案1】：

这就是我解决它的方法 - 导航到项目中 styled-components 的类型文件后，我看到了这个错误：node_modules/hoist-non-react-statics/index"' has no exported member 'NonReactStatics'. ts

原来我的包使用的是旧版本的提升非反应静态，它覆盖了样式组件使用的类型。

升级这些包（在我的例子中是 react-redux）解决了这个问题。

【讨论】：

谢谢！！！在我的例子中，它是 recompose 模块。

【参考方案2】：

Types 悄悄地转移到了@types/styled-components-react-native。当然，更新您的其他依赖项仍然很好:)

参考：https://github.com/styled-components/styled-components/issues/2099