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

Achieving TypeScript strictNullChecks compatibility with vanilla JavaScript functions that return undefined

Choose the date automatically upon opening the MUI datepicker dialog

retrieve a nested object's property using a dynamic string

What is the best way to design functions that can return a combination of explicit types and implicit types?

How can we track and record NaN values in JavaScript/TypeScript as they occur in real-time?

What is the process of expanding types definitions by incorporating custom types?

Customize the color of an unchecked radio button in Material UI

What steps can be taken to disable auto correction in ngx date picker?

Leverage the state from a Context within a Class-based component

Discovering the following solution in JavaScript

Why am I unable to use a string as the src in next/image component?

What is the reason behind the absence of compile time errors when using 'string' functions on an 'any' field type variable in TypeScript?

data not corresponding to interface

Is there a way to automatically deselect the checkbox in the selectableRows of mui-datatables when there are no data rows present?

Changing a date format in typescript: Here is how you can easily convert a date from one

What is the best way to add a hyperlink to a cell in an Angular Grid column

Obtaining the host name in server-side rendering (

Learn the process of sending a delete request to a REST API with Angular

Changing the z-index property of a Material-UI <Select> dropdown: What you need to know

Generate a fresh array from the existing array and extract various properties to form a child object or sub-array