Tips on adding an external type to a global .d.ts file

Question

Tips on adding an external type to a global .d.ts file

In my TypeScript project, I am utilizing Moment.js for dealing with datetime objects. As part of this, I wish to create an object type that includes a key holding a value of type Moment.

However, upon adding the following snippet to a global definition file named test.d.ts, none of the interfaces defined within that file can be located anywhere in the project.

import { Moment } from 'moment';

interface Test {
  date: Moment;
}

Whenever I attempt to utilize this interface in either a .ts or .tsx file, a TypeScript error is triggered:

[at-loader] ./src/<examplefilename>.tsx:91:26 
    TS2304: Cannot find name 'Test'.

Despite no issues being flagged by VSCode's TypeScript error checking or TSLint, the problem persists.

What steps should I take to import a type from an external module for utilization in a global definition file?

typescript momentjs typescript2.0

Answer 1

Answer №1

Starting from TypeScript version 3.3 onwards (and possibly even earlier, around 2.4 when dynamic imports were introduced), there are improved approaches to resolving this issue. You can now utilize either of the following methods:

interface Example {
  date: import('moment').Moment;
}

or

type Moment = import('moment').Moment;
interface Example {
  date: Moment;
}

No requirement to export any interfaces in order to achieve this solution ;)

Answer 2

Starting from TypeScript version 3.3 onwards (and possibly even earlier, around 2.4 when dynamic imports were introduced), there are improved approaches to resolving this issue. You can now utilize either of the following methods:

interface Example {
  date: import('moment').Moment;
}

or

type Moment = import('moment').Moment;
interface Example {
  date: Moment;
}

No requirement to export any interfaces in order to achieve this solution ;)

Answer 3

Answer №2

Check out this sample global.d.ts snippet from a typical Create React App setup:

declare type LinkProps = import("react-router-dom").LinkProps;

declare interface Example extends LinkProps {
  customProp: string;
}

Answer 4

Check out this sample global.d.ts snippet from a typical Create React App setup:

declare type LinkProps = import("react-router-dom").LinkProps;

declare interface Example extends LinkProps {
  customProp: string;
}

Answer 5

Answer №3

Whenever a file contains a top-level import or export statement, it becomes classified as a module. In order to access any of its contents (such as types or interfaces), they must be explicitly exported in that file and imported into other files where they are needed.

// dataTypes.d.ts
import { Widget } from 'cool-library';

export declare interface IDataStructure {
  name: string;
  value: number;
  widget: Widget;
}

// app.js
import { IDataStructure } from 'dataTypes';

const sampleData: IDataStructure = {
  name: 'Sample',
  value: 42
};

Answer 6

Whenever a file contains a top-level import or export statement, it becomes classified as a module. In order to access any of its contents (such as types or interfaces), they must be explicitly exported in that file and imported into other files where they are needed.

// dataTypes.d.ts
import { Widget } from 'cool-library';

export declare interface IDataStructure {
  name: string;
  value: number;
  widget: Widget;
}

// app.js
import { IDataStructure } from 'dataTypes';

const sampleData: IDataStructure = {
  name: 'Sample',
  value: 42
};

Tips on adding an external type to a global .d.ts file

Answer №1

Answer №2

Answer №3

Similar questions

Struggling to obtain the Variable

Verify the type without making any assumptions about the checked type

Enumerate the names of the private properties within the class

Is there a way to turn off tsc pretty printing using the configuration file?

Encountering an error in Angular 2: "date.getMonth is not a function

Troubleshooting the Issue with Angular Material Dialog Imports

Issue in React Native and Firestore: The 'auth' property is not recognized in the specified type or an error object of unknown type

The role of providers in Angular applications

Is it achievable to display keys from an interface using Typescript in node.js?

What are some strategies for circumventing the need for two switches?

One-of-a-kind npm module for typescript

Sending user input data from a React text field to a function as arguments

Angular project icons not displaying in the browser

Discover the data type of the subfield within an interface or type in Typescript

Creating a new list by grouping elements from an existing list

Upon upgrading @types/angular, I encountered error TS2694 stating that the namespace 'angular' does not have an exported member 'xxx'

What's the most effective method for transferring data to different components?

Utilizing Gulp to Convert TypeScript Exports into a JSON File

Can one utilize generic parameter value within a conditional type result field in Typescript?

Issue: Formcontrolname attribute is undefined causing TypeError when trying to retrieve 'get' property.Remember to define formcontrolname attribute to