Typescript Types are recognized only when the respective type files ( *.d.ts ) are kept opened. How to auto recognize these type files?

Question

In my Gatsby typescript project, the types defined in the "*.d.ts" files are always unrecognized and is always highlighted as an unknown type.

But when the respective type file is opened in a new tab, the respective lint errors are abscent.

How to make sure VS CODE auto scans and identifies type files in the project folder without having to open them manually everytime ?

Given below is the tsconfig.json file :

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "jsx": "preserve",
    "lib": ["dom", "es2015", "es2017"],
    "strict": true,
    "noEmit": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "removeComments": false,
    "sourceMap": true,
    "noImplicitAny": true
  }
}

Answer 1

You should put everything related to the Chord class into the Chord.ts file. d.ts files are used to define types for JavaScript modules which is not what you have here.

In your index.tsx file you can then import the Shapes type like so:

import { Shapes } from "Chord";

Of course every type that you import must be exported in your Chord.ts file.