Javascript type checking through checkJs: true in tsconfig.json does not use local declaration files correctly

[sgronblo]

Issue Type: Bug

I am editing a quite simple Javascript file to be served by our backend for use with a static web site. To avoid having to setup a build workflow for it I thought I would use tsc's ability to type check Javascript files.

After a bit of trial and error I can get to the point where running tsc from the command line seems to be working correctly but the error checking inside of VSCode does not work as expected.

I am using an external third party simple global JS module from a CDN. I have added my own custom declaration file for the part of the API that I want to have checking for.

The file is in "src/types/flex-microform/index.d.ts" and it basically contains a declare class Flex { ... }. I have a main tsconfig.json for my regular backend TypeScript code. I then added a tsconfig.frontend.json with the following content:

{
  "compilerOptions": {
    "lib": ["ES2022", "dom"],
    "noEmit": true,
    "checkJs": true,
    "rootDir": "."
  },
  "extends": "./tsconfig.json",
  "include": ["assets/scripts/**/*.js", "src/@types/**/*.ts"]
}

When I run tsc --project tsconfig.frontend.json the errors are shown correctly however VSCode shows a red squiqqly line on Flex inside const flex = new Flex(captureContext) with the error message Cannot find name 'Flex'. Did you mean 'flex'?ts(2552) this is not correct since if the correct project file would be used the flex-microform/index.d.ts file would be included and therefore the types would be available.

I tried to use the "JavaScript: Go To Project Configuration" action to check whether VSCode is able to detect it, but it seems to expect that JS files must be included in jsconfig.json files. Which is not necessarily the only way for them to be part of a project.

VS Code version: Code 1.69.2 (Universal) (3b889b090b5ad5793f524b5d1d39fda662b96a2a, 2022-07-18T16:12:57.074Z) OS version: Darwin arm64 21.5.0 Restricted Mode: No

System Info

|Item|Value| |---|---| |CPUs|Apple M1 Max (10 x 24)| |GPU Status|2d_canvas: enabled
canvas_oop_rasterization: disabled_off
direct_rendering_display_compositor: disabled_off_ok
gpu_compositing: enabled
metal: disabled_off
multiple_raster_threads: enabled_on
opengl: enabled_on
rasterization: enabled
raw_draw: disabled_off_ok
skia_renderer: enabled_on
video_decode: enabled
video_encode: enabled
webgl: enabled
webgl2: enabled| |Load (avg)|3, 2, 3| |Memory (System)|64.00GB (0.56GB free)| |Process Argv|--crash-reporter-id d03b914e-23da-4b9f-9ed2-7e40a42cdb21| |Screen Reader|no| |VM|0%|

Extensions (30)

Extension|Author (truncated)|Version ---|---|--- vscode-openapi|42C|4.11.4 pgformatter|bra|1.18.0 vscode-eslint|dba|2.2.6 xml|Dot|2.5.1 gitlens|eam|12.1.2 EditorConfig|Edi|0.16.4 prettier-vscode|esb|9.5.0 haskell|has|2.2.0 Ionide-fsharp|Ion|7.0.0 language-haskell|jus|3.6.0 theme-karyfoundation-themes|kar|27.2.3 vscode-docker|ms-|1.22.1 csharp|ms-|1.25.0 python|ms-|2022.10.1 jupyter|ms-|2022.6.1201981810 jupyter-keymap|ms-|1.0.0 jupyter-renderers|ms-|1.0.9 remote-containers|ms-|0.241.3 vscode-typescript-tslint-plugin|ms-|1.3.4 vsliveshare|ms-|1.0.5663 sqltools|mtx|0.23.0 vscode-xml|red|0.21.2022062916 vscode-yaml|red|1.9.1 synthwave-vscode|Rob|0.1.11 rust|rus|0.7.8 jinjahtml|sam|0.17.0 vscode-fileutils|sle|3.5.0 ayu|tea|1.0.5 shellcheck|tim|0.19.6 vim|vsc|1.23.1 (9 theme extensions excluded)

A/B Experiments

``` vsliv368cf:30146710 vsreu685:30147344 python383cf:30185419 vspor879:30202332 vspor708:30202333 vspor363:30204092 vswsl492:30256859 vslsvsres303:30308271 pythonvspyl392:30443607 vserr242:30382549 pythontb:30283811 vsjup518:30340749 pythonvspyt551:30345470 pythonptprofiler:30281270 vshan820:30294714 vstes263:30335439 vscorecescf:30445987 pythondataviewer:30285071 vscod805:30301674 binariesv615:30325510 bridge0708:30335490 bridge0723:30353136 vsaa593cf:30376535 vsc1dst:30438360 pythonvs932:30410667 wslgetstarted:30449410 vscscmwlcmt:30465135 cppdebug:30492333 vscaac:30438847 pylanb8912:30529769 vsclangdc:30486549 ```

[sgronblo]

Ah yeah, forgot to mention. It was working for a while when I was trying to include the JS file into my backend tsconfig.json include files. However that didn't work because I need to make some changes for the frontend JS file (eg. add dom to lib).

But even in that case "JavaScript: Go To Project Configuration" was not able to figure out that the file was actually part of a TS project.

[sgronblo]

Finally figured out a workaround. I moved the tsconfig.frontend.json file above into assets/scripts/jsconfig.json.

[sgronblo]

Except that was no good either. I think what happens is jsconfig.json implicitly sets allowJs to true. Some index.d.ts files that get looked up may require some module that doesn't have a @types/module_name package available. Then because of allowJs tsc starts checking those very old JS files for errors and reports something I don't care about.

[mjbvz]

If "JavaScript: Go To Project Configuration" doesn't think the file is part of a project, checkJS won't be enabled in the editor

This is likely not a bug but a question about how to structure your project. Can you share a minimal project that demonstrates this issue?

[VSCodeTriageBot]

This issue has been closed automatically because it needs more information and has not had recent activity. See also our issue reporting guidelines.

Happy Coding!