I am trying to migrate my code from java script to type script and using Visual Studio Code as editor.
When I rename the files from js to ts in my project, I do not see any suggestions / warnings (usually underlined red color - say for example variable type not declared in origianl JS file).
Currently I am compiling the ts code manually and fixing the errors but is there any preference setting in VS code to detect the errors directly instead of compiling and checking ?
The tsconfig.json is:
{
"compilerOptions": {
"module": "commonjs",
"allowJs": true,
"target": "es6"
},
"exclude": ["node_modules"]
}
Thank you.
Added the below type definition rule to tslint.json file to get this reflected in VS code editor: "typedef": [true, "call-signature", "parameter", "member-variable-declaration"] - That solved the issue.
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 an Angular 6 app that I need to include a JS library. The library is proprietary so I cannot get into the specifics of what it is, but the issue I'm having is the TypeScript compiler seems to get confused with characters such as this <<24>> thinking it is a type casting when it's really not. Because of this issue I get the following error when I compile.
error TS8011: 'type arguments' can only be used in a .ts file
The file I'm including, that it's baking at, is a traditional JS file. I cannot modify this file as it's a minified library, and it's not available via NPM.
My initial thought was to just have the TS compiler to ignore/exclude the file, but that doesn't work for some reason. Here is a tsconfig.json config I've tried that didn't work.
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "es2015",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"allowJs": true,
"typeRoots": [
"node_modules/#types"
],
"lib": [
"es2017",
"dom"
]
},
"exclude": [
"./src/js/MyLib.js"
]
}
I have tried with "allowJs" enabled and disabled, but I get the same error.
Do you all have any idea how I can get the TS compiler to effectively ignore this file so I can just import it with a script tag?
Thanks!
The way you need to reference those types of files (standard .js files) is one of two ways:
Add the script reference in the script array in the angular.json file
Add the script reference directly in the index.html file
I would go with the first option as the documentation specifically states this:
https://angular.io/guide/workspace-config#additional-build-and-test-options
An object containing JavaScript script files to add to the global
context of the project. The scripts are loaded exactly as if you had
added them in a tag inside index.html. See more in Styles and
scripts configuration below.
I think the issue you're having is that you're trying to use import statements or reference the script file in a way that the tsc (TypeScript Compiler) is trying to transpile it.
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",
...
]
I have the latest version of VsCode, and I am following a tutorial to create a basic next.js app
I noticed that the tutorial uses JSX in .JS files, and my editor does not complain about the JSX.
How is this possible? Does VsCode by default recognize JSX in .JS files? And does next.js automatically compile JSX?
Yes VS Code support JSX in both *.js and *.jsx files out of the box. This only impacts intellisense and other editor features. We do not provide any built-in compiler integration but you can easily set up your own with tasks or using the command line
Behind the scenes, the reason jsx is enabled in *.js files that we create an implicit jsconfig.json that looks like:
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"jsx": "preserve"
},
"exclude": [
"node_modules",
"**/node_modules/*"
]
}
Context :
Typescript 1.5 beta
Webstorm 10
I'm currently developping two separated projects in TS, one library and one project that will use that library.
When I am coding inside the library project, the written jsdoc is perfectly understood by Webstorm and CTRL+Q displays it correctly.
Then I compile the library (one single big output file), generate the .d.ts file along the way, and try to use it in the other project : no more documentation available when I'm invoking CTRL+Q.
After investigation, I see that the JSDOC is still present in the generated javascript, but it is not in the .d.ts file - so Webstorm consider there is none.
So my question is : how can I specify at .d.ts generation time that I want my jsdoc to be included in it ? Just spent several hours on the net running in circles...
--edit : my tsconfig file --
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"noImplicitAny": false,
"removeComments": false,
"declaration":true,
"noLib": false,
"out": "./dist/myLib.es5.js",
"sourceMap": true
}
}
== EDIT FINAL ==
Ok, the documentation finally appeared in the .d.ts ...
A compiler bug, or maybe a chair-keyboard one ...
So it obviously should works when "removeComments" is set to false !
compile with comments i.e. set removeComments compiler flag to false