Coder Social home page Coder Social logo

Comments (8)

eps1lon avatar eps1lon commented on May 21, 2024 3

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.

eps1lon avatar eps1lon commented on May 21, 2024

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.

nestarz avatar nestarz commented on May 21, 2024

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.

eps1lon avatar eps1lon commented on May 21, 2024

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.

nestarz avatar nestarz commented on May 21, 2024

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.

markerikson avatar markerikson commented on May 21, 2024

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.

nestarz avatar nestarz commented on May 21, 2024

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.

ali09raza avatar ali09raza commented on May 21, 2024

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

Hello, world!
;
}

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.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.