Correct way to handle undefined declaration files (index.d.ts) Correct way to handle undefined declaration files (index.d.ts) reactjs reactjs

Correct way to handle undefined declaration files (index.d.ts)


The typeRoots options specifies where to look for packages that may contain type information. The documentation keeps saying that the compiler is looking for packages.

I've reproduced the structure you described and got the same error you did. Then I created a react-native-camera under typings and moved index.d.ts there so that I end up with this structure:

typings/└── react-native-camera    └── index.d.ts

With this structure, the compilation runs just fine.

Using a typings directory structure is fine, if you want that kind of structure. For some projects I use a typings directory. For other projects, I prefer something simpler: a .d.ts file in the source tree that declares everything that needs declaring. So if I start from the description you give, but dump typings and instead add src/definitions.d.ts containing

declare module 'react-native-camera';

then the code compiles just fine.

It is really a matter of preference what to use. Usually when a project becomes so complex that src/definitions.d.ts ends up being difficult to manage or hard to understand, I move to using a typings directory.


From flowtype document, of library definitions section, it said:

A libdef is a special file that informs Flow about the type signature of some specific third-party module or package of modules that your application uses. If you’re familiar with languages that have header files (like C++), you can think of libdefs as a similar concept.

General Best Practices

Try to provide a libdef for each third-party library your project uses.

Look into .flowconfig in the root path, you will see it already defined there.

[libs]node_modules/react-native/Libraries/react-native/react-native-interface.jsnode_modules/react-native/flow./libdefs.js

And then look for libdefs.js in the root path, it should be there. Or just create it on your own.

For every module, declare it like below. Take rxjs for example:

declare module 'rxjs' { declare var exports: any; }

It's the official suggestion way, no index.d.ts modify needed.