"Could not find a declaration file for module" when importing existing .jsx files

Question

(Apologies if this is a duplicate, I can't find any Q&A's that deal with existing .jsx files)

I've been migrating my app over to typescript and have now got a load of the following errors:

Could not find a declaration file for module '../components/...'. '.../components/....js' implicitly has an 'any' type.ts(7016)

I'd prefer not to have to go through my entire app right now and convert everything to .tsx. I feel like turning noImplicitAny to false in my tsconfig file would be excessive, given that I only want to ignore the issue of imports right now.

Is there a more sensible way to resolve these errors?

Dingo

Answer 1

You should create the types for some packages which doesn't exist.

declare module 'objectname' {
  const content: any;
  export default content;
}

All the javascript modules may not consist of types for it. So, we need to create type definitions for the object which we define. The easiest way to define for the third party is as above. Because of the webpack checks for the respective index.d.ts. The d.ts is the type definition file for the object you will have.

In your case, it is missing and hence you receive that error. So a type definition file has to be created with the object name. Or it will be sometimes the extensions.

any refers to any datatype within the object. You must get your hands dirty with typescript interfaces and types.

Simple example

Proudfoot

Thanks! I'm not sure what any of that means. Could you point me to the documentation that teaches the theory? – Dingo