React TSX中解决参数'i'隐式'any'类型错误及findIndex返回异常

Got it, let's tackle both problems you're dealing with here: fixing the TS7006 implicit any type error, and correcting the logic that's returning -1 when you expect a positive index.

1. Fixing the TS7006 "Parameter 'i' implicitly has an 'any' type" error #

TypeScript throws this error because it can't figure out what type i is supposed to be. Using : any works around the error but removes all the type safety TypeScript provides—so let's do this properly by defining a type for your employee objects.

First, create an interface (or type alias) that describes the shape of items in emplList:

// Define the structure of your employee objects
interface Employee {
  manager: boolean;
  // Add any other properties your employees have here, like:
  // id: number;
  // name: string;
}

Next, update your component's props to explicitly type emplList as an array of this Employee type:

// Type your component's props
interface YourComponentProps {
  emplList: Employee[];
}

// Use the props type in your component
const YourComponent = (props: YourComponentProps) => {
  // Your component logic goes here
};

Now, when you use findIndex, TypeScript will automatically infer that i is an Employee—no more implicit any error, and you'll get autocomplete and type checking for properties like manager.

2. Fixing the unexpected -1 return value #

The reason your second attempt returns -1 is a common arrow function mistake: when you wrap the callback in curly braces {}, you have to explicitly use the return keyword. Your current code doesn't return anything, so the callback returns undefined, which findIndex interprets as "this item doesn't match the condition"—hence the -1 result.

Here are two ways to fix this:

• Option 1: Remove the curly braces (implicit return)
  Arrow functions without curly braces automatically return the expression inside:

  props.emplList.findIndex(i => i.manager === false);
  

• Option 2: Keep curly braces and add return
  If you prefer using curly braces for clarity, make sure to return the condition:

  props.emplList.findIndex((i) => {
    return i.manager === false;
  });
  

Full working example #

Putting it all together, your code should look like this:

interface Employee {
  manager: boolean;
  // Include other employee properties here
}

interface YourComponentProps {
  emplList: Employee[];
}

const YourComponent = (props: YourComponentProps) => {
  // This will correctly find the first index where manager is false
  const firstNonManagerIndex = props.emplList.findIndex(i => i.manager === false);

  // Verify the result (should be > 0 if there's a non-manager in the list)
  console.log(firstNonManagerIndex);

  return (
    // Your component's JSX content here
  );
};

export default YourComponent;

Quick reminder #

Arrow function rules to avoid this mistake in the future:

• No curly braces → implicit return of the expression
• Curly braces → explicit return required for the callback to return a value

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