Search code examples
typescriptnuxt.js

Using typescript types from the @types folder in Nuxt3


From what I understand. The suggested way to use JavaScript libraries in TypeScript is to install the corresponding *.d.ts files from npm. These are usually found in the @types/ namespace.

This works really well when I'm creating my own TypeScript projects. When I use Vite and request TypeScript it takes one extra step - I need to add "node_modules/@types/**/*.d.ts" to the includes property in the supplied tsconfig.json.

However Nuxt maintains its own autogenerated tsconfig.json (which the local file extends). Trying to add an include property overwrites the nuxt include which means TypeScript imports nothing by default.

So where can I put the directive to include "node_modules/@types/**/*.d.ts"? More importantly, why isn't that the default?

How do I have TypeScript pickup the declarations in the @types/ folder?


Solution

  • B"H

    Surprising workaround. I figured out how to make this work with a small tweak. I tried everything, that everyone suggested. Nothing worked. Until I realized that if I added a /// <reference path="" /> to any *.ts file in my project, it made those types available to all files.

    So I new have a file called ambient.ts tucked away in my local types folder,and every time I added a library from StaticallyTyped I add a row to that file like this

    /// <reference path="../node_modules/@types/gapi/index.d.ts" />
    

    Now the types are available in every file throughout my project.