I currently have little more than the shell of a Typescript & nodejs project repo in Visual Studio, and I can't figure out an import error. I have a top-level file, application.ts, that is erroring when trying to import a local folder, source, which has an index.ts file. My directory structure looks like this:
package.json
tsconfig.json
application.ts
source
index.ts
And, the error in appliation.js is Cannot find module './source'.
For the record, I also tried import { } from 'source', dropping the ./ but that also did not work. Am I missing something really obvious here?
EDIT: Adding contents of tsconfig.json and package.json for relevancy.
I think if you add "include": ["./**/*"] to your tsconfig.json it will solve the problem
Make it look something like this:
Keep what you have in compilerOptions and exclude but add include in between like this
"compilerOptions":{},
"include":["./**/*"],
"exclude":[]
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
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
I have added a jsconfig.json in the root of my javascript project to try and exclude some build files as well as set some path mappings but nothing seems to happen. Part of the problem is that I'm not sure what the expected outcome is when using a jsconfig.json, I've read the documentation for it but it does not demonstrate any of the results.
Can someone provide me with a small and working jsconfig.json with a description of what it actually does? So that I can use it to verify that it actually works in my project as well.
Or, does someone know of a way to verify that a jsconfig.json is working/picked up by VS Code?
In my project i was using jsconfig.json file for accesss the file imports directly from the ./src directory from wherever i am trying to import.
My jsconfig.json looks like:
{
"compilerOptions": {
"baseUrl": "./src"
},
"include": [
"src"
]
}
include:
If no include attribute is present, then this defaults to including all files in the containing directory and subdirectories. When a include attribute is specified, only those files are included
baseUrl:
This gives the base directory for the file import path
this is my project structure where i have used jsconfig.json
so if i need to import a function from src/util/auth_util.js inside src/component/Login/index.js
inside src/component/Login/index.js
src/component/Login/index.js :
import { userLogin } from 'util/auth_util.js'
import statement if jsconfig.json as mentioned above not used
src/component/Login/index.js :
import { userLogin } from '../../util/auth_util.js'
I didn't find a declaration file for 'google-spreadsheet' so I'm trying to create one by myself:
in typings -> modules, I've added a new folder named "google-spreadsheet", and there I've added a new file named "index.d.ts" which has the following content:
export class GoogleSpreadsheet {
}
In the client file I have this:
import * as GoogleSpreadsheet from 'google-spreadsheet';
But 'google-spreadsheet' is marked with red, saying:
TS2307 Cannot find module 'google-spreadsheet'.
BTW I've NPM-installed 'google-spreadsheet' and it works JavaScriptly. Only the TypeScript bothers me here.
Any ideas how to solve that?
If you dont need to care about the typings inside this module you can only create a *.d.ts file and put the following content (e.g. create a typings.d.ts):
declare module 'google-spreadsheet';
To define the types inside the module you can change the above code to:
declare module 'google-spreadsheet' {
// define the types...
}
From the root of your project:
mkdir -p src/#types/google-spreadsheet - create a folder for your module's type declarations.
echo "declare module 'google-spreadsheet';" > src/#types/google-spreadsheet/index.d.ts
Also, ensure your tsconfig is configured to include the #types folders using the typeRoots option.
{
"compilerOptions": {
"typeRoots": ["src/#types", "node_modules/#types"]
}
}
Also, you might want to take a look at the documentation on declaration files.
I´ve ran into this problem while developing PowerBI custom visuals with echarts.
Just creating the .d.ts file didnt helped. I had to make an include statement inside the tsconfig.json which pointed to the root (where my .d.ts file is located with the declare mdoule statement)
externals.d.ts ->
declare module 'XXX/XXX'
tsconfig.json ->
"include": ["./"]