import styled 此表达式不可调用。 ts(2349)答案

【问题标题】：import styled This expression is not callable. ts(2349)import styled 此表达式不可调用。 ts(2349)
【发布时间】：2021-08-16 17:11:24
【问题描述】：

我在网上找不到任何解决方案。在我将 gatsby-plugin-resolve-src 添加到我的 gatsby 项目之前，一切都按预期工作。

要将gatsby-plugin-resolve-src 添加到项目中，文档说应将以下内容添加到 tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "*": [
        "types/*",
        "*"
      ]
    }
  },
}

它确实有效，但 styled-components 不再被识别。

import styled, {css} from 'styled-components' 抛出这个-

导入样式此表达式不可调用。 ts(2349)

模块 '"styled-components"' 没有导出的成员 'css'。 ts(2305)

所以如果我在 tsconfig.json 中注释掉添加的道具，一切都会恢复到工作状态，但插件不起作用。

我认为只有styled-components 出现这种情况的原因是因为我有一个自定义定义文件。

src/types/styled-components.d.ts

import 'styled-components';

declare module 'styled-components' {
  export interface DefaultTheme {
    primary: string;
    secondary: string;
    .....
  }
}

这是我完整的 tsconfig-

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "jsx": "preserve",
    "lib": ["dom", "es2015", "es2017"],
    "strict": true,
    "noEmit": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "removeComments": false,
    "baseUrl": "./src",
    "paths": {
      "*": ["types/*", "*"]
    }
  },
  "include": ["./src/**/*"],
  "exclude": ["/node_modules/"]
}

我该如何解决这个问题？

【问题讨论】：

标签： typescript gatsby styled-components tsconfig .d.ts

【解决方案1】：

您为什么不简单地使用styled-components 类型定义？

npm i styled-components
npm i @types/styled-components --save-dev

您能否分享一个示例 repo，以便更好地查看所需的路径和依赖项？

【讨论】：

我已经在使用@types。我确信问题在于我使用声明文件的方式。发生了两件事 - 1. 如果应用 tsconfig 的两个属性（为了使用解析插件），styled-components 的类型不起作用。 2. 如果我删除.d.ts 文件，默认类型确实有效。所以需要修复的是 tsconfig 属性或 d.ts 文件。