Bug: React not defined in TypeScript when importing from npm about react HOT 8 OPEN

I maintain the React types and I'm on the React team. The TS types just weren't part of React historically so there's a lot of catching up to do.

from react.

It's definitely something to explore long term but not trivial to do. Does Deno not support any JS library that ships types in @types/*?

from react.

Types must be manually added, from the documentation:

Providing types when importing: If you are consuming a JavaScript module and you have either created types (a .d.ts file) or have otherwise obtained the types you want to use, you can instruct Deno to use that file when type checking instead of the JavaScript file using the @deno-types compiler hint. @deno-types needs to be a single line double slash comment, where when used impacts the next import or re-export statement.

https://docs.deno.com/runtime/manual/advanced/typescript/types

And the solution to support any JS library that ships types in @types/* is disscused here: denoland/deno#18203 (comment)

But overall, it isn't specific to Deno, as it's a React choice to have (or not) a first-call TypeScript experience and deliver types in it's own scope and specified directly from it's own package.json.

Can I ask why it isn't trivial as the effort to make the types is already well known ? isn't it just a copy paste from the @DefinitelyTyped codebase into the facebook/react codebase ?

from react.

isn't it just a copy paste from the https://github.com/DefinitelyTyped codebase into the facebook/react codebase ?

It needs release coordination which isn't trivial considering the amount of users we have. Moving types from @types/ to the actual library is a breaking change.

And then we have to figure out integration testing.

from react.

Ok thanks for the follow up. Do you think React 19 can be a good target, as it's a new major version and that would allow such breaking changes ? But you know more about the repercussion that it would trigger ! and I don't know how I can bring the @types team to follow up this discussion so that integration become painless.

from react.

Another way to put it is:

There's been significant iteration on the React types over the last couple years, but zero official React releases during that time.

With the current structure, at least those types updates can be shipped separately.

(Perhaps if the types were included, the React team's release approach would change, but for now at least the separation has a benefit.)

from react.

I understand the logic, but what if types could be updated in a patch semantic version (major.minor.patch) ? so types could be in a faster iteration than other updates. I don't get the benefit, we are talking about future release, ideally starting a major version like 19, what downside changing the release approach would have, if it's documented.

And again, I'm confused on why TypeScript support has to be done separately, by another team, isn't TypeScript used by a majority of library authors ? compagnies and users ? Isn't it a feature that would benefit the ecosystem if it's managed by the React team ? I know React use Flow and I think that's the main reason of the current state, but maybe the @DefinitelyTyped react types contributors would like to make PR to the react codebase with the types they are writing.
But again, I'm not one of those contributors and I'm not a react team member, it's just that I feel that it could be improved.

from react.

Deno doesn't natively include type definitions for external libraries like React.
TypeScript requires type information for imported modules to ensure type safety.
Solution:

Install Type Definitions:

Use the deno add command to install the @types/react package:

Bash command:

deno add -D https://deno.land/x/types/[email protected]/react.d.ts

Replace v18.0.22 with the specific React version you're using for compatibility.

Import Type Definitions:

In your TypeScript file, add a @deno-types comment at the top to specify the type definition file:

TypeScript
/* @deno-types="https://deno.land/x/types/[email protected]/react.d.ts" */

import * as React from "npm:react";

Explanation:

Installing @types/react provides the necessary type information for React.
The @deno-types comment instructs Deno's TypeScript compiler to use these types for the react import.
Additional Considerations:

If you prefer a different version of @types/react, adjust the version number in the deno add command and @deno-types comment accordingly.
Consider using a bundler like Vite that handles dependencies and type definitions automatically. Explore Deno's built-in bundling capabilities as well.
Example Code (After Fix):

TypeScript
/* @deno-types="https://deno.land/x/types/[email protected]/react.d.ts" */

import * as React from "npm:react";

function MyComponent() {
return

React.render(MyComponent, document.getElementById('root'));

With these steps, your TypeScript code should now recognize React and provide type safety for your React components in Deno.

from react.