Visual Studio Code typescript shows error but code runs well

Question

I use electron, typescript, react with preload.

env

"electron": "19.0.6",
"electron-builder": "23.1.0",
"typescript": "4.7.4",

dir

root - public / preload.ts
 |____ src / main.tsx
 |____ common.d.ts

<common.d.ts>

export interface ItestAPI{
    load:() => Promise<void>
}

declare global{
    interface Window{
        testAPI: ItestAPI    
    }
}

<main.tsx>

export function Main(){

async function handleClick(){
    await window.testAPI.load();
}

return(
  ...
  <btn onClick={handleClick}>
  ...
)
}

<preload.ts>

I guess preload and main both refer to same window because it runs well.

If so, why preload.ts shows me red line(error) ?

Answer 1

In the tsconfig.json file add the common.d.ts to the included files. It's going to be like the following.

{
  "compilerOptions": {
    "target": "es2016",
    "jsx": "react",
    "module": "commonjs",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  },
  "include": [
    "./public/**/*", // <- Here
    "./src/**/*",
    "./common.d.ts"  // <- Here
  ],
}

This way VSCode parses the common.d.ts type definition file. Also, after the change, it's better to close and open the VSCode again so it re-parses everything or just wait a minute or so until it detects the changes.