Tips for utilizing the `tsconfig.js` file in place of the `tsconfig.json` file

I have several projects each with their own tsconfig.json files and other configuration files, and my aim is to use the same configurations across all of them.

To accomplish this, I decided to create an npm package called config, which contains a standardized tsconfig.json file and other necessary .json config files.

Previously, my TypeScript build command was

tsc -p tsconfig.json --incremental
, but I attempted to change it to tsc -p tsconfig.js --incremental by creating a tsconfig.js file that looks like this:

module.exports = {
  ...require('./node_modules/@myOrg/myPackage/tsconfig.json')
};

I used spread syntax to override certain properties if needed. However, despite the validity of my approach, it did not work as intended. The compilation failed when using tsc with this configuration file because it was excluding important properties from the original tsconfig.json (such as esModuleInterop, downlevelIteration, es2015, etc...) present in the package's tsconfig.json.

How can I accomplish my goal? While this technique may work for other .json config files, it seems insufficient for tsconfig.json due to certain required flags.

Answer №1

An executable config module is explicitly not supported:

We are not accepting PRs to turn config into an executable thing. This opens up a myriad of issues (is it secure to run this? what dependencies does the config file rely on? what assumptions does the config file make about its environment?) that we would rather avoid.

GitHub: Allow javascript (or typescript) config file <Suggestion> (#30400)

Alternatives:

You have not explained why you are consolidating your tsconfig. If it is simply for convenience, you could utilize the extends option to inherit configuration settings from another tsconfig file.

Remember that "All relative paths found in the configuration file will be resolved relative to the configuration file they originated in." Therefore, adopting this approach may limit your ability to inherit all properties. You may need to specify some options in your local config file (like files).

If you wish to replicate your tsconfig entirely (including relative file paths), you could utilize a build tool (e.g. gulp) to duplicate the tsconfig.json from a known location to your project root before running tsc. However, this method may introduce complications, such as requiring extra CLI steps before opening the project in an editor like VS Code.

A word of caution:

A base config can be beneficial for streamlining your builds, but there is a risk that it might create more challenges in the long term. It is crucial to strike a balance. Over-reliance on an external source can rigidify your project, making it challenging to adapt to changes or new technologies. You may end up needing to customize the base configuration for one project, which could conflict with another. Alternatively, you might constantly override the same properties from your base configuration due to evolving preferences while older projects still rely on the outdated options. Although versioning or tagging could mitigate these issues, it ultimately results in maintaining multiple configurations that are harder to manage and use. The rationale behind keeping your project configuration within your project itself holds merit.

Inheriting from a shared config is not entirely negative, but excessive dependency on inheritance might lead to long-term difficulties that are more complex to resolve than merely duplicating your tsconfig from a template.

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

Error message: Unable to assign type (Combining React, Typescript, and Firebase)

Just started using TypeScript and in the process of migrating my React app to incorporate it. Encountering some type issues with Firebase auth service that I can't seem to find a solution for. Any suggestions? import React, { useEffect, useState } f ...

What is the process for creating a new type from a nested part of an existing type?

Currently, my website is being developed with a focus on utilizing code generation to ensure type safety when handling GraphQl queries. Certain components within the application receive a portion of an object as a prop. The specific type structure is outli ...

Tips for disentangling code from types in Typescript

Instead of intertwining code and types like the example below: const compar8 : boolean | error = (action: string, n: number) => { switch(action) { case 'greater': return n > 8; case 'less': ...

Transfer my testing utilities from React Router version 5 to version 6

I am currently transitioning my project to React V6 router and encountering an issue with my test utility function. Every time I run the test, all my expectations fail because jest cannot locate the object. Has anyone faced this error during a similar migr ...

Tips for accessing a variable from a Global service in Ionic

I am currently working on developing an app using Ionic but experiencing some difficulties. I encountered an issue while trying to access a variable from a global service when it is imported to another page. Here is an example of the Global service (backen ...

When delving into an object to filter it in Angular 11, results may vary as sometimes it functions correctly while other times

Currently, I am working on implementing a friend logic within my codebase. For instance, two users should be able to become friends with each other. User 1 sends a friend request to User 2 and once accepted, User 2 is notified that someone has added them a ...

During the execution of Jest tests, a singular module is experiencing undefined imports

Encountering an unusual issue with Jest, create-react-app, and typescript. Out of the blue, Jest has stopped importing my "./ProcessStore" module correctly. This module is a dependency of something that is being imported in my tests. The error message in ...

React Native Material - Implementing a loading indicator upon button press

With React Native Material, I am trying to implement a loading feature when a button is clicked. The goal is to show the "loading" message only when the button is active, and hide it otherwise. Additionally, I would like for the loading message to disappea ...

What is the reason behind the lack of preservation of object state when using Promises?

Here is a code snippet to consider: class ClientWrapper { private client: Client; constructor() { this.client = new Client(); } async connect() : Promise<void> { return this.client.connect(); } async isConne ...

Organized modules within an NPM package

I am looking to develop an NPM package that organizes imports into modules for better organization. Currently, when I integrate my NPM package into other projects, the import statement looks like this: import { myFunction1, myFunction2 } from 'my-pac ...

Issue - The 'defaultValue' is failing to load the state value, and the 'value' is not being updated when changed

My current setup involves an input field in my MovieInput.tsx file: <input id="inputMovieTitle" type="text" onChange={ e => titleHandleChange(e) } value={ getTitle() }> </input> This is how the titleHandleChange function ...

Error: The argument provided cannot be assigned to a parameter that requires a string type, as it is currently a number

Currently, I am in the process of migrating some older websites to TypeScript. However, I keep encountering a type error during the build process. The specific error message is Type error: Argument of type 'number' is not assignable to parameter ...

What is the best practice for Angular: running production build before or after testing?

When developing a Java application for production, I typically set up the build process to create the production artifacts first and then run tests against those artifacts. Recently, I joined an Angular project and noticed that the build process is struct ...

No errors encountered during compilation for undefined interface object types

Hey there, I'm currently exploring the Vue composition API along with Typescript. I'm facing an issue where I am not receiving any errors when an interface does not align with the specified types for that interface. Although my IDE provides aut ...

The resolve.alias feature in webpack is not working properly for third-party modules

Currently, I am facing an issue trying to integrate npm's ng2-prism with angular2-seed. The problem arises when importing angular2/http, which has recently been moved under @angular. Even though I expected webpack's configuration aliases to hand ...

What is the best way to simplify passing repeated children properties while ensuring non-optional types are maintained?

One of my components is being used multiple times consecutively with some properties being repeated and some being unique: interface InsideComponentProps { repeatedThing: string; uniqueThing: string; } const InsideComponent: React.SFC<InsideCo ...

Leveraging Angular 2 directives in TypeScript to bind a value from a custom control to an HTML control

I have created a unique custom directive named "my-text-box", and within this directive, I am utilizing the HTML control <input>. I want to pass values from my custom control to the HTML input control. In Angular 1, I would simply do something like & ...

What could be causing the type errors I am encountering while trying to resolve this Promise within a generic function?

I am attempting to implement additional types within this WebSocket protocol: type Action = { action: "change-or-create-state"; response: string; } | { action: "get-state"; response: string | null; }; /** * map an action to its response ...

Issue with the `instanceof` operator not functioning properly when used with Immutable.js

We've encountered an issue while upgrading our project from typescript2.4 to typescript3.2 specifically with immutable.js. Prior to the update, simply using if(x instanceof Immutable.Iterable) would result in the type of x being Immutable.Iterable< ...

Can someone assist me with running queries on the MongoDB collection using Node.js?

In my mongodb collection called "jobs," I have a document format that needs to display all documents matching my query. { "_id": { "$oid": "60a79952e8728be1609f3651" }, "title": "Full Stack Java Develo ...