Configuring Typescript for src and test directories

My TypeScript projects have a structure where the source code is separated from the tests into different directories (src and test). When packaging the final product, I only want to include the source code without the tests because the runtime doesn't need test files. However, I'm facing some issues in my environment. I use Doom Emacs and Tide throws errors related to TypeScript when running tests:

Error from syntax checker typescript-tide: Error processing request. No Project.
Error: No Project.
    at Object.ThrowNoProject (/Users/ikaraszi/.../node_modules/typescript/lib/tsserver.js:152133:23)

If I modify the tsconfig.json settings to include the test directory, the Tide errors disappear, but the distribution structure changes to have both a dist/src and a dist/test, which leads to awkward import statements for library users like:

import { foo } from 'library/dist/src/foo';

I want to avoid this extra level in the import path if possible. I've tried adjusting the include property in the tsconfig.json file to have both src and test, but it still results in the same nested directory structure in the dist folder.

Is there a way I can achieve the desired result without adding an extra build step to remove unnecessary directories?

Answer №1

After receiving feedback from @jonrsharpe, I decided to implement two separate tsconfig files:

tsconfig.json:

{
  "extends": "@tsconfig/node14/tsconfig.json",
  "compilerOptions": {
    "declaration": true,
    "outDir": "dist",
    "sourceMap": false,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictBindCallApply": true,
    "strictPropertyInitialization": true,
    "noImplicitThis": true,
    "alwaysStrict": true,
    "allowSyntheticDefaultImports": true,
    "noUnusedLocals": false,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src", "test"]
}

I also created a separate file named tsconfig.build.json:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "target": "es2018",
    "noUnusedLocals": true
  },
  "include": ["src"]
}

In addition, updates were made to the package.json:

{
  // usual settings
  "main": "dist/index.js",
  "files": [
    "dist/**/*.js",
    "dist/**/*.d.ts"
  ],
  "scripts": {
    "build": "tsc --build tsconfig.build.json",
    // other scripts
  }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Child stateless component in React receiving outdated props from parent Class component

Within my Parent Component, there is a form that users interact with. The form displays real-time information that updates as fields are edited. However, I am encountering an issue where the child component sometimes receives outdated props from the previo ...

Incorporating telepat-io into a Java Struts enterprise solution

Our J2EE enterprise application, built on Java Struts, has a static front end. Our team's architect has opted to enhance the user authentication by incorporating Ajax and JavaScript functionalities using telepat-io. The project is currently managed w ...

Laravel 8 is unable to execute the npm run dev command

I am facing an issue while trying to integrate reactjs and vue in Laravel 8. After running the commands: php artisan ui react php artisan ui vue I then proceed with: npm install npm run dev However, I encounter the following error message: C:\xampp& ...

Encountering compilation errors during the vue-cli build process

My Vue 2.2.3 application is experiencing difficulties in the build process due to 4 TypeScript-related errors that are perplexing me. This is the error output displayed on the console: Failed to compile with 4 errors ...

Angular - the art of linking Observables together to merge their outcomes

I need to execute two requests consecutively and merge their results at the end. If the response body of the first request contains isSuccessful = false, then the second request should not be executed. If the first request fails for any reason, the second ...

Is it not possible to use GLOB with JSHint on Windows operating systems?

Currently, I am experimenting with using NPM as a build tool (). My experience with NPM is limited, and at the moment I only have JSHint and Mocha installed. Attached is my package.json file. However, when I try to run "npm run lint" in the Windows 7 comma ...

npm install error in Docker: "WARNING tar ENOENT: file or directory not found"

Hey there, I'm currently working on setting up this Docker file: FROM node:14.19.2 LABEL author="Salem Alsaggaf" LABEL description="A react app" LABEL maintainer="Salem Alsaggaf" ENV PORT=3000 COPY . /app WORKDIR /app VOL ...

Having trouble installing the Reactjs dropdown component from PrimeFaces?

I recently started learning Reactjs and I am interested in incorporating this dropdown menu into my application. However, when I try to install it using npm i @bit/primefaces.primereact.dropdown, I encounter the following error message: npm ERR! code E4 ...

Eliminate all citation markers in the final compiled result

Currently, I am consolidating all my .ts files into a single file using the following command: tsc -out app.js app.ts --removeComments This is based on the instructions provided in the npm documentation. However, even after compilation, all reference tag ...

What could be triggering the "slice is not defined" error in this TypeScript and Vue 3 application?

I have been developing a Single Page Application using Vue 3, TypeScript, and the The Movie Database (TMDB) API. In my src\components\MovieDetails.vue file, I have implemented the following: <template> <div class="row"> ...

Methods for incorporating type definitions into untyped npm modules when working with Typescript on a local level

Although this question has been asked and answered multiple times since 2017, I have been struggling to make it work for my project. Specifically, I have set noImplicitAny: true in my tsconfig.json, and I am trying to utilize the clamscan package which doe ...

What is the proper syntax for defining all CSS properties as a type in TypeScript?

Using StyleProps allows for specifying size and color. I would prefer if it covered all styles. This way, I can easily pass down styles directly to specific parts of the component. What should I include to encompass all CSS properties? How can I modify ...

Is there a way to set the y-axis camera rotation in threejs to 360 degrees?

I am trying to create a 360 viewer for a specific product using a 3D object. The goal is to rotate the camera around the object at a 45-degree angle per click in the correct direction. However, I am facing difficulties with this task. Camera: this.camera ...

Struggling with implementing click events on Ionic-Calendar 2?

Attempting to implement a (click) event for ionic-calendar 2 where it deactivates a button if the user clicks on a date that has already passed. The issue I am facing is that when I initially click on a past date, the button remains enabled. However, upon ...

Material UI TreeView: Organize and present node data with multiple columns in a tree structure

const treeItems = [ { id: 1, name: 'English', country: 'US', children: [ { id: 4, name: 'Spring', country: 'Uk', ...

Strategies for mitigating the use of Observables when passing data between Angular routes

When trying to exchange data between routes, the most effective method appears to be using a service. To ensure that data is updated and re-rendered in the view, we are required to utilize BehaviorSubject. Based on my understanding, a simple component wou ...

Protect your npm packages registry with a backup plan

Our reliance on public open-source repositories is increasing, and it has raised concerns about what would happen if a crucial package or dependency goes offline. The lack of a backup plan could potentially put us in a difficult situation. Is there a tool ...

Angular - personalized modal HTML

I am facing a challenge where I need to trigger a popup when a button is clicked. There can be multiple buttons, each with its own overlay popup, and these popups should close when clicking outside of them. Currently, I am using TemplateRef (#toggleButton ...

Typescript threw an error: expected 0 arguments but received one (this)

While attempting to convert some javascript code into typescript, I came across this error: https://i.sstatic.net/QTIpe.png I'm a bit confused because it's expecting an argument interface Command { execute: (client: Client, message: Message) = ...

What issues arise when using the `--fix` flag to automate ESLint?

Is it beneficial to automate ESLint with the --fix flag, or could there be potential drawbacks in the future? One scenario is utilizing npm and including the "prestart" script. This setup triggers ESLint every time npm start is invoked and automatically c ...