Current Setup

Here is my directory structure:

root
├──typings/           # currently empty
├──package.json
├──package-lock.json
├──tsconfig.json
└──main.ts

Here is my tsconfig.json:

{
    "compilerOptions": {
        "typeRoots": [
            "./typings"
        ],
        "types": ["Phaser"]  
    }    
}

Here is my main.ts file:

let countdownNumber: Phaser.GameObjects.BitmapText;

Then I've run the following command in terminal:

tsc --traceResolution

I am trying to use Phaser as a global variable in my main.ts file.

Expected behavior:

What should happen is Phaser shouldn't get resolved because compiler should start looking into my custom folder typings.

Actual behavior:

Somehow it still gets resolved. And this is what it prints:

Type reference directive 'Phaser' was successfully resolved to '/Applications/XAMPP/xamppfiles/htdocs/phasertest/node_modules/Phaser/types/phaser.d.ts' with Package ID 'phaser/types/phaser.d.ts@3.22.0', primary: false.

I don't know how it finds it since in my typeRoots, I don't have node_modules specified.

What I have tried:

I tried to exclude node_modules folder, I thought maybe they still get compiled and that's why this happens, but I couldn't make exclude work with any of the following:

  • "exclude": ["node_modules/*"]
  • "exclude": ["./node_modules/*"]
  • "exclude": ["./node_modules"]

but none of these worked.

I suspect this is expected behavior, although I'd agree it's not super intuitive

According to the tsconfig docs on Types > What does this affect?

This option does not affect how @types/* are included in your application code, for example if you had the above > compilerOptions example with code like:

import * as moment from "moment";
moment().format("MMMM Do YYYY, h:mm:ss a");

The moment import would be fully typed.

When you have this option set, by not including a module in the types array it:

  • Will not add globals to your project (e.g process in node, or expect in Jest)
  • Will not have exports appear as auto-import recommendations