由于'no compatible call signatures'无法在打字稿中使用类名

Question

运行相关yarn add命令后，以下是packages.json中的新行：

"@types/classnames": "^2.2.7",
"classnames": "^2.2.6",

然后我在打字稿文件中添加了这些行：

import * as classnames from 'classnames';
...
            <div className={classnames('normal', 'on')}>

现在我收到此错误

类型

错误：无法调用类型缺少调用签名的表达式。类型 '{ default： ClassNamesExport; }' 没有兼容 呼叫签名。 TS2349

我的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": "preserve",
    "experimentalDecorators": true
  },
  "include": [
    "src"
  ]
}

如何修复此错误？

Answer 1

当你执行import * as X from 'x'时，你会得到一个模块命名空间对象。它是一个不可变的对象，它是不可调用的。

由于classnames是一个commonjs模块，因此您需要在tsconfig.json中设置esModuleInterop: true并执行import classnames from 'classnames'，

或者您可以使用旧语法导入它：import classnames = require('classnames') 。

建议使用 esModuleInterop .

Answer 2

尝试这样做-

import classnames from 'classnames' ;

或

import {default as classnames} from 'classnames' ;

如果它们都不起作用，请检查您尝试使用的模块的 package.json 是否具有"main"或"module"字段。如果没有，则可能可以解释错误。