I started using Typescript with Webstorm today and I am getting real crazy understanding what's going on. Imagine a project using tsd loading definition types on typings/. For background, angular defines an angular module aliased to ng and then there is other d.ts files appending more modules into angular (and technically ng).
When I require for example the router I get:
In fact, if you go to angular-route.d.ts (from DefinitelyTyped) you can see the same:
The d.ts files are technically correct because tsc compiles them giving it those definition files.
On the other hand, Webstorm allows you to load libraries (typescript stubs from DefinitelyTyped). If I go there and I download the angular ones (which are 100% the same as the one I have on typings/) I get:
Same error but at least I don't get the red wiggle in the solution explorer. Still, it doesn't give me any intellisense when writing ng.route.<ctrl+space>, it just turn blue when I finish writing it (in fact, I can cmd+click and go to the definition).
Who's failing here? The typescript plugin? It is weird that it fails using typings/ and somehow work with Webstorm's libraries menu (using the same file).
Who's failing here? The typescript plugin?
Yes. You need to use the Webstorm beta channel to get support for TypeScript 1.4 union Types at the moment.
Related
I've recently started using TypeScript with Expo. I've done all the linter/formatter integrations like typescript-eslint so I can catch most of the errors during coding. To check if the code compiles, I run npx tsc every once in a while and fix accordingly.
One thing that I haven't fully grasped yet is why my app builds successfully even when there are numerous compile errors. I expect (and prefer) to see a red screen error for every compile error rather than the app build successfully and me find it out later. For example,
function square<T>(x: T): T {
console.log(x.length); // error TS2339: Property 'length' does not exist on type 'T'.
return x * x;
}
is a typical TypeScript error that (I believe?) can be easily checked at compile time. I want it to result in a big red screen error and the build to fail.
I'm quite new to TypeScript so it's possible that I'm missing something very important. What exactly is causing this leniency and is there a way to enforce stricter checks?
The first thing to understand is that Typescript is a superset of Javascript, and in this case it doesn't actually get type checked during compilation.
Essentially what happens is Babel just strips out the Typescript and converts it to Javascript, which then gets compiled into the js bundles.
You can take a look at the first line of the following Babel docs as well as the caveats:
https://babeljs.io/docs/en/next/babel-plugin-transform-typescript
Since Babel does not type-check, code which is syntactically correct, but would fail the TypeScript type-checking may successfully get transformed, and often in unexpected or invalid ways.
What I would suggest is extending your build command to first include tsc or rather Typescript compilation, with noEmit set to true in your tsconfig.
Update: I found another instance where this applies recently when adding jest and typescript to a project. At the bottom of the Jest docs they actually state the same thing:
https://jestjs.io/docs/en/getting-started#using-typescript
However, there are some caveats to using TypeScript with Babel. Because TypeScript support in Babel is transpilation, Jest will not type-check your tests as they are run. If you want that, you can use ts-jest.
The straight answer to this question is: Babel, strips out all typescript marks before compiling. Therefore you won't see it erroring out in the cli.
Is there a way for WebStorm to "see" the methods in my HTML and link them with their respective component class?
Details
I usually write my component controller in one file and the component template (html) in another file.
When I do this, methods that are only used in the template are marked as "unused" by WebStorm, and they throw a warning.
For example, in the component ctrl I have a handleViewChange() method.
In the template file I have vm.handleViewChange();
WebStorm warns me that handleViewChange is an unused method even though I have used it in the template.
Please note: I am aware that I can suppress the warn for this particular statement. I would rather WebStorm recognized the method is actually used.
Particularly relevant with refactor-happy colleagues (or refactor-happy future me).
Edit #1
I have already enabled the AngularJS library in Webstorm settings, but it does not fix this particular issues.
Downloading angular TypeScript community stubs per suggestion at this post doesn't enable AngularJS support for your project.
You need to have angular.js file (debug version, uncompressed!) in your project (either in your project directory or configured as JavaScript library) - normally it's enough to get Angular directives/methods recognized. See http://blog.jetbrains.com/webstorm/2014/03/angularjs-workflow-in-webstorm/, 'Include angular.js in Your Project' section.
I am working on a little project with AngularJS (1.6.5) in WebStorm. The problem here is that WebStorm is not recognizing any globals AngularJS defines. I have AngularJS installed and the right #types. I also defined AngularJS as an External library and I also made sure that AngularJS is not excluded by WebStorm. Yet WebStorm is still giving me errors.
Example:
logConfig.$inject = ["$logProvider", "$compileProvider"];
function logConfig($logProvider: ng.ILogProvider, $compileProvider: ng.ICompileProvider) {
// $logProvider.debugEnabled(false); //TODO add this in production
// $compileProvider.debugInfoEnabled(false); //TODO add this in production
// Disable comment and class directives. Boosts the performance
$compileProvider.commentDirectivesEnabled(false);
$compileProvider.cssClassDirectivesEnabled(false);
}
The code above gets the following error in WebStorm: Unresolved variable $inject. (the $inject has a red color and the message is given when I hover over it)
Am I missing something?
Update
I may have found the problem. WebStorm doesn't reconsize AngularJS even though it is in my Node_modules, I have the correct typings (#types/angular) and I have registered as an exteral library (file-->settings-->languages & frameworks-->JavaScript-->Libraries).
When I type import * as ng from "an|", and hit "ctrl + space" WebStorm doesn't give me any hints about the angular library. I am guessing these issues are connected.
Anyone knows if there is an other option to make WebStorm reconsize AngularJS?
I found a solution for the problem:
Like Ekaterina Prigara said, somehow my TSLint was disabled. I needed to re-enable it via Settings | Languages & Frameworks | TypeScript | TSLint. After I re-enabled it I restarted my WebStorm and got the error: Error: Initialization error (typescript). Cannot read property 'createHash' of undefined. I then removed my node_modules folder and reinstalled it via npm install. After that everything was working again.
I have been using VSCode for quite a long time and while it's very good, I'm missing intellisense and features that seem to be ES6-only:
I cannot ctrl+click to go to definition
I cannot have a preview of the definition
Here is what I am using:
ES5
Angular JS
All my files are wrapped into a closure, like:
(function() {
angular.module('foo').factory('bar', ['dep1', function(dep1) {
dep1.stuff();
}]);
})();
With that in mind, is it possible to have "goto definition" and other nice VSCode stuff working ? If so, how ?
What can I do to be able to simply click ctrl+click on dep1 and have VSCode open the file where dep1 is defined ?
What I can recommend is that you try to install John Papa's extension for Visual Studio Code for Angular 1.x. It is installed directly through VSCode. You can check some examples of how it works here. It will offer you code completion and it will automate a lot of tasks you frequently do in Angular, such as creating services, controllers, directives...
Btw John Papa is the author of the Angular Style guide and his way of coding could be called "best-practice" in the world of Angular development.
The best way to get intellisense for javascript/typescript is to install typings.
I find that this extension is good with installing typings: https://marketplace.visualstudio.com/items?itemName=benjaminromano.typings-installer
Once you have that installed, you can then launch it (F1 > Typings Installer: Typings > angular) and install the dt~angular typings. from there you should start getting intellisense, go to definition and possibly error checking.
Code should then pick this up (if not just reload the editor). You should then start getting intellisense. If you want to tweak it more, I would suggest looking into jsconfig.json files: https://code.visualstudio.com/docs/languages/jsconfig
You can get general purpose typing information pulled by enabling Synthetic Default Imports in Visual Studio Code.
It lets you get Intellisense either from TypeScript type definitions or by inferenced type information from the JSDoc of many popular repositories.
Here is a tutorial for how to get things set up.
I would like to get a more helpful exception that this one:
Uncaught Error: Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.
I am trying to build a Reagent app without the usual minified React JavaScript library. This is where I have got so far with the project.clj file:
(defproject cljsbin "0.1.0-SNAPSHOT"
:dependencies [
[org.clojure/clojure "1.7.0"]
[compojure "1.1.8"]
[hiccup "1.0.5"]
[ring "1.3.0"]
[ring/ring-json "0.3.1"]
[org.clojure/clojurescript "1.7.48"]
[me.raynes/fs "1.4.6"]
[reagent "0.5.1-rc3"]
;[re-com "0.6.1"]
]
:cljsbuild { :builds [ :optimizations :none]}
:main ^:skip-aot core)
So far I have put the important (is it?) :optimizations :none in a few places in the lein project file, but always the minified React library is included.
Later...
Well I'm now quite sure I should be looking at the artifacts. What :optimizations means is covered here: https://github.com/clojure/clojurescript/wiki/Quick-Start: having optmizations gets rid of the 'goog' is undefined error messages.
So I am now using this:
;[reagent "0.5.1-rc3"]
[reagent "0.5.1-rc3" :exclusions [cljsjs/react]]
[cljsjs/react-with-addons "0.13.3-0"]
, which is important because it shows (definitively) that the reagent library includes the react library, and that this react library can be modified. Now just to find out how to get the non-minified version and I'll be able to answer my own question...
Are you sure that once you use the add-ons version, your not already getting the mimified version? I ask as the docs on the cljs/package site say
The externs file includes definitions for TestUtils but to use those with :advanced optimizations you'll need to override :file-min to use non-minified version:
which would indicate that perhaps this uses the non-mimified version unless you use :advanced compilation flag? Perhaps check the externs file and see what it has?
The other solution might be to adopt the approach on the reagent page for using your own build of reagent. To do this, I'm assuming you have to provide a bare bones cljs/react file and add the react js directly into your page?