This is for the case where you using a
script tag to include a third-party library.
<!DOCTYPE html> <html lang="en"> <head> ... </head> <body> ... <script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script> <script src="main.js"></script> </body> </html>
In this example, I’m including the Greensock (GSAP) animation library. In main.js, I don’t get IntelliSense for GSAP.
VS Code has automatic type aquisition, which means that it will automatically fetch these types for you, but with a big caveat.
In my use case, I do neither. This is probably a less common scenario now. It would happen to beginners and some people eschewing tools on a simple/small project.
Gimme, gimme. Im getting IntelliSense withdrawal! 😖
The simplest solution is to find the NPM package with the types, and include it as a dev dependency. This way, your code can remain the same.
npm install --save-dev @types/gsap
Once the download completes, IntelliSense is available immediately.
Types for some libraries are sourced from the DefinitelyTyped GitHub repo.Many popular packages follow this
@types/<<library name>> naming convention also.
You can search for NPM packages that have type definitions using https://www.typescriptlang.org/dt/search.
You may find that some packages are not up-to-date. I found @types/gsap to be incomplete. It does not include a definition for the
gsap object. The gsap npm package covers the entire API. So, you can install that as a dependency instead -
npm install --save-dev gsap.
One thing to note is that the type definitions don’t provide IntelliSense inside
script tags in your HTML file. There is an open issue requesting this feature. Hopefully, this will be resolved in the near future! 🤞