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?

[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.

[georgeeburt]

You're right, that part was unnecessary.

You may be able to simplify the process by updating your deno.json to the following:

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

Let me know how you get on.

[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?

[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.