I have inherited a bit of a legacy project with JSX. I am in the process of converting the JSX into TSX.
Currently while importing JSX and JS files in TSX. I get an error Cannot find module 'config/abc_module' or its corresponding type declarations..
I understand the types are missing as it is a JS file. I have added JSDoc types, but nothing seems to help. What would be the best way to add types in JSX files to use them in TSX.
I have quite a few files in JS, and some I cannot even convert due to specific reasons. I have searched a lot and read quite a few articles, but can't seem to find any specific way forward. Any help would be appreciated. Thanks in advance.
make a global.d.ts file in your root directory where all your code files are
in file write lines:
declare module 'path/to/your/js/or/jsx'
now these js/jsx files will resolve as modules to import in your typescript code! enjoy!
Edit: also make sure your tsconfig.json is configured to let you mix ts/js
You can probably just change the extensions from .js or .jsx -> .tsx. TypeScript is supposed to be a superset of JavaScript.
Also see this previous question
Related
In the case of react native web we have a possibility to use files with .web and .android extensions.
Eg.
myFile.web.js
myFile.android.js
then we can include them via
import myFile from './myFile';
and React native web automatically provides proper file content depends on the platform.
It works so far but after I added Typescript the ts compiler started to complain about the missing module 'myFile' and it's logically okay because we don't have this file and TS compiler doesn't know that the RNWeb will automatically pick a proper file later.
When I disabling Typescript, everything works fine so the system is working.
The question is how to solve it in the case of Typescript?
Thanks for any help.
The only way I found how to avoid this issue is using CommonJS module system - require instead of ES6 - import standard
Example: const MyFile = require('./myFile')
In this case, the TS compiler will ignore it. Unfortunately, it isn't a perfect/right solution as I'd like to see but it works so I just use it as is.
P.S. If someone finds another way, please, provide your solution, I'll be appreciated.
I tried to utilize reactAdmin but i have some questions in file hierarchy why .ts , tsx and .js files are there in one use of single screen , May i know the usage of that and how to handle the API's integration within interlinking the data.
And also is there any solutions of handling .tsx functions or components in .js file as im very much familiar with .js than ts or tsx.
React AdminA Web Framework for B2B applicationsmarmelab.com
They typescript files which gonna be eventually compiled to javascript. So you can just use javascript code as reference, there is no need to look at those .ts or/and .tsx file, you should look at them when you want to learn typescript.
It checks variable types at compile time in 'your code'.
If you are new to javascript, first learn it, and not necessary to learn typescript, but you "may may" need it in future.
I've this code, it's a react typescript project:
import { Trans, translate, InjectedTranslateProps } from 'react-i18next';
and then:
export const Home: React.SFC<InjectedTranslateProps> = props => (
When i click on webstorm on InjectedTranslateProps, it's take me to /node_modules/#types/react-i18next/src/props.d.ts
why is taking me to #types and not to 'react-i18next' package ?
i mean all the links take me to #types and not the right folder for react-i18next in node_modules
so, everything pass by #types, and i's that library to connect it with the real package?
i don't need to see javascript code, just need to see if imports go first to the typescript file, and it's that file that do the work to import.
At runtime, your module loader will resolve the import directly to the real implementation. When the TypeScript language service sees an import, it only cares about the type information and not the implementation, so if the implementation file is a .js file and doesn't have a .ts or .d.ts alongside it, the language service will look for a .d.ts in a #types package. When you click on the import, the language service takes you to the .d.ts. As I understand it, the reasons for this behavior are:
It was easier to implement since the language service is already finding the .d.ts and not the .js.
Assuming you are writing code based on an API (which is more orthodox from a software engineering point of view than looking at the implementation, although I know that in the real world, developers often have questions that won't be answered by the API documentation), then the .d.ts is more likely to describe the API in human-readable format than the .js, which for real-world modules (especially those that have gone through some transpilation process) may be organized using any number of tricky code patterns as long as all the right elements end up defined when it is done loading.
I've noticed that VS-2017 has ESLint built in. It works great for my javascript files. Is there a way to get it to work for jsx files? Specifically react-jsx if possible.
After a good bit of searching I found that jsx support works best when the file is a .js instead of .jsx. Changed the extension and ESLint immediately began complaining :)
is it possible to include ngStorage within typeScript? I get TS2304 error but I can't find .d.ts file at definitelyTyped I could include.
I wanna store tokens which I use in REST requests. Any other suggestions on this? I couldn't make it working with $sessionStorage either. Apparently I don't have enough knowledge about typeScript, I might not include something I should have.
Thanks in advance.
Short Answer
Yes!
Longer answer
Yes you can use ngStorage with TypeScript.
Being that TypeScript is a superset of JavaScript, so anything you can do in JavaScript you can do in TypeScript (Note there are some differences, but not in regards to using other libraries). If you are unable to find a .d.ts file for this module then you have two choices to use it.
Specify the type of any of the services/factories to have a type of any
Create your own .d.ts to represent this module, or at least the pieces of it that you are using
If you decide to head down the route of #2, it would be nice for the community to submit a pull request to the definitely typed repo to include the definition you created.
A one year old question. But just to update, there is a .d.ts file available for ngStorage.
Run the below command and off you go.
tsd install ngStorage --save --resolve