The TypeScript compiler encounters difficulties in locating type definitions when utilizing an inherited tsconfig file

There seems to be an issue with the functionality of tsconfig.json inheritance, specifically regarding the proper inheritance of the "typeRoots" setting.

http://www.typescriptlang.org/docs/handbook/tsconfig-json.html

(folder structure provided below)

web.site -> tsconfig.json
- typings
- node_modules
- scripts
  - ts
  - tests
    - ts -> tsconfig.json (this tsconfig extends/inherits web.site - see contents below)

Running the tsc command in the web.site folder successfully compiles due to the correct usage of the typeRoots setting.

However, running the tsc command in the tests folder results in compilation errors as it fails to locate references in the "typings" folder which it should based on the inherited typeRoots settings.

Moving the failing file from the tests folder to the root web.site directory allows for successful compilation, indicating a problem with how tsconfig.json is being utilized.

Considering the issues with inheritance, would it be better to abandon it and use separate tsconfigs instead?

tsconfig.json in web.site:

{
"compileOnSave": true,
"compilerOptions": {
    "listFiles": true,
    "removeComments": true,
    "sourceMap": true,
    "module": "es6",
    "moduleResolution": "classic",
    "outDir": "scripts/js",
    "typeRoots": [
        "node_modules/@types",
        "typings"
    ]
},
"include":[
    "scripts/ts/**/*"
]

tsconfig.json in tests:

{
  "extends": "../../tsconfig.json",
    "compilerOptions": {
        "outDir": "js",
        "removeComments": false
    },
        "include": [
        "ts/**/*"
    ]
}

Answer №1

There are a couple of key components to consider in relation to this issue:

  1. Determining which properties have the ability to be inherited and which do not

    While there isn't any official documentation available, there have been discussions within the original Configuration Inheritance proposal regarding the inheritance of certain properties versus requiring them to be specified in the final configuration file.

    Based on my investigations, it seems that certain path-specific properties like baseUrl and paths cannot be inherited. I haven't tested with typeRoots, but it is possible that it is intentionally not supported for inheritance.

  2. Understanding the resolution of relative paths

    When TypeScript resolves a path, it uses the location of the final configuration file as the basis for resolving relative paths- also referred to as the "originating file".

    In the scenario you provided, effectively configuring the inherited typeRoots is difficult because when using web.site/tsconfig.json, the node_modules folder is located in a neighboring directory, whereas when using tests/tsconfig.json, the node_modules directory resides higher up in the hierarchy.

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

best practices for choosing items from a dropdown menu using Angular

I have a dropdown list displaying existing tags/chips created by users in the past. However, I'm having an issue where when I select a tag from the dropdown list, it doesn't show up in my input field (similar to the Chart tag currently). I am abl ...

react state change not triggering re-render of paragraph

I recently started learning react and web development. To streamline my work, I've been using ChatGPT, but I'm facing an issue that I can't seem to solve. I'm trying to fetch movie descriptions from the TMDB API using movie IDs, but des ...

Is it possible for me to incorporate a portion of the interface?

Is it possible to partially implement an interface? export interface AuthorizeUser { RQBody: { login: string; password: string; }; RSBody: { authorizationResult: AuthorizationResult; }; }; class AuthorizeUserRQBody implements Authorize ...

"Exploring the power of index signatures and methods in Typescript

What might be the reason for code producing a ts(2411) error? class Greeter { [key: string]: string | number[]; greeting: string; constructor(message: string) { this.greeting = message; } greet(): string { return "Hel ...

How can I enable editing for specific cells in Angular ag-grid?

How can I make certain cells in a column editable in angular ag-grid? I have a grid with a column named "status" which is a dropdown field and should only be editable for specific initial values. The dropdown options for the Status column are A, B, C. When ...

Step by step guide on transferring data from one Angular 7 component to another component following API response retrieval

I have been tackling an issue related to an API recently. Upon receiving a response from the API, my goal is to pass the value to a child component. In this component, I will run a method to obtain a response and display it on the screen. Example Code: ...

Strategies for enhancing performance in an Angular 4 project

Currently, I am engaged in a project that involves utilizing Angular 4 for the front-end and PHP for the back-end with the support of an Apache server on Ubuntu 16.04 LTS. We have incorporated Node JS to facilitate the functionality of Angular. This raises ...

Develop interactive web applications using Typescript

Having difficulty compiling and executing the project correctly in the browser. The "master" branch works fine, but I'm currently working on the "develop" branch. It's a basic web project with one HTML file loading one TS/JS file that includes i ...

Typescript's Accessor decorator ensures that the decorated code is executed only once, fetching the previously calculated value for any subsequent calls

The topic discussed here originates from a previous discussion on a method decorator in Typescript. In some scenarios, there are `get` methods in a Typescript class that involve intensive computations. Some of these methods always return the same result an ...

TypeScript and Node.js: The type of 'this' is implicitly set to 'any'

Help Needed with TypeScript issue: An issue is arising in my TypeScript code related to a mongoose schema's post function. It is used to generate a profile for a user upon signing up, using the User model. Even though the code functions properly, th ...

"ng2-file-uploader necessitates a browser refresh in order to function

I am currently utilizing ng2-file-upload within my Angular 10 project to allow users to upload their photos. The upload process is functioning correctly, but the issue arises when the newly uploaded photo does not automatically appear in the photo list wit ...

Efficiently loading data in a table with a universal filter feature using Angular with PrimeNG

Recently, I managed to set up a datatable with the functionalities of both Lazy loading and global filter. Utilizing PrimeNG components for this implementation was a breeze. However, an issue surfaced where the global filter ceased to function when lazy lo ...

What is the best way to arrange map elements in a React application?

I am trying to implement filter buttons for low to high rates and high to low rates, but I am having trouble figuring it out. How can I apply the filter to display the data accordingly? The data that needs to be filtered is stored in rate.retail_rate. ty ...

Is MongoDB still displaying results when the filter is set to false?

I am currently trying to retrieve data using specific filters. The condition is that if the timestamp falls between 08:00:00 and 16:00:00 for a particular date, it should return results. The filter for $gte than 16:00:00 is working correctly, but the $lte ...

Calculating Events with the onChange Method in Typescript

How do I calculate the total ticket price when I adjust the number of individuals? HTML Code : <div class="row"> <div class="col-md-6"> <label for="person">Person</label> <div class="form-group"> ...

When employing HTTP GET within Angular 2, it prompts the retrieval of a response in my subsequent HTTP POST request for

Greetings! I am relatively new to Angular 2 and I am encountering some unexpected HTTP behavior. Below is my login method used to send an HTTP POST request to my backend server and retrieve a token. It is functioning properly. public login(username, pass ...

Is there an issue with type guards not functioning as expected within async functions in Typescript?

As I work on implementing an authentication function for user roles using TypeScript and Firebase/Store, I've come across a peculiar issue related to type guards in async functions, especially with the use of .then(). Here is a brief snippet showcasi ...

The issue with zone.js remains unresolved

Since updating to the most recent version of Angular cli, I have encountered an error when trying to run ng serve: ./node_modules/@angular-devkit/build-angular/src/webpack/es5-polyfills.js:106:0-37 - Error: Module not found: Error: Can't resolve &apo ...

Guide on creating a universal template from a collection of interfaces

Two interfaces, AllTypes type: interface A { // ... } interface B { // ... } type AllTypes = A | B; How can I utilize generics to ensure that a function's argument is an object with either interface A or B? // pseudocode function test<T ...

Controller property not being updated by directive

I have developed a custom directive to identify when the enter key is pressed within a text box. Here's the implementation of the directive: import { BookmarkService } from "../services/bookmarkService"; import { qlik, QlikBookmarkInfo } from "../qli ...