[Request] Typings for es-react
okhomenko opened this issue ยท 12 comments
Typescript support would be greatly appreciated
To make it work for now I have installed @types/react
, @types/react-dom
and created typings.d.ts
file where I just reexported typings.
// src/typings.d.ts
declare module 'https://unpkg.com/es-react' {
import React from 'react';
import ReactDOM from 'react-dom';
export {
React,
ReactDOM
};
}
How does this work as an es-module; that is without a build step?
With build step. Typescript generates es-modules from .tsx
files.
But without typings IDE doesn't know what is inside of the 'https://unpkg.com/es-react'
module.
After I added typings.d.ts
it now understand what is React, ReactDOM.
Here is example of the project https://github.com/okhomenko/es-react-typescript
I hope it all makes sense.
Ahh, so you are doing this to get type suggestions in your editor? That makes more sense. Where do you get the type definitions from?
My main concern is type safety, suggestions is an extra score. Type definitions I get from @types/react
and @types/react-dom
.
When I import React in .tsx
:
import React from 'react';
typescript read functionality from react
module, and definitions from @types/react
module.
In the example below I use definition file .d.ts
(not regular .ts
), so when I import React from 'react'
it reads type definitions from @types/react
.
// src/typings.d.ts
declare module 'https://unpkg.com/es-react' {
import React from 'react';
import ReactDOM from 'react-dom';
export {
React,
ReactDOM
};
}
My initial idea is to replace commonjs module react with es module react.
I started with replacing imports React from 'react'
to import { React } from 'https://unpkg.com/es-react'
. Typescript started complaining that there is unresolved module 'https://unpkg.com/es-react'
and from this point I've lost all type definition for React Components.
That's the main source of this issue.
Ok, well I kind of understand the issue but I feel like these two approaches are quite contradictory. If you are using typescript (and so presumably bundling your app) then why would you use es-react and not just react? I'm not saying you shouldn't per se but rather trying to understand your motivations for using es-react over just react.
(disclaimer I am only just myself starting to look at how types work with buildstep-less architectures)
That's the point, I don't want to bundle. Typescript can generate commonjs or es modules. It doesn't bundle them all together, just compiles to .js. Webpack is what's bundling them all together.
create-react-app/whatever tool chain. It usually contains everything: preprocessor for css (sass/less/etc), compiler (babel/typescript/etc) and bundler (webpack/rollup). CSS Preprocessor and JS compiler generate commonjs modules. Next step bundler bundles commonjs files all together.
My motivation is to:
- stop using bundlers
- keep using Typescript for type safety
- start using es-modules (since there is vast support of http2 and es-modules)
Cool. Well sounds like you know what you want but I don't know how to help as I am not familiar enough with typescript or the type files. What I would suggest is cloning this repo (an older version of it which just contained the bare essential files) then try adding the appropriate files to that and making a pull request so that we can see what it might look like.
How does that sound to you?
Sounds good!
Thank @lukejacksonn for this package and all the questions ๐
When I started this issue I didn't know exactly what I want and how it suppose to work. Now at least I have an idea.
Hey @okhomenko hopefully this is fixed for you now thanks to @vovaguguiev and #14. Closing here, feel free to re-open if you have any further issues!
@lukejacksonn @vovaguguiev ๐ thanks, exactly what I need!