well, I am shifting to typescript for react. but the problem is that, when I install some package from the npm/yarn, I am unable to use it in my .tsx component.
it says to look #types/ but sometimes, that package is not available
so, how can I use npm pacakges in.tsx file
Visit https://definitelytyped.org/ and TypeSearch for the definitions of the package you need to run in your TS application.
This will allow you to use TS types of some of your favourite NPM JS packages.
Some libraries don't have typescript support, so, before using it in your react-typescript project, you can check where or not they have typescript support in https://npmjs.com by entering the name of the package you want to use in the search box and put #types/ in front of it. If such package is available you can safely use it in your project. In the below example, you can see that lodash library has typescript support. So you can safely run npm install #types/lodash in your project directory and use it.
You can use it. The warning only shows because of missing type deceleration which you must install separately. Type deceleration are prefixed with #types/.
Some js packages already have type decelerations within installed bundle but some of them doesn't have. For those you must install it separately, if it exists.
Related
I've installed 'react-image-gallery' library using yarn
yarn add react-image-gallery
And it now exists in my node_modules folder, but it says "Could not find a declaration file for module 'react-image-gallery'." when I try to import it.
How can I make it importable ?
When using some third-party packages as dependencies, not all of those packages are written in TypeScript. Therefore the packages developers provide also an installation for the type declarations if other developers want to use those types in their TypeScript projects.
In your case to install the package react-image-gallery :
first yarn add react-image-gallery
then (when usinig TypeScript) yarn add #types/react-image-gallery
If you want to know more about Type Declarations check this official link
I am trying to create a React + TypeScript demo project from scratch. However, I do not fully understand the following installation command. In particular, I do not quite understand what #types is doing here. How can I understand it?
npm install react react-dom typescript #types/react #types/react-dom --save
Also, I think some time ago npm made --save the default option, so it should not be necessary here. Is that correct?
The #types packages contain type definitions for TypeScript. It's an organisation on npm which contains definitions for many libraries. These definitions allow the library to be consumed from within other code bases, as it describes what the API is and what the types used are, thus enabling the use of the TypeScript compiler to check if the correct functions are called with the correct parameters.
These type definitions can also be created for libraries written in plain JavaScript. This again allows them to effectively be used from TypeScript codebases. Many such definitions are produced by the DefinitelyTyped project.
As a newbie I am trying to understand what the logic is under the hoods for react packages in npmjs.com repository.
I find it a little bit strange since some modules that I install works flawlessly with my application (such as react-motion), where some reject to work by giving Uncaught SyntaxError: Unexpected token import error (such as react-sortable-pane).
What I understood up to now is it has something to do with ES5. The modules that are implemented with ES6 or ES7 must be converted to ES5.
My question is, how can I understand if a package is not ES5 compatible and what can I do to convert it to ES5 during or after I used yarn add command to install the package to my node_modulesdirectory?
TL:DR Transpile your code or use:
import { SortablePane, Pane } from 'react-sortable-pane/lib/react-sortable-pane.es5';
First things first.
Two main folders Src and Lib
A common convention for javascript projects is to put all of your development code into a folder called src. This folder may contain code such as ES5 or ES6 depending on what the developer wants to work with.
The other main folder is usually called lib which contains all code from src that is transpiled (with babel for example from ES6 to ES5), converted and usually bundled (webpack minify for example) so that it can work in the browsers that that npm package supports (varies from package to package obviously). This folder only contains code that is relevant to the user using the package, i.e. all tests are not converted and bundled because their is no reason to.
Entry Point
The other important part for npm packages is the entry point for the npm package. By default NodeJS will look for an index.js file in the imported package (I think). This can be overwritten by supplying the main key in package.json.
Example in react-motion's package.json:
"main": "lib/react-motion.js"
We can see that this points to lib. But where is the lib folder on their Github??? It's not their because usually you don't want to check in a lib folder to source control because it's just transpiled for the npm package.
We can confirm this by installing react-motion and looking in node_modules/react-motion. The lib folder here exists with transpiled code that is ready to be used in any browser without babel.
But why don't all npm packages do this for me!?!??!
Most do and they should do really. I do in my packages.
The react-sortable-plane npm package is using this instead "jsnext:main": "./lib/react-sortable-pane.js" which basically means it uses ES5 syntax everywhere but with import/export and I haven't seen before because it isn't widely used.
See https://github.com/rollup/rollup/wiki/pkg.module#wait-it-just-means-import-and-export--not-other-future-javascript-features
As to why they just use import/export with ES5 features I presume it's because import/export has become standard now but I am not sure.
You will still have to transpile this package if you want older browser support or just import the .es5.js file, e.g:
import { SortablePane, Pane } from 'react-sortable-pane/lib/react-sortable-pane.es5';
Hope this helps. I know it's confusing with so many damn environments like UMD, Common, Node etc...
The solution is to account for any version of Javascript and use a transpiler to make sure that various JS versions which might be in your code and imported modules will be covered by your transpiler's configuration. Going through your modules and trying to figure out which version of Javascript they use isn't a practical exercise. Most projects have a bunch of dependencies, and all those packages have their own dependencies. So you'll end up going down a rabbit hole.
Babel is probably the most well known transpiler. With the right configuration you can have ES5, 6 or 7 code and it will transpile it all into the same JS type so it can run in all standard browser versions.
Basically the answer isn't to try and deduce what ES type your modules are, it's to create a build process that can handle the different types.
I have been following many react tutorials(just getting started). In all of them, node modules are locally installed within each project. But I don't want to download node modules all the time for each project. I want to install node modules(only react related packages like babel, webpack, webpack-dev-server, react and react-dom) globally, which resides in following location in windows (C:\Users\username\AppData\Roaming\npm\node_modules) and then refer them for all of my react projects and also bundle them using webpack. How can I do that? I tried searching, but did not get any solution so far. Kindly let me know if there are any options to achieve that.
Thanks.
Using global package is not a good idea. It is only recommended for development
You can use npm link <global-package> to use your global modules like local.
Link to refer https://docs.npmjs.com/cli/link
You can use npm install -g 'package name' to install it globally.
Whenever I've tried to install any React related package type definitions such as react-boostrap, fixed-data-table or react-router I get the following types of errors when trying to build with tsc.
typings/globals/react-bootstrap/index.d.ts(5,20): error TS2304: Cannot
find name '__React'. typings/globals/react-bootstrap/index.d.ts(5,20):
error TS2503: Cannot find namespace '__React'.
This may be related to having to pull these modules in as "global" declarations. Here is an example of the command I'm attempting to use to install react-boostrap.
> typings install dt~react-bootstrap --save --global
SIDE NOTE: I get the indication that the state of type definition tooling is in a big transionary state between DefinitelyTyped, Typings, and what looks like a new Microsoft led initiative coming with TypeScript 2.0. Is there a reasonable way that a consumer of these definitions should be following to get more consistent success with the currently available tooling? Should I revert back to using tsd even though it is supposed to be deprecated by typings until the typings tool/ecosystem is more mature to avoid these issues because as it stands the dt~ and --global parameters do not seem to lead to the same success rate that I was used to with tsd and I had only moved to typings in order to get access to some newer definitions that were not originally available on DefinitelyTyped.
Followup: It appears that the official TypeScript documentation recommends using the typings tool at the current time to load react related definitions from DefinitelyTyped... Maybe that's where I've gone wrong attempting to pull from typings registry if available and resorting to DefinitelyTyped when otherwise unavailable.