导入现有 .jsx 文件时“找不到模块的声明文件”

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?

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: https://www.typescriptlang.org/play?#code/PTAEAEDMEsBsFMB2BDAtvAXKZjqubAHQAuAzgLABQ8AHgA4D2ATsaMQJ53ygDCyrAXlABvUACMm8eABMspYk2iIA5gG5Q7eMiYB5SACFoLABZZEAV1Rj4TUAF9VVWoxZtO3ACINloIaIlS0qRyCkrKANoAuuqa2nqGJmaW1rYOTvTMrADGDIjyoFmS-PB8xAByaNxCABQAlL4AfKAARJCw5pCQ7M2OlFQgEDAIKOhYAG4E0NIkFJR4LqwcXCK8-AA0oF4+dqCQTAyoLYTAOHgEhABWpD3pC27LAIK4+LCkvqusAD6b3r39YFA4EhKlhkHQ6DN-hAbPsmMFQABGADMADYEVR5pl7txRIUtMQSvwKuh7Lt9odmsdTi9Ltdejk8qwRlUCkUCaVifA6qogA