TypeScript allows for paths to include types, without actually compiling them

I am facing a challenge in typescript with my project structure as follows:

.
+-- @types
|   +-- declaration1.ts
|   +-- declaration2.ts
+-- common
|   +-- utils1.ts
|   +-- utils2.ts
+-- tests
|   +-- utils1.test.ts
|   +-- utils2.test.ts

To ensure that all my types are exposed in both tests and commons, I have added the following configuration in my tsconfig.json file:

{
  "compilerOptions": {
    "outDir": "build/",
  },
  "include": ["tests", "common", "@types"]
}

However, the issue I'm encountering is that I do not want to compile everything, just the common utilities. Unfortunately, I cannot specify a single or multiple entry points for compilation.

What I would like is to run tsc and have the build folder filled only with the common utility files, structured like this:

.
+-- build
|   +-- common
|   |   +-- utils1.js
|   |   +-- utils2.js
// no other files

But instead, what I currently end up with is:

.
+-- build
|   +-- @types
|   |   +-- declaration1.js
|   |   +-- declaration2.js
|   +-- common
|   |   +-- utils1.js
|   |   +-- utils2.js
|   +-- tests
|   |   +-- utils1.test.js
|   |   +-- utils2.test.js

I am struggling to figure out how to exclude certain directories from being compiled.

If anyone has an idea on how to achieve this, your help would be greatly appreciated. Thank you.

Answer №1

If you want to prevent a folder from being built, try creating a new tsconfig.json file within that folder with the following content:

{
  "compilerOptions": {
    "noEmit": true
  },
  "exclude": ["src/**/*.ts"]     // Define the files you do not want to build
}

Then, in your original tsconfig.json file, make sure to include the files you want to build like this:

{
  "compilerOptions": {
    ...
  },
  "include": ["src/**/*.ts"]     // Specify the files you want to build
}

Answer №2

If you're looking to prevent certain folders from being built, consider crafting a fresh tsconfig.json specific to those directories and including 'noEmit: true' within it.

Answer №3

If you want to add types without compiling them, simply include them in the "typeRoots" section of your tsconfig.json. Anything listed in the "include" field will be compiled.

{
  "compilerOptions": {
    "typeRoots": [ "@types", "tests" ]
  }
}

To exclude specific files or directories, utilize the "exclude" option as shown below:

{
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

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

Strategies for preventing profanity in Typescript within Nuxt 2 implementation

implement user authorization functionality create the Auth class for authentication handling import type { Context } from '@nuxt/types'; export class Auth { public ctx: Context; constructor(ctx: Context) { t ...

Contact creation not working on non-HubSpot form popups

I'm currently experiencing an issue with my website that has non-Hubspot forms. We have successfully integrated the tracking code to generate cookies for users, track their sessions, and enable the non-Hubspot forms. However, we are facing a problem s ...

ReadOnly types in Inheritance

Currently, I am working on creating an unchangeable, nested data structure that also incorporates inheritance. To achieve this, I am using the Readonly generic type. In order to create different types within this structure, one of these Readonly types need ...

Which property within the <mat-option> element is used for toggling checkboxes on and off?

I'm experimenting with dynamically checking/unchecking a checkbox in mat-option. What attribute can I use for this? I've successfully done the same thing with mat-checkbox using [(ngModel)]. Here's the snippet of my code: app.component.html ...

Error in Firebase Functions: Promises must be properly managed

Currently, I am in the process of creating a Firebase function using TypeScript to deliver push notifications to multiple users. However, whenever I execute the command firebase deploy --only functions, TSLint flags an error stating "Promises must be han ...

Utilizing type narrowing to accurately map objects within a mapper function

During the migration of my project to TypeScript, I encountered a challenge with a simple utility function: function mapObject(obj, mapperFn) { return Object.fromEntries( Object.entries(obj).map(([key, value]) => mapperFn(key, value)) ); } This ...

The Typescript compiler is functioning correctly, but the output when running the JavaScript code

Let me start by showcasing my directory tree: \__ root \__ node_modules \__src \__ dir1 \__ index.ts \__ package.json \__ deploy.config //irrelevant here ...

Dealing with 'TypeError X is Not a Function' Error in Angular (TypeScript): Occurrences in Certain Scenarios and Absence in Others

Recently, I came across an odd issue in Angular 14 where a type error kept popping up. Although I managed to refactor the code and find a workaround, I'm quite intrigued as to why this issue is happening so that I can prevent it from occurring again i ...

TypeScript generic types allow you to create reusable components that

function genericIdentity<T>(arg: T): T { return arg; } let myGenericIdentity: <U>(arg: U) => U = genericIdentity; I see that the 'genericIdentity' function is accepting an argument of a generic type. However, I am unsure about ...

Unable to display surface chart using Plotly in Angular 12

I've been attempting to display a 3D model using Plotly (https://github.com/plotly/angular-plotly.js/blob/master/README.md), but unfortunately, the chart is not appearing. component.component.ts import { Component } from '@angular/core'; @ ...

How can I display an iframe element only if it exists within an object in Angular?

I'm currently exploring options to specifically display the iframe element within a block of HTML content being sent to my Angular application. While I can use a *ngIf directive in my template to check for the presence of the tag, I am unsure of how ...

Adding Conditionally Specified Properties to a Parameterized TypeScript Interface Based on Type

Encountering a challenge with TypeScript where I need to selectively add properties to a generic interface depending on the type parameter. Let me explain further with an example: Consider two interfaces, A and G<T>: interface A { IA: string; } ...

Organize JSON data in Angular 6 from an observable based on a specific key

Note: While I am familiar with sorting a regular array of objects using .sort(), I am facing a challenge with an observable object that I am not accustomed to. My task involves retrieving a JSON array of objects with a service: import { Injectable } from ...

Deleting the First Item from an Array in Typescript using Angular

Clicking my Button in .html <button (click)="deleteFirst()">Delete First</button> My array setup and removal function in .ts: people = [ {first: "Tom", last: "Brown"}, {first: "Ben", last: &qu ...

Issue: ASSERTION ERROR: token must be declared [Expecting => null is not undefined <=Actual]

I encountered an error while working on my project. The only special thing I did was use oidc(openId) for authentication. I made some changes to the bootstrap project and now the first component that is running is the home-main component, which includes t ...

A guide on loading modules dynamically using React and Typescript from a server

I am working on a React / Typescript / Webpack / React-Router application that contains some large JS modules. Currently, I have two bundles (common.js and app.js) included on every page, with common.js being a CommonsChunkPlugin bundle. However, there is ...

What is the best method to completely uninstall Apollo-Angular along with all of its dependencies?

Once I added apollo-angular and @apollo/client to my project, I quickly realized that I no longer needed them. However, simply using "npm uninstall apollo-angular" and "npm uninstall @apollo/client" only removed the main folders but left behind other Apoll ...

Can a reducer be molded in ngrx without utilizing the createReducer function?

While analyzing an existing codebase, I came across a reducer function called reviewReducer that was created without using the syntax of the createReducer function. The reviewReducer function in the code snippet below behaves like a typical reducer - it t ...

How do I implement an array of objects using an interface in React and Typescript?

I'm working with an array of objects where the data is stored in a JSON file. Here's a glimpse of the JSON file: [ { "_id": "62bd5fba34a8f1c90303055c", "index": 0, "email": "<a href="/cdn-cgi/l/emai ...

What is the most effective method for declaring callbacks on objects in Typescript?

I am currently working on a sidebar menu component that is connected to a service holding items in the menu. This allows multiple sources to make alterations to the menu as needed. Each item in the menu currently follows the SidebarItem interface: export ...