Earlier, I have two JS files:
old-file.js
new-file.js
I later noticed that my app.js' intellisense was always referring to the old-file.js but not the new-file.js, so I deleted the old-file.js (as though I've renamed the old file). But now, when working on my app.js, the intellisense has gone missing, which means VSCode does not automatically make use of the definitions in the new-file.js, which has the same and also additional object declarations.
I tried looking for my Typescript and JavaScript Language Features built-in extension but can't find it in my VSCode. I also restarted my VSCode many times but still not working. My jsconfig.json looks fine in the project root folder as shown below:
{
"compilerOptions": {
"module": "commonjs",
"target": "es2016",
"jsx": "preserve"
},
"exclude": [
"node_modules",
"**/node_modules/*"
],
"typeAcquisition": {
"include": [
"jquery",
"angular"
]
}
}
Note that I was talking about the "implicit intellisense" of VSCode across external files, no import statements, nothing. Also note that my app.js and new-file.js will always be merged as app.min.js by terser at the later stage. Does anyone know what happen to my situation and how can I restore the intellisense of my new-file.js and put it back to work like the old one? Many thanks!
Related
My structure is:
/Home
/home.js
/Home.jsx
In .jsx I'm trying to use go to defenition feature on path with webpack alias. To resolve webpack aliases I have jsconfig.json with this params:
{
"compilerOptions": {
"target": "es6",
"module": "es6",
"moduleResolution": "node",
"jsx": "react-jsx",
"baseUrl": "./",
"paths": {
"#/*": ["src/*"]
}
},
"exclude": ["node_modules", "dist"]
}
And only in this type of situation
when .jsx and .js files of same name in same folder
I can't use the feature.
If I rename file it starting to work. Also it works in WebStorm without any changes.
Please, tell me what's wrong...
I fixed it!
The problem has disappeared when I deactivated this extenssion: JavaScript and TypeScript Nightly
VSCode uses TS engine under the hood to analyze JS. And the convention in TS is to omit file extension. So from TS engine’s POV, these two files of same name but diff extension are confusing.
I guess it’s just a limitation (or a bug? I’m not sure) of the TS language engine, not necessary anything you did wrong. WebStorm obviously uses other implementation to analyze/resolve package reference. Thus you don’t encounter problem there.
I don’t really know solution to your problem, can only provide above explanation. If I were you I’d just rename my file, not gonna spend time fighting tools.
I have a TypeScript project with a few real TypeScript classes, not just functions. I have 1 file per class. There are classes that depend on other classes. I can compile these whole TypeScript to JavaScript with tsc. I can also run locally the JavaScript output with Node. It runs fine. Actually I run a small test class. I don't use any third party library.
I want that a browser can run the generated JavaScript. So I tried to include the whole JavaScript output in my HTML website.
But the JavaScript does not run in a browser. I just tried to create an instance from one of the generated JavaScript class. I also copied the needed require.js file to my HTML project.
My question is: How can I configure tsc and requirejs that a browser can run my generated JavaScript?
My tsc generated require calls with relative paths. It is not a mystery that this does not work in a browser, but I don't know which variant would work. I am a bit upset, because I read so many tutorials and tried so many combinations and I am still not wiser. Many tutorials mention webpack, gulp, baseUrl and such things without showing an example that would run in a browser.
My tsc config is:
{
"compilerOptions":
{
"module": "none",
"target": "ES2018",
"removeComments": true,
"rootDir": "Source",
"outDir": "Build"
},
"exclude": [
"node_modules"
]
}
I'm trying out TypeScript for the first time and am migrating an existing JavaScript codebase.
I've followed the directions on the TS migration guide but ran into build problems right away.
The main blocker I'm hitting is that tsc is complaining about trying to compile a .ts file that lives in my node_modules directory.
My tsconfig.json is:
{
"compilerOptions": {
"outDir": "./dist",
"allowJs": true,
"lib": ["esnext"],
"target": "es5"
},
"include": ["./src/**/*"],
"exclude": ["node_modules", "__tests__"]
}
As you can see, I've tried to tell tsc to ignore the node_modules directory, but it looks like it's still going in there.
This is the error - though I'm not sure how helpful it is:
node_modules/http-link-dataloader/dist/src/types.d.ts:14:22 - error TS2304: Cannot find name 'RequestInit'.
14 referrerPolicy?: RequestInit['referrerPolicy'];
~~~~~~~~~~~
Any advice?
You might need a "skipLibCheck": true in compiler options.
Via: https://github.com/Microsoft/TypeScript/issues/14293
Edit: Digging into this further you shouldn't really need to skipLibCheck. The issue is that TS is looking into the definitions for http-link-dataloader and it cannot find RequestInit.
Looking into the definition file for http-link-dataloader it does not actually define the type for RequestInit:
https://github.com/prisma/http-link-dataloader/blob/master/src/types.ts
Further digging has lead me to find that RequestInit is actually part of fetch. Relevant GitHub Issue
In order to use typings for client side js like fetch you'll want to use the dom library in typescript.
"lib": [
"dom",
...
]
In VS Code, how do I include js files for Intellisense/autocomplete, without compiling them in Angular, and without creating definition *.d.ts files for each of them?
I have an Angular 4 (actually Ionic 3 which uses Angular 4) project where I'm trying to use VS Code as an editor, but Intellisense for JavaScript files only seems to work for the current file in focus and not for other JS files in the same project, unless I include the files (which are in the path "www/js/*.js" ) in the compiler options in the tsconfig.json file:
"include": [
"src/**/*.ts",
"src/**/*.d.ts",
"www/js/*.js"
],
The problem is, I don't want to include those files in the compile, since they're already referenced in the index.html template. When I compile with them, I get errors. I only want to include them in Intellesense, not compile them. Any way to achieve this, WITHOUT creating *.d.ts files for each of them?
Currently my workaround is to just use a different editor (Adobe Brackets) when editing my js that I don't want compiled, so that I can use the Intellisense of Brackets (which works very well), but I'd prefer to just use VS Code editor for everything if possible.
Thanks in advance!
After more research combined with lots of trial and error, I was able to find that adding a jsconfig.json file to my www folder (it didn't work correctly when I put it in my root folder alongside the tsconfig.json file), with the following contents, then it seemed to at least make Intellisense work between the js files, though I still haven't been able to work from the ts files to the js files. Here is the contents of my jsconfig.json file:
{
"compilerOptions": {
"target": "ES5",
"module": "commonjs",
"allowSyntheticDefaultImports": true
},
"include": [
"js/*.js"
],
"exclude": [
"node_modules"
]
}
I hope this helps someone else who comes across the same problem.
If anyone finds a way to get the Intellisense to work for the js files, while working in the ts files, please post an answer here. Thanks!
I have installed 'interact.js' with jspm (and npm for typescript to be happy). The app runs fine but my code shows errors:
import { interact } from 'interact.js/interact'
// ==> typescript error: TS2307: Cannot find module 'interact.js/interact'
I suppose the problem has something to do with the npm module containing '.js' but I am not sure. Anyway, is there a way to fix this either by
A. Help Typescript find the module
B. Disable this specific error (since it works fine)
PS: here is my tsconfig.json file:
{ "exclude":
[ "node_modules"
, "jspm_packages"
, ".git"
, "typings/browser"
, "typings/browser.d.ts"
]
, "compilerOptions":
{ "outDir": "dist"
, "target": "es5"
, "sourceMap": true
, "experimentalDecorators": true
}
, "compileOnSave": false
}
The TypeScript compiler/language service doesn't actually resolve module names through the filesystem or your package.json like you might expect - it instead uses the definition (.d.ts) files that define the type information.
While it's not the most intuitive thing in the world, their reasoning for it wasn't entirely unreasonable - without a definition file, it's impossible to know what type the thing being imported is, and they were somewhat cagey about making the compiler default to just setting imports to the any type.
So in short, the solution to this problem is simply to install the definition files if available, or write/stub out your own if not. They'll be making this easier in TypeScript 2.0 by the sounds of it, but even as it stands, it takes very code to create a dummy definition:
declare module "interact.js/interact" {
export var interact: any;
}