I am using React and my VSCode keeps showing me this error :

Binding element 'profil' implicitly has an 'any' type.ts(7031)

For this code :

function Item({profil}) {

    return (
        <div>
           {profil.name}
        </div>
    );
}
export default Item;

The code works, it's displaying what I'm expecting, but I cannot get ride of this error in VSCode, except when I change the function to :

function Item({profil}: any) {

Edit (final solution) : there are ways to get ride of this error with some TypeScript configs, but I'll use interfaces since it seems to be a best practice. It will also help my team to understand each component when they'll jump in the project. Here is the final solution working for my case :

interface ItemProps {
    id: number;
    name: string;
}
function Item({profil}: ItemProps) {
   return <div>
             {profil.name}
          </div>
}

I am using React and my VSCode keeps showing me this error :

Binding element 'profil' implicitly has an 'any' type.ts(7031)

For this code :

function Item({profil}) {

    return (
        <div>
           {profil.name}
        </div>
    );
}
export default Item;

The code works, it's displaying what I'm expecting, but I cannot get ride of this error in VSCode, except when I change the function to :

function Item({profil}: any) {

Edit (final solution) : there are ways to get ride of this error with some TypeScript configs, but I'll use interfaces since it seems to be a best practice. It will also help my team to understand each component when they'll jump in the project. Here is the final solution working for my case :

interface ItemProps {
    id: number;
    name: string;
}
function Item({profil}: ItemProps) {
   return <div>
             {profil.name}
          </div>
}

• reactjs
• typescript
• visual-studio-code
• linter

Share Improve this question Follow edited Mar 24 at 6:11 Jean-Loup asked Mar 23 at 7:58 Jean-LoupJean-Loup 39622 gold badges66 silver badges1818 bronze badges 3

• 1 The error is pretty clear. Given no other context typescript cannot determie what type profil is expected to have so it implicitly has any type. The option noImplicitAny controls whether this should be flagged as an error or not but I think you should treat this as an error and you need to provide the expected parameter type for the function you defined otherwise what's the point of using TypeScript? – apokryfos Commented Mar 23 at 8:37
• @apokryfos Maybe I am misunderstanding something, but I don't think TypeScript is having any issue with the code. As mentioned, everything works fine, I am having no error running the component, the only problem is VSCode underlying my file and function in red. Your link is interesting, I see that it's possible to change this conf in the TS compiler, but since the code runs, I don't think it can solve my problem. Seems the default conf for this param is to allow this implicit declaration, so why would VSCode show errors when default TS config says it's OK ? – Jean-Loup Commented Mar 23 at 8:52
• It's possible that VSCode either can't detect your own tsconfig.json file and therefore uses its own defaults, or will always assume that strict is enabled regardless of your own tsconfig settings (or you don't have a tsconfig and it uses its own default). – apokryfos Commented Mar 24 at 6:01

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

TypeScript is not able to infer the type of the profil prop in your function, so it assumes it has the 'any' type. You should either define an interface or type for the profil prop.

type Profil = {
  name: string;
};

interface Profil {
  name: string;
}