Typescript is unable to locate an interface when it is stored in a separate directory

Question

Typescript is unable to locate an interface when it is stored in a separate directory

I have 2 main folders within my project structure:

src/*.ts
test/*.test.ts

Within the src folder, there exists an interface named IImportRow.ts

interface IImportRow {
    transactionId?: string;
    transactionApiId?: string;
    ...
}

This same interface is present in every other TypeScript file in the src folder.

However, in the test folder, the TypeScript compiler is unable to locate this interface

var row: IImportRow = {
    transactionId: '10',
    ...
};

[ts] Cannot find name 'IImportRow'.

Is this behavior expected? How can I rectify this issue?

Below is a snippet of my tsconfig.json configuration

"compilerOptions": {
    "target": "es2018",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "dist",
    "strict": false,
    "noImplicitAny": false,
    "strictPropertyInitialization": false,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
},

typescript

Answer 1

Answer №1

When configuring your TsConfig file, make sure to specify the directories you want the TS compiler to inspect. To include your tests folder, simply add it to the include list. Below is an example configuration snippet from a project that you can customize according to your needs.

{
    "compilerOptions": {
        "module": "commonjs",
        "declaration": false,
        "noImplicitAny": false,
        "removeComments": true,
        "noLib": false,
        "allowSyntheticDefaultImports": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "target": "es6",
        "sourceMap": true,
        "allowJs": true,
        "outDir": "./build",
        "baseUrl": "./src",
        "skipLibCheck": true
    },
    "include": ["src/**/*"],
    "exclude": ["node_modules", "build", "**/*.spec.ts"]
}

Answer 2

When configuring your TsConfig file, make sure to specify the directories you want the TS compiler to inspect. To include your tests folder, simply add it to the include list. Below is an example configuration snippet from a project that you can customize according to your needs.

{
    "compilerOptions": {
        "module": "commonjs",
        "declaration": false,
        "noImplicitAny": false,
        "removeComments": true,
        "noLib": false,
        "allowSyntheticDefaultImports": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "target": "es6",
        "sourceMap": true,
        "allowJs": true,
        "outDir": "./build",
        "baseUrl": "./src",
        "skipLibCheck": true
    },
    "include": ["src/**/*"],
    "exclude": ["node_modules", "build", "**/*.spec.ts"]
}

Typescript is unable to locate an interface when it is stored in a separate directory

Answer №1

Similar questions

Bidirectional data binding on the table

Create a custom data structure resembling a record, where certain keys are assigned specific value types

Prevent the array from altering its values

There are critical vulnerabilities in preact-cli, and trying to run npm audit fix leads to a never-ending loop between versions 3.0.5 and 2.2.1

Is the Cyrillic encoding feature not functioning properly in Angular 4 with .Net Core 2?

Switching class on a specific element in Angular 2

"Unindexing data in Angular: A step-by-step guide

The FullCalendarModule does not have a property named 'registerPlugins' in its type definition

What is the reason behind being unable to register two components with the same name using React Hook Form?

Ensure that the value of a variable in the Ionic/Angular template has been properly initialized

Toggling multiple ions simultaneously does not function independently

Ensuring type integrity for intersections containing varying numbers of elements

Capture Video on iOS devices using the MediaRecorder API and display it using HTML5 Video Player

Tips for creating an interface in TypeScript that prevents access to uninitialized properties of a class

Transferring data from a child to a parent component in Angular 2 using a combination of reactive and template-driven approaches

Creating Typescript types based on the values of other props: A guide

The file isn't located in 'rootDir', even though all the details seem to be accurate

What is the proper way to transfer props in React using TSX and Next.js?

Angular is not displaying the data from the dynamically injected component in the main component

Using Angular Material to dynamically hide columns in a table that is being created on the fly