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

Plugin for managing network connectivity in Ionic framework

In order to check if internet and id connection are available, I need to make a server request. I have implemented the Ionic Native Network Plugin following their official documentation. Here is my code snippet: import { Component } from '@angular/c ...

Secure your React TypeScript applications with GraphQL authentication

When users try to log in on my website, I need to verify their authentication using data from a GraphQL API. I referred to this tutorial for guidance: https://www.apollographql.com/docs/react/networking/authentication/ In my GraphQL playground, I execute ...

Error: Trying to access a property that is not declared on an empty object

Using a fully patched Visual Studio 2013, I am integrating JQuery, JQueryUI, JSRender, and TypeScript into my project. However, I am encountering an error in the ts file: Property 'fadeDiv' does not exist on type '{}'. While I believ ...

Incorporate typings into your CDN integration

I'm interested in utilizing a CDN to access a JSON validation library, as it's expected to provide faster performance (due to retrieving the file from the nearest server within the CDN). The JSON validation library in question can be found here: ...

What is the best way to align a title above menu items within a Material UI app bar when using TypeScript and React?

Check out my current app bar design: app bar image Here is the inspiration for the app bar layout I'm aiming for (title above menu items): inspiration app bar goal This snippet showcases my code: import * as React from 'react'; // More cod ...

Encountered an issue when utilizing the useRef hook in Next.js version 13

I am currently exploring nextjs13 and typescript. I encountered an issue when attempting to use the useRef hook. Below is the code snippet in question: import { useEffect, useRef } from "react" export const useDraw = () => { const canvas ...

Having difficulty transitioning a function with a promise from JavaScript to TypeScript

I am currently in the process of transitioning my existing NodeJS JavaScript code to TypeScript for a NodeJS base, which will then be converted back to JavaScript when running on NodeJS. This approach helps me maintain clear types and utilize additional fe ...

Error in React Native Typescript: The type 'string' cannot be assigned to the type '"solid" | "clear" | "outline"'. (Error code: ts(2322))

I have integrated TypeScript with React Native in my project. import React from 'react'; import { Button } from 'react-native-elements'; import { IThemedButton } from '../../../models/themedButton'; interface IThemedButtonPr ...

You cannot assign multiple properties with the same name to an object literal

I am facing an issue with two validator functions in my TypeScript file. The first validator checks if a user enters a new password same as the old one, displaying an error if so. The second validator ensures that "new password" and "confirm password" must ...

Dependency management with various versions of an NPM package

I'm feeling a bit puzzled about NPM package versions. In my ionic2 app's packages.json file, I have a dependency on [email protected]. Additionally, I have the latest version of ionic-native which is dependent on [email protected]. Th ...

What is the best way to execute a function that retrieves data from a MySQL query and then sends it back as a result in Express.js?

How can I refactor my code to efficiently call a function that returns the result of a MySQL query and send it back in an Express.js response? I am attempting to streamline my SQL queries by exporting them into individual functions to eliminate duplicatio ...

What is the best approach to testing the React Hook "useEffect" that is used to make an API call with Typescript?

Currently, I am working on writing Jest-enzyme tests for a basic React application using Typescript along with the new React hooks. The main issue I am facing is with properly simulating the api call made within the useEffect hook. Within the useEffect, ...

Using React and TypeScript to Consume Context with Higher Order Components (HOC)

Trying to incorporate the example Consuming Context with a HOC from React's documentation (React 16.3) into TypeScript (2.8) has been quite challenging for me. Here is the snippet of code provided in the React manual: const ThemeContext = React.creat ...

Type inference in TypeScript with transitivity

Consider this code snippet for illustration: function foo(t: "number"): number function foo(t: "string"): string function foo(t: "boolean"): boolean function foo(t: "number" | "string ...

What is the best way to utilize typed variables as types with identical names in Typescript?

Utilizing THREE.js with Typescript allows you to use identical names for types and code. For instance: import * as THREE from '/build/three.module.js' // The following line employs THREE.Scene as type and code const scene: THREE.Scene = new THRE ...

Oops, it seems like there was an issue with NextJS 13 Error. The createContext functionality can only be used in Client Components. To resolve this, simply add the "use client" directive at the

**Issue: The error states that createContext only works in Client Components and suggests adding the "use client" directive at the top of the file to resolve it. Can you explain why this error is occurring? // layout.tsx import Layout from "./componen ...

ngPrime table column selection and data extraction

I am looking to extract multiple columns from a table. Can anyone suggest the best approach for this? Does NGPrime offer any functionality for achieving this task? Appreciate your help! ...

What methods are available to extract HTML elements from .ts files?

Exploring Angular development has been quite a challenge for me. I've heard that typescript is an extension of javascript, but when it comes to manipulating HTML elements in the .ts file, I seem to be at a loss. I attempted a simple document.getEleme ...

Trouble encountered with the implementation of setValue on placeholder

When I send the value for age, it is being treated as a date in the API that was built that way. However, when I use setValue to set the form value and submit the form, it also changes the placeholder text, which is not what I want. I would like the placeh ...

Unleashing the full potential of Azure DevOps custom Tasks in VS Code and TypeScript: A guide to configuring input variables

Scenario: I have developed a custom build task for Azure DevOps. This task requires an input parameter, param1 The task is created using VS Code (v1.30.1) and TypeScript (tsc --version state: v3.2.2) Issue During debugging of the task, I am unable to pr ...