Definitions for nested directories within a main index.d.ts

Question

Definitions for nested directories within a main index.d.ts

We have developed custom typings for the latest version of material-ui@next and successfully included them in the library during the last beta release.

For those interested, you can access the index.d.ts file here.

However, there seems to be a problem with the current state of the typings. While they function properly when used locally during development, issues arise when attempting to package and distribute them with the library. TypeScript appears to utilize a different discovery method in this scenario.

Any typings that make reference to a subfolder (e.g.

declare 'material-ui/Button/Button'

) are not being recognized by TypeScript. This results in an error when trying to import components:

[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';`

Is there a limitation in TypeScript preventing the declaration of external imports within the node_modules directory? It's worth noting that using these typings locally or relocating them to @types/material-ui resolves the issue.

In addition, TypeScript seems able to locate the index.d.ts file, as importing from the "root" directory functions correctly (

import { Button} from 'material-ui'

).

typescript material-ui definitelytyped

Answer 1

Answer №1

It has come to light that TypeScript handles typings differently when located inside node_modules/@types/* versus node_modules/*:

Typings within the @types directory are considered augmented modules, making them global and accessible throughout your project's codebase. This is why referencing submodule declarations, such as material-ui/Button/Button, functions as expected.

In contrast, regular npm modules are treated as standard modules. Therefore, if you import a nested folder from a module, that folder must have its own typings defined. TypeScript does not automatically look for augmented modules at the root level of the module.

This implies that in order to provide typings for subfolders and files, you either need to publish them to DefinitelyTyped or create corresponding .d.ts files.

For a more detailed explanation, please visit: https://github.com/Microsoft/TypeScript/issues/17945

Answer 2

It has come to light that TypeScript handles typings differently when located inside node_modules/@types/* versus node_modules/*:

Typings within the @types directory are considered augmented modules, making them global and accessible throughout your project's codebase. This is why referencing submodule declarations, such as material-ui/Button/Button, functions as expected.

In contrast, regular npm modules are treated as standard modules. Therefore, if you import a nested folder from a module, that folder must have its own typings defined. TypeScript does not automatically look for augmented modules at the root level of the module.

This implies that in order to provide typings for subfolders and files, you either need to publish them to DefinitelyTyped or create corresponding .d.ts files.

For a more detailed explanation, please visit: https://github.com/Microsoft/TypeScript/issues/17945

Answer 3

Answer №2

After doing some research on this topic, it has become clear to me that the issue is rather perplexing.

From what I have gathered, an index.d.ts file with definitions in submodules will only function properly if there is at least one reference to the file within the project and it does not include declarations without modules.

For instance, consider the following scenario:

// node_modules/b/index.d.ts
declare module 'b/sub' {
  export function boo(): void;
}

declare module 'b' {
  export function bla(): void;
}

// index.ts
import { boo } from 'b/sub';

boo();

// xedni.ts
import { bla } from 'b';

bla();

Nevertheless, if you remove xedni.ts, the import in index.ts will cease to work.

To resolve this issue, adding

/// <reference types="b" />

to index.ts or setting types: ["b"] in the tsconfig.json should restore its functionality.

If you were to add export function bah(): void; to index.d.ts, it appears impossible to get it to function properly.

The behavior of this situation seems quite counterintuitive...

Answer 4

After doing some research on this topic, it has become clear to me that the issue is rather perplexing.

From what I have gathered, an index.d.ts file with definitions in submodules will only function properly if there is at least one reference to the file within the project and it does not include declarations without modules.

For instance, consider the following scenario:

// node_modules/b/index.d.ts
declare module 'b/sub' {
  export function boo(): void;
}

declare module 'b' {
  export function bla(): void;
}

// index.ts
import { boo } from 'b/sub';

boo();

// xedni.ts
import { bla } from 'b';

bla();

Nevertheless, if you remove xedni.ts, the import in index.ts will cease to work.

To resolve this issue, adding

/// <reference types="b" />

to index.ts or setting types: ["b"] in the tsconfig.json should restore its functionality.

If you were to add export function bah(): void; to index.d.ts, it appears impossible to get it to function properly.

The behavior of this situation seems quite counterintuitive...

Definitions for nested directories within a main index.d.ts

Answer №1

Answer №2

Similar questions

When utilizing a custom hook that incorporates useContext, the updater function may fail to update as

Tslint is notifying that JSX elements without any children must be self-closing to prevent errors [Error]

Router-outlet @input decorator experiencing issues with multiple components

Combining Overrides in Material UI (React): Mastering the Art of Overwriting Theme and Component Styles

Tips for resolving the issue of "Warning: useLayoutEffect does not have any effect on the server" when working with Material UI and reactDOMServer

Iterate through the array and generate a ListItem component for every element

Create a Referral Program page within a swapping interface similar to the functionalities found in platforms like PancakeSwap, PantherSwap, and

Stop the transmission of ts files

Best practice for encapsulating property expressions in Angular templates

obtaining the value of an input using typescript (put request)

Having trouble with Axios cross-origin POST request CORS error in React / Typescript, even after trying all the common solutions

Managing numerous subscriptions to private subjects that are revealed by utilizing the asObservable() method

modification of the inner components' style upon selection of the MenuItem

Is there a way for me to access the user's gender and birthday following their login using their Google account details?

Guide on executing get, modify, append, and erase tasks on a multi-parameter JSON array akin to an API within Angular

Achieving Center Alignment for Material-UI's <Table> within a <div> using ReactJS

Jest: Material-UI: Autocomplete's `getOptionLabel` method failed to return a string for the object {}

Feeling lost with the concept of getcontext in js/ts and uncertain about how to navigate through it

Optimizing File Transfers and Streaming Using Next.js and CDN Integration

Error: Unable to retrieve the "button" property because theme.typography is not defined