Typings for sub-folders inside a root index.d.ts

Question

We created typings for material-ui@next and want to ship them with the library, which we did with the last beta.

Here is a link to the index.d.ts.

But the typings are not usable in their current form. In development they where used locally and worked fine, but when shipping the files with the library TypeScript seems to use a different discovery strategy.

All typings that reference a subfolder (e.g. declare 'material-ui/Button/Button') will not be found be TypeScript. When importing components an error will show up:

[ts]
Could not find a declaration file for module 'material-ui/Button/Button'. '<project path>/node_modules/material-ui/Button/Button.js' implicitly has an 'any' type.
  Try `npm install @types/material-ui/Button/Button` if it exists or add a new declaration (.d.ts) file containing `declare module 'material-ui/Button/Button';`

Does TypeScript not accept declaring other imports when used inside the npm_modules folder? Because as said, using them locally or even moving them to @types/material-ui will make them work.

Also, TypeScript seems to find the index.d.ts, because importing from the "root" works (import { Button} from 'material-ui').

Answer 1

So, turns out that TypeScript treats typings inside of node_modules/@types/* and node_modules/* slightly different:

Typings in @types are so called augmented modules. They are global and everything in them will be on your project's code. This is why accessing submodule declarations, like material-ui/Button/Button, work.

Regular npm modules are treated as (regular) modules. Thus, if you import a subfolder the subfolder must contain typings. TypeScript will not go to the root of the modules and check if the typings there have augmented modules.

This means that you (a) have to publish your typings to DefinitelyTyped or created .d.ts files for every subfolder and file.

You can find a longer explanation here: https://github.com/Microsoft/TypeScript/issues/17945