TypeScript compiler cannot find typings when using inherited tsconfig

Question

I am doubting that tsconfig.json inheritance works as fully as it should. And that "typeRoots" setting is not inherited properly or at all.

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

(folder structure below)

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

If I run tsc command in my web.site folder, it finds typings and compiles sucessfully. Presumably because it uses the typeRoots setting correctly.

If I run tsc command in my tests folder, it can't find any typings and fails to compile. You can assume the errors are simply failure to find references to declarations it should find in "typings" folder.

I can copy the same file from tests (which fails) to the root web.site and it then compiles successfully.

Clearly, it is not using the tsconfig.json properly because given the inheritance, I've setup, it should find typings via the inherited typeRoots settings. But is not.

Should I just ignore inheritance as something half-baked and use separate tsconfigs for this?

in web.site/tsconfig.json:

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

}

in tests/tsconfig.json:

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

Answer 1

There are two parts to this issue:

1. Understanding which properties can be inherited, and which can't

   Although I haven't found any official documentation, there was some discussion in the original Configuration Inheritance proposal regarding which properties could be inherited and which would have to be in the leaf configuration file.

   From my experimentation I have found that some path-based properties, such as baseUrl and paths, cannot be inherited. I haven't tried using typeRoots so I can't say for sure, but it may not be supported by design.

2. Understanding how relative paths are resolved

   When resolving a path, TypeScript will use the location of the leaf configuration file, which it calls the "originating file", as the current working directory for resolving relative paths.

   In the example you mentioned, there is no way to successfully configure the inherited typeRoots, since when using web.site/tsconfig.json the node_modules are in a sibling folder, whereas when using tests/tsconfig.json the node_modules are in an ancestor folder above.