React新手遇TypeScript报错：找不到react-cards声明文件

Hey there! I totally get how frustrating this TypeScript error can be when you're just starting out with React. Let's break down what's happening and fix it step by step.

Why This Error Happens #

The error pops up because:

• The react-cards package doesn't include built-in TypeScript type declarations.
• There's no official @types/react-cards package available on npm (which is why installing it didn't help).
• TypeScript needs type info to understand what's in the module, so it defaults to treating it as any and throws this warning/error.

Solution 1: Create a Custom Declaration File #

This is the cleanest long-term fix if you want to keep using react-cards:

1. In your project, create a types folder (you can put it in the root or inside your src directory).
2. Inside that folder, make a new file named react-cards.d.ts.
3. Paste this line into the file:

   declare module 'react-cards';
   

4. Open your tsconfig.json file and make sure the include array includes your types folder. For example:

   "include": [
     "src/**/*",
     "types/**/*"
   ]
   

This tells TypeScript to recognize the module and stops the error. If you want more detailed types later, you can expand this declaration file with the component's props and methods as you learn more about the library.

Solution 2: Skip Type Checking Temporarily #

If you just need to get up and running quickly, you can add a comment to ignore the error for that import:

// @ts-ignore
import Card from 'react-cards';

Note: This is a quick fix, not a permanent solution—it disables TypeScript's type checking for this line, so you won't get helpful hints or error checks for the Card component.

Bonus: Consider a TypeScript-Friendly Alternative #

If you want to avoid these type issues entirely, you might switch to a component library that supports TypeScript out of the box. Some popular options are:

• Material UI's Card component (part of @mui/material)
• React Bootstrap's Card component
• Chakra UI's Card component
  All of these have official type declarations, so you won't run into this kind of error.

Hope one of these solutions works for you! Happy coding!

内容的提问来源于stack exchange，提问作者Ryukote