找不到模块“类名”的声明文件

Question

当我尝试import cn from 'classnames' 时，我看到了这个错误：

Could not find a declaration file for module 'classnames'. 'C:/Users/Demian/Desktop/udemy/react+next/top-app/node_modules/classnames/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/classnames` if it exists or add a new declaration (.d.ts) file containing `declare module 'classnames';`

npm i --save-dev @types/classnames 并使用错误日志中的 declare module 'classnames'; 创建 .d.ts 文件没有帮助

StackOverflow 中的 npm install -D @types/module-name 或 npm install @types/module-name 等其他变体也没有太大帮助。在他们之后，我看到另一个错误：

npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@types%2fmodule-name - Not found
npm ERR! 404 
npm ERR! 404  '@types/module-name@latest' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)        
npm ERR! 404 
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

我尝试过的另一个变体 - npm i -D @types/classnames。它继续，但也无济于事

我的 tsconfig.json：

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": false,
    "skipLibCheck": true,
    "strict": true,
    "strictPropertyInitialization": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

我的 package.json：

{
    "name": "top-app",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "dev": "next dev",
        "debug": "set NODE_OPTIONS=--inspect && next dev",
        "build": "next build",
        "start": "next start",
        "lint": "next lint",
        "stylelint": "stylelint \"**/*.css\" --fix"
    },
    "dependencies": {
        "@types/classnames": "^2.3.1",
        "@types/react-router": "^5.1.16",
        "classnames": "^2.3.1",
        "next": "11.1.0",
        "react": "17.0.2",
        "react-dom": "17.0.2",
        "react-router-dom": "^5.3.0"
    },
    "devDependencies": {
        "@babel/plugin-syntax-jsx": "^7.14.5",
        "@types/react": "^17.0.19",
        "@typescript-eslint/eslint-plugin": "^4.29.3",
        "@typescript-eslint/parser": "^4.29.3",
        "eslint": "^7.32.0",
        "eslint-config-next": "11.1.0",
        "eslint-config-prettier": "^8.3.0",
        "eslint-plugin-prettier": "^3.4.1",
        "prettier": "^2.3.2",
        "stylelint": "^13.13.1",
        "stylelint-config-standard": "^22.0.0",
        "stylelint-order": "^4.1.0",
        "stylelint-order-config-standard": "^0.1.3",
        "typescript": "^4.4.2"
    }
}

我该怎么办？太简单的问题请不要打

Answer 1

这只是一个明显的错误：

<button
        className={cn(styles.button, {
        [styles.primary]: appearance == 'primary',// I used '=' instead of '=='
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        [styles.ghost]: appearance == 'ghost',
    })}
>