如何在TypeScript React应用中加载React-rating组件？

Hey there! I’ve run into this exact issue before when working with JavaScript components in TypeScript React projects—let’s get your <Rating /> component up and running smoothly. Since TypeScript relies on type definitions to understand external libraries, here are the step-by-step fixes to try:

1. Install the Missing Type Definitions #

Most vanilla JavaScript libraries don’t include TypeScript type info out of the box, and react-rating is no exception. You’ll need to install the official type declarations package:

npm install @types/react-rating --save-dev
# Or if you use Yarn:
yarn add @types/react-rating --dev

Once this is installed, TypeScript should automatically recognize the Rating component’s types, which often fixes the "unknown component" or type mismatch errors.

2. Verify Your Import Statement #

Double-check that you’re importing the component correctly. react-rating uses a default export, so your import should look like this:

import Rating from 'react-rating';

Avoid using named imports (like import { Rating } from 'react-rating') unless you’ve confirmed the library uses named exports—this is a common mistake that triggers TS errors.

3. Manually Declare Types (If @types Package Doesn’t Exist) #

If for some reason the @types/react-rating package isn’t available or doesn’t work, you can create a custom type declaration file in your project:

1. Create a file named react-rating.d.ts in your src folder.
2. Add the following basic type definitions (adjust the props to match what you’re using):

declare module 'react-rating' {
  import React from 'react';

  export interface RatingProps {
    initialRating?: number;
    onChange?: (value: number) => void;
    emptySymbol?: React.ReactNode;
    fullSymbol?: React.ReactNode;
    // Add any other props you need here
  }

  const Rating: React.FC<RatingProps>;
  export default Rating;
}

TypeScript will pick up this file and use it to type-check your Rating component usage.

4. Validate Props Match Type Requirements #

Make sure any props you pass to <Rating /> align with the component’s expected types. For example, if you’re using onChange, ensure the callback function accepts a number parameter (the selected rating value):

<Rating
  initialRating={3}
  onChange={(rating) => console.log(`Selected rating: ${rating}`)}
/>

TypeScript will throw errors if you pass props that don’t match the defined types, so double-check your prop values.

After trying these steps, your <Rating /> component should work without TypeScript errors. Let me know if you hit any snags!

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