Resolving 'Property does not exist on type' Error in TypeScript: Correct Approaches for React Component Parameter Typing

Problem Context and Error Analysis

When migrating JavaScript files to TypeScript environments, developers frequently encounter type errors, with one common issue being component property and parameter type mismatches. The original function definition used multiple independent parameters:

function MyCard(param1: ObjectDto, toggleFunction: any) {}

However, when used in JSX, parameters were passed as properties:

<MyCard param1={param1Value} toggleFunction={myToggleFunction} />

The TypeScript compiler reports: Type '{ param1: ObjectDto; toggleFunction: (index: any) => void; }' is not assignable to type 'IntrinsicAttributes & ObjectDto'. Property 'param1' does not exist on type 'IntrinsicAttributes & ObjectDto'.

Root Cause Analysis

The fundamental cause of this error lies in misunderstanding React's component parameter model. In React, functional components accept only one parameter—the props object—not multiple independent parameters. TypeScript's type system attempts to match JSX properties with function parameters:

• When TypeScript encounters <MyCard param1={...} toggleFunction={...} />, it expects these properties to be assignable to the first parameter of the MyCard function
• Since the first parameter in the function definition has type ObjectDto, TypeScript tries to assign { param1: ObjectDto, toggleFunction: ... } to type ObjectDto
• But the ObjectDto type doesn't contain a param1 property, resulting in a type error

The error message IntrinsicAttributes & ObjectDto indicates TypeScript's intersection of component props type with React's intrinsic attributes, further confirming the type mismatch.

Solutions

Solution 1: Direct Props Object Type Definition

The most straightforward solution is to change the function parameter to a single props object:

function MyCard(props: { param1: ObjectDto, toggleFunction: any }) {
    // Access parameters via props.param1 and props.toggleFunction
    const { param1, toggleFunction } = props;
    // Component logic
}

This approach offers intuitive and explicit type definitions, suitable for simple component scenarios.

Solution 2: Type Alias with Destructuring Assignment

For more complex components, using type aliases improves code maintainability:

type Props = { 
    param1: ObjectDto; 
    toggleFunction: any 
};

function MyCard({ param1, toggleFunction }: Props) {
    // Use destructured variables directly
    // Component logic
}

Advantages of this approach include:

• Separation of type definitions from component implementation, enhancing code readability
• Support for more complex type constraints and generics
• Facilitates type reuse and extension

TypeScript and React Type System Integration

Understanding how TypeScript interacts with React's JSX syntax is crucial:

1. JSX Element Type Inference: TypeScript infers JSX element props types based on functional component parameter types
2. Property Validation: The compiler verifies whether properties passed to components are compatible with parameter types
3. Type Safety: Strict type checking helps identify potential errors at compile time rather than runtime

In practice, it's recommended to provide more precise type definitions for the toggleFunction parameter instead of using any:

type Props = {
    param1: ObjectDto;
    toggleFunction: (index: number) => void;
};

Best Practice Recommendations

Based on the analysis, the following best practices are recommended for TypeScript React development:

1. Always Use Single Props Parameter: React functional components are designed around a single props object
2. Avoid any Type: Provide specific type definitions for all parameters whenever possible
3. Use Type Aliases or Interfaces: Improve code maintainability and readability
4. Leverage Destructuring Assignment: Make component internal code more concise
5. Consider React.FC Generic: For more complex type scenarios, use the React.FC<Props> type

By following these principles, developers can fully leverage TypeScript's type system advantages, reduce runtime errors, and improve code quality.