How to properly add @types/<something>?

[krutoo]

Hi, in my project I have deno.json and my project contains some utilities for React.

How can I properly add @types/react to whole my project?

It's very inconvenient to do this:

// @deno-types="npm:@types/react@18"
import { useEffect, useState } from 'react';

...each time I import something from react.

Is there some guide about how to properly add @types/* types for NPM-package?

---

UPD, found the example of React with Deno but types is not working:
denoland/react-vite-ts-template#1

[BlackAsLight]

This might be a bit of a hack but can you do this in a separate file and just import that file instead?

// @deno-types="npm:@types/react@18"
export * from "npm:react@18"

[krutoo]

I can do it but... This is not what I expected to do in modern projects with Deno)

[krutoo]

@BlackAsLight Is it impossible right now?

[babakfp]

Yep, this is how great Deno is.
In Node.js, you would just need to install the package and that's it :)

[georgeeburt]

To use @types/react globally in your Deno project without having to declare @deno-types for every React import, you can configure your deno.json file. It should look something like this:

{
  "compilerOptions": {
    "types": ["npm:@types/react", "npm:@types/react-dom"]
  },
  "importMap": "./import_map.json",
  "tasks": {
    "start": "deno task run src/main.ts"
  }
}

Then optionally, you can configure your import mapping in a import_map.json:

{
  "imports": {
    "react": "npm:react",
    "react-dom": "npm:react-dom"
  }
}

Then, update your deno.json to include the new import mapping:

{
  "importMap": "./import_map.json"
}

That's it! You shouldn't need to use @deno-types annotations anymore.

[krutoo]

@georgeeburt This is not working, because of same reason as here I think: denoland/react-vite-ts-template#1

[georgeeburt]

Ok, the following should do the trick, import the types into your deno.json (make sure they're installed):

{
  "compilerOptions": {
    "types": ["npm:@types/react", "npm:@types/react-dom"]
  }
}

Then try reloading Deno's cache:

deno cache --reload

Failing that, maybe double check your React imports.

[krutoo]

@georgeeburt You can check it yourself on this repo: https://github.com/denoland/react-vite-ts-template - it is not working

deno cache --reload also not working - it requires some arguments

[krutoo]

@georgeeburt did you check your solution in https://github.com/denoland/react-vite-ts-template?

[SickMcNugget]

Cache reloading seems to work for me. Just needed to add an empty string after the command.

deno cache -r ""

[MrGVSV]

I'm also running into issues with the Vite template (WebStorm not recognizing types in compilerOptions). One workaround I found was to delete the node_modules automatically generated by some of the tasks.

It still doesn't fix everything, but it at least helps with autocomplete.

[liamfd]

I've found that for migrating all of my npm: deps to a package.json made Deno automatically resolve @types packages without the comment. I also had to remove "nodeModulesDir": "auto" from my deno.json. May need to rm -rf node_modules && deno install --reload for good measure.

More in #27569. I created an example repo for the issue, with a PR showcasing the workaround here: liamfd/test_deno_types#1

Not sure if this is intentional or not - YMMV. I'm on deno 2.1.4.