typescripttypescript-typingstsconfigproject-reference

Unable to Get Real Type from Global Declaration in TypeScript Project References

I have created a demo repository to illustrate my issue. The repository contains two projects: electron and src, and I am using TypeScript project references.

I have defined the type API_TYPE in the src/global.d.ts file by importing it from the electron/src/index.ts file. However, Visual Studio Code (VSCode) is unable to correctly infer the real type of API_TYPE from src/global.d.ts. When I open the src/main.ts file in VSCode, I see a tooltip indicating that the type is not recognized. enter image description here

I suspect the issue might be related to the references field in the tsconfig.json file. If I remove the references field, everything works fine. However, I cannot remove the references field because the electron and src projects need to be separate.

Here is the relevant code from src/global.d.ts:

import type { API_TYPE } from "../electron/src/index";

declare global {
  interface Window {
    electronAPI: PRELOAD_API_TYPE<API_TYPE>;
  }
}

export {};

I would appreciate any insights or suggestions on how to resolve this issue. Thank you!

Edit at 05-30

I have reuploaded the demo repository. The previous demo was functioning correctly and could not reproduce my issue.

Furthermore, I have identified that the problem is caused by the Vue component. Removing the Vue component src/components/HelloWorld.vue allows for correct inference of the type of window.electronAPI.

Edit at 05-31

I have re-created an online demo, but to my surprise, it actually works properly. However, when I download this project to my local machine and open it using the local VSCode editor, the type inference results are not displayed correctly. Specifically, when I hover over the api and API_TYPE variables in the src/main.ts file, the local VSCode does not show their corresponding types.

The screenshot below shows an online demo displaying the correct types. enter image description here

The screenshot below illustrates the issue where the local VSCode editor fails to display the correct types. enter image description here

Solution

  • I think I have found a solution. Just need to enable the takeover mode of Volar and it should work correctly.

    https://cn.vuejs.org/guide/typescript/overview.html#volar-takeover-mode