Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Next.js next/image 'image' implicity has an 'any' type – how to fix?

I am new to Next.js and TypeScript and cant seem to find any resources on how to fix this issue:

import Image from 'next/image';

export default function Item({ image }) { // <-- parameter image needs a 'type' definition?
  ...
}

but the above gives this notice/warning/error with regard to the parameter image:

Binding element 'image' implicitly has an 'any' type.ts(7031). (parameter) image: any

I understand that TS needs variable types to be defined/declared but I sure as heck have no idea what ‘type’ NextJS Image should be and I also know that giving it the any type is not the way to go either? How can I fix this issue?

I tried the following but doesn’t work:

export default function Item({ image: Image }) { // <-- tried the `image: Image` syntax

Does anyone have any resource, documentation, or preferred place to search up what the right type would be for a parameter/function and the right syntax that goes along with it to quell these warnings?

Thanks in advance.

Tags:

2

Answers


  1. 0

    by default in typescript if you don’t specify the type of a variable, it will be implicitly typed by element affect inside

    It if it’s an object by default the implicit type will be any
    https://www.typescriptlang.org/docs/handbook/type-inference.html

    but you have the warning due to noImplicitAny which is true by default in tsconfig
    https://www.typescriptlang.org/tsconfig/#noImplicitAny

    you have to explicitly define the type of your parameter or if you truly want any specify it

    export default function Item({ image }: {image: Image})

    just be careful in your case the type affected should have image property inside it to be valid

    if Image object contain the path of the image you will have the following

    export default function Item({ image }: {image: string})
    Login or Signup to reply.
  2. 0

    Try this:

    import Image from 'next/image';

type ItemProps = {
   image: Image
};

export default function Item({ image }: ItemProps) {
  ...
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search