The ES6 import feature conceals the TypeScript definition file

Question

The ES6 import feature conceals the TypeScript definition file

I currently have two definition files, foo.d.ts and bar.d.ts.

// foo.d.ts
interface IBaseInterface {
    // included stuff
}

// bar.d.ts 
interface IDerivedInterface extends IBaseInterface {
    // more additional stuff
}

Initially, everything was functioning properly. However, when I introduced an ES6 import statement to foo.d.ts, my entire application lost access to its contents.

As an example, this is what the modified foo.d.ts looks like:

// foo.d.ts
import { SomeClass } from 'my-module';

interface IBaseInterface {
    baz: SomeClass;
}

This change had a direct impact on bar.d.ts:

// bar.d.ts
// ERROR: Cannot find name IBaseInterface
interface IDerivedInterface extends IBaseInterface { 

}

I am confused about what I might be overlooking in this situation.

typescript visual-studio-2015 typescript1.8 typescript-typings

Answer 1

Answer №1

By adding an import statement to your code, you are essentially turning the file into a module. This means that any variables or functions defined within the file will not be accessible globally.

To resolve this issue, you need to export the IBaseInterface and then import it in the file where you have defined IDerivedInterface. Here is an example:

// foo.d.ts
import { SomeClass } from 'my-module';

export interface IBaseInterface {
    baz: SomeClass;
}

and

// bar.d.ts
import { IBaseInterface } from './foo';

interface IDerivedInterface extends IBaseInterface { 

}

Answer 2

By adding an import statement to your code, you are essentially turning the file into a module. This means that any variables or functions defined within the file will not be accessible globally.

To resolve this issue, you need to export the IBaseInterface and then import it in the file where you have defined IDerivedInterface. Here is an example:

// foo.d.ts
import { SomeClass } from 'my-module';

export interface IBaseInterface {
    baz: SomeClass;
}

and

// bar.d.ts
import { IBaseInterface } from './foo';

interface IDerivedInterface extends IBaseInterface { 

}

The ES6 import feature conceals the TypeScript definition file

Answer №1

Similar questions

Using TypeScript to return an empty promise with specified types

What is the process of invoking a service from a controller?

NextJS-created calendar does not begin on the correct day

What is the best way to mandate the declaration or type of a function in TypeScript?

Having trouble grasping the concept of Interfaces and dealing with FormGroup problems in Angular?

Is it feasible to incorporate a multi-level navigation menu into the "NavItem" component using MaterialUI with TypeScript?

Sorting in the TypeScript/Angular table is functioning properly on every column except for the initial one

Creating folders and writing data to text files in Angular 4/5 with TypeScript: A tutorial

How to Define Intersection Type with Symbol in TypeScript?

Using React Material UI to create multiple collapse components

What is the best way to create a generic variable and function that utilize the same type?

Display text when hovered over or clicked to insert into an HTML table

The state of dynamically created Angular components is not being preserved

Leverage tsconfig.json for TypeScript compilation in Vim using the Syntastic plugin

Fastify Typescript: dealing with an unidentified body

The process of gulp was abruptly halted with a termination code of 0 while trying to compress JS files

Taking advantage of Input decorator to access several properties in Angular 2

Utilizing Typescript for Axios Response

The element is inferred to have an 'any' type due to the fact that a 'string' type expression cannot be used to access elements in the type '{ Categories: Element; Admin: Element; }'

What is the best way to perform unit testing on a function component that includes React.useState() using jest and enzyme?