How to use d.ts Typescript Definition file for javascript intellisene in a non-typescript project

Question

I have a type script project that has "declaration": true in tsconfig.json to generate a d.ts file. It generates as:

/// <reference types="jquery" />
declare class KatApp implements IKatApp {
    selector: string;
    private static applications;
    static remove(item: KatApp): void;
    static get(key: string | number | Element): KatApp | undefined;

// removed rest for brevity

I tried following the directions of IntelliSense based on TypeScript declaration files to enable intellisense in a non-typescript project (it is actually a web forms project.

In one of my pages, I have the following:

<script>
    (function () {
        /**
         * @type {KatApp}
        */
        var application = KatApp.get('{id}');

        // Based on documentation, I'd expect to get intellisense
        // on 'application.' at this point.

    })();
</script>

<p>Hello World</p>

VS is complaining that it couldn't find 'jquery' reference. I'm trying to figure out what is the recommended way to get this to work given:

1. I don't have npm/bower tied to this project at all, and would rather not if possible.
2. I checked the %LOCALAPPDATA%\Microsoft\TypeScript folder like article mentioned and jQuery is there.
3. What if the KatApp.d.ts 'project' has other interfaces that made the compile of that TS project work, but now would be needed because the types are not included inside KatApp.d.ts?

Update

Following advice of @EliasSchablowski, I used npm to install the typings for jquery. In the screen shot below, you can see the types under the node_modules\@types folder along with my two *.d.ts files. I no longer get compile issues with jquery, but you can see that no intellisense is detected:

The following screenshot shows intellisense working but only if I have my KatApp.d.ts file opened in an editor:

Is that the expected behavior?

Answer 1

I created 2 projects for test in a solution and one is type script project and another is a non-typescript project(e.g:web application) and I reproduced this issue in my understanding way.

I put the d.ts file under the folder wwwroot in the webapplication project ,when I view my page,it shows the error :

It seems like jQuery referenced in the d.ts file isn’t found. I try to reference the class KatApp directly from the type script project in the web application project without putting the d.ts file into the web application project. The page works well without errors.

From the Automatic acquisition of type definitions, the folder %LOCALAPPDATA%\Microsoft\TypeScript contains the packages d.ts references.But when i copy d.ts file into web application project, there is no connection between this path and the project. I guess this is the reason why VS is complaining that it couldn't find 'jquery' reference.

To summary, when encountering package missing, you can make sure the d.ts file you reference in another project(web app) is in the type script project folder .Or you can use npm install CLI in web application npm install @types/jquery -D

BTW, If there is any misunderstanding, please feel free to let me know.

Answer 2

Following the update, from the file browser and JSDoc type declaration, the problem for intellisense is that VSCode doesn't know where to look for IKatApp, the best way to do this is through the tsconfig.json's typeRoot and types, as outlined in the tsconfig's reference for typeRoot and types, which should work with VSCode's JSDoc implementation as well.