I'm using create-react-app to test a monorepo that i'm creating. Inside the monorepo I have some index.d.ts files to declare my packages however I do not wish to start using .ts files and would prefer to stick to .js files.
I am using the create-react-app as a means to test my packages before publishing them as well as ensuring that the Typescript declaration files are working correctly.
Within my create-react-app I am forced to use //#ts-check at the top of the App.js file before Typescript starts to check my work.
]2
I would like the ability to enable a //#ts-check globally for my create-react-app's as I plan on using it on all my future and passed projects and adding the //#ts-check at top of every .js file sounds extremely tedious.
I have tried using a tsconfig.json as shown in this answer however it did not work.
This picture below is showing the same App.js file without the //#ts-check and with tsconfig.json and as you can see it is no longer checking my file.
I'm fairly new to Typescript so could somebody please explain to me how I could enable //#ts-check globally on my create-react-app projects.
Thanks in advance!
Add a file at the root of your project with the filename:
jsconfig.json
Add the following to the contents of that file:
{
compilerOptions: {
"checkJs": true,
"jsx: "react"
}
}
Reference
Related
I have recently moved from Bokeh's nice, inline extension framework to their npm based out of line build system, I am trying go get my extension to build, but Bokeh installs all of the TypeScript *.ts.d in a separate tree, for example:
bash$ find node_modules -name 'serialization.*'
node_modules/#bokeh/bokehjs/build/js/types/core/util/serialization.d.ts
node_modules/#bokeh/bokehjs/build/js/lib/core/util/serialization.js
bash$
In the inline build system this file is imported like import { is_NDArray_ref, decode_NDArray } from "core/util/serialization".
Is there a way using tsconfig.json options to allow my extension files to continue to use core/util/serialization for import and find both the JavaScript and the TypeScript description with Bokeh's node installation layout.
The only dependency in my package.json is:
"dependencies": {
"#bokeh/bokehjs": "^2.3.1"
},
Even if I change the import paths to use .../lib/..., TypeScript does not find the *.d.ts files, and if I change the import path to use .../types/... if finds the types and compiles but the linker fails to find the JavaScript. I used Bokeh's bokeh init to create my build sandbox... Thanks for any advice...
I found the answer in a Bokeh ticket. In a nutshell, adding:
"paths": {
"#bokehjs/*": [
"./node_modules/#bokeh/bokehjs/build/js/lib/*",
"./node_modules/#bokeh/bokehjs/build/js/types/*"
]
}
to the tsconfig.json file in the compilerOptions property allows imports like:
import { is_NDArray_ref, decode_NDArray } from "#bokehjs/core/util/serialization"
which seems very reasonable.
I have a JavaScript project opened in VS Code. There is nothing fancy there, all *.jsx? are in src folder, files bundled by webpack are stored in dist, there are couple of dependencies described in package.json and installed in node_modules.
Let's say I have two files somewhere in src folder: A.jsx with React component A and B.jsx with React component B which is using component A. When I open my project in VS Code, go to A.jsx and ask code to Find All References of A it's showing only one reference in file A.jsx (with PropTypes declaration). For VS Code to be able to show reference in B.jsx I need to open B.jsx, then go back to A.jsx and only then both references will be shown...
The same scenario works correctly when files are named A.js and B.js, the problem seems to be with *.jsx extenstion.
What I'd like to have is a way to find all references in whole project without a need to open all files no matter if the file is save as .jsx or .js. Is there a way to achieve this?
I've already tried jsconfig.json with
{
"include": ["src/**/*", "src/**/*.jsx"]
}
and
"files.associations": {
"*.jsx": "javascriptreact"
},
in my settings.json
Ok, I finally googled the solution. In order to load .jsx files into the project, VS Code needs jsconfig.json with such content:
{
"compilerOptions": {
"jsx": "react"
}
}
Here is the answer in their repo: https://github.com/microsoft/vscode/issues/100251#issuecomment-646239840
We're using Tabulator-tables in a large Angular project and I cannot seem to find a usable definition files.
I've tried https://www.npmjs.com/package/#types/tabulator-tables which seems updated etc but it results in lots of errors in my IDE and the project will not compile as a result. There are many errors even though the compilation worked before I added the types package. Its pointless and impractical to add many #ts-ignore comments.
Be advised - I took notice to use the same version of the type definition package as installed in my project (v4.2.2). I assume the problem is with the automatic generation of the above package - the resulting .d.ts file is not usable as a result.
Please correct me if I'm wrong and any help in integrating definition files will be appreciated. TIA!
I had a similar issue with adding TypeScript typings on Angular project and here's what i did:
encapsulated Tabulator inside Angular component (data-grid.component.ts in my case);
npm install #types/tabulator-tables
created file data-grid.component.d.ts with:
declare module 'tabulator-tables' {
export = Tabulator;
}
the key thing: removed import Tabulator from 'tabulator-tables' from file data-grid.component.ts
And it's worked.
A full set of TypeScript Typings can be found in the #types/tabulator-tables npm package
npm install #types/tabulator-tables
An example of how to use the typings in a project can be found here
The Language Documentation includes more information on the available typings
I already wrote an answer for this issue, not good enough in my opinion, but some people upvoted it as right, so I decided to leave it as it is and write a new one.
There is some issues with adding types for tabulator, this is because type annotations not being exported, but there is a way to use them.
After installation of types for tabulator (npm install --save #types/tabulator-tables), you should open (or create it, if it's not exists) file index.d.ts inside directory src, and copy following code into it:
declare module 'tabulator-tables' {
export = Tabulator;
}
You need to ensure that you have "allowSyntheticDefaultImports": true inside compilerOptions of file tsconfig.json or tsconfig.app.json (depends on your project), and tsconfig.spec.ts (it needs for unit testing).
Very important to unload and start over ng serve after editing of tsconfig.
After that all typings should work. Just in case I created simple Angular example, hope this helps.
I'm having trouble integrating this speech-to-text package into my Angular app. I've added the import statement:
import spoken from "../../../node_modules/spoken/build/spoken.js";
My project is able to find the spoken.js module but it tells me that "allows is not set".
If I set that value to true in my tsconfig.json file, I then get multiple .js related errors in other files, and I'm unable to build the project. Has anyone encountered something like
this before?
If you want to import the module at runtime but not check it with TypeScript, try removing the .js extension from the import path.
One way would also be to disable type checks for JS files via "checkJs": false in your tsconfig.json.
Or you could also include the file in scripts array in angular.json file and in your controller, just declare that variable:
declare const spoken: any;
(feel free to use something more specific instead of any :])
I have a javascript project and find that new vs code feature "Update import paths when a file is moved or renamed" does not work for me. I have tried both: import and require statements. And for both options vs code does nothing about changing path after move or rename.
OS: Ubuntu 16.04
Visual Studio Code version 1.25.0
VS Code user settings:
{
"javascript.updateImportsOnFileMove.enabled": "always"
}
Have an empty jsconfig.json file in the project folder.
So, you need to have a jsconfig.json file in the root path, to make sure all paths work.
I tried to recreate your problem with the current version of Visual Studio Code (1.44) but I did not stumble on any problems: In File/Preferences/Settings I set the prompt-option for updating imports see image:
Then I created an "app"-folder with the following files see image:
app/appLogic.js
import GLOBAL_VARS from './GLOBAL_VARS/GLOBAL_VARS.js'
console.debug(GLOBAL_VARS.laugh())
app/package.json
{
"type":"module"
}
app/GLOBAL_VARS/GLOBAL_VARS.js
var LAUGH = "haha"
export default {
laugh(){
return LAUGH
}
}
I then moved the JS file "GLOBAL_VARS.js" to a different folder and VS Code suggested automatic imports update with a prompt, just as set in the preferences before see image:
Make sure you opened the right folder in VScode - eg if your project structure is like below -
project
/node_modules
/src
--A.js
--B.js
/build
/config
package.json
jsconfig.json
You open folder project in VScode and not 'src' folder.For some reasons VSCode is unable to detect import changes if you do not open the complete project folder in explorer.