vscode can't find typeRoots type definitions

Question

I'm trying to have only one file to have most of the type definitions athat are going to be used in the whole application, i've created a folder called @types and a index.d.ts file exporting every single interface/type i want.

Updated my tsconfig.json to include that folder:

{
    "compilerOptions": {
        "outDir": "./built",
        "allowJs": true,
        "target": "es5",
        "jsx": "react",
        "allowSyntheticDefaultImports": true,
        "lib": [
            "es2015"
        ],
        "typeRoots": [
            "./@types"
        ],
    },
    "include": [
        "./client/**/*",
        "./@types/**/*"
    ],
    "awesomeTypescriptLoaderOptions": {
        "silent": true,
        "errorsAsWarnings": true
    }
}

Even though, when in the code (inside client/...) i reference one of the interfaces present on index.d.ts, vscode throws a "Could not find name".

Is there a better way to fix this?

Interface definition present inside @types/index.d.ts.

export interface Agent {
    name: string;
...
}

Usage:

interface Props extends RouteComponentProps<any> {
    agent?: types.Agent;
}

Answer 1

Since you are using the export keyword, @types/index.d.ts is treated as a module, and the only way to access types from it is to import them. For example, after doing the following, you could refer to types.Agent:

import * as types from "../path/to/@types/index";

You may want to remove all occurrences of export so that @types/index.d.ts is treated as a global declaration file and you can refer to types simply as Agent. Or you can put the types in a namespace called types and then refer to types.Agent.

The typeRoots compiler option is unrelated. It tells the compiler where to find packages with declarations that should be loaded, but your problem is not loading the declarations (since @types/index.d.ts matches your include) but rather importing them.