I am using typescript in an angular project with ui-grid. I have installed the DefinitelyTyped file for ui-grid: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/ui-grid/ui-grid.d.ts
In visual studio, my intellisense works for my other d.ts files. I can see the angular object and all the members.
For this typed file I can only see the namespace: {} uiGrid
Typing uiGrid. shows no members. Typing a member that I see from the d.ts file manually and the typescript compiler rejects it.
Since all my other typed files are working, is there anything anyone recommends here?
The main difference I can see between uigrid and d.ts like angular is that angular has an exported variable named angular of type IAngularStatic meaning the angular object has static methods where the uiGrid has no such variable. So when you write angular. you are actually seeing all the methods of the interface IAngularStatic.
Related
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 have a large AngularJS app which I am in the process of upgrading (with NgUpgrade, webpack etc.) To start with, my new Angular (4) components are .ts files but my old AngularJS parts are .js files, transpiled using the Babel loader for webpack.
I would like to migrate all .js files to .ts files so that I can have everything go through the TypeScript compiler and no longer require Babel etc.
For the most part, the app runs fine (with a few small tweaks) by just renaming the files from .js to .ts and adding an import for angular at the top:
import * as angular from 'angular';
However, when I run my app, I now see a warning:
WARNING: Tried to load angular more than once.
This makes sense because Angular would be loaded once by the global script include, and once by the module import.
I can't avoid having the global script include, because I am using other scripts that require the angular global variable to be present.
As such, I think I should be using the global variable, but need to declare it to keep the TypeScript compiler happy (as per NgUpgrade documentation). I have tried changing the top of each file to:
declare var angular: angular.IAngularStatic;
This doesn't work and I get an error like the following:
TS2503: Cannot find namespace 'angular'.
Can anyone please tell me what is going wrong? I have installed #types/angular with npm/yarn and do not have typeRoots or types in my tsconfig.json file. My understanding is that this should automatically find the declarations in node_modules/#types but this doesn't seem to be the case?
I've found a solution which is working nicely (thanks to https://stackoverflow.com/a/42035067/1145963).
Added a .d.ts file at the root of my project:
declare global {
const angular: ng.IAngularStatic;
}
export {};
This allows me to use the angular global from anywhere, without needing any import or declare statements at the top of the files and without needing to do any special Webpack configuration.
I have done the following:
Installed both the AngularJS and NodeJS Plugins in Phpstorm
Downloaded the latest stable release of Angular (1.4.8)
Added angular.js to the project
Added angular.js to the list of libraries in Phpstorm
Directives in my HTML will autocomplete fine (e.g. ng-modal), but trying to do something like Module.fact does not autocomplete to factory. Here is my code:
var appModule = angular.module("appModule", ['ngRoute']);
appModule.fac //This is me typing factory, but auto complete doesn't help
I am running PhpStorm 10.0.2. I have tried using different versions of PhpStorm and I have also tried using Angular 1.5 (the beta version) with the same result. Also, I am new to angular, but my code is working. Thank you!
*I have already reviewed these links and SO posts:
https://www.jetbrains.com/webstorm/help/using-angularjs.html
https://www.jetbrains.com/webstorm/help/configuring-javascript-libraries.html
Why do AngularJS directives (attributes, etc.) show up as "invalid" in WebStorm 8?
Getting angularJS autcomplete in Webstorm/PHPStorm
The angular variable is a global one and when you have to many declarations of the same global variable PhpStorm/WebStorm can not handle auto-completion.
It's important to verify that only 1 declaration for angular is being discovered by PhpStorm. This doesn't have anything to do with your actually JavaScript project, but where PhpStorm looks for declarations.
If you hold down ctrl and mouse over the world angular. It should show it highlighted to be clickable, and a tooltip showing where it is declared.
If the tooltip says there are multiple definitions of the identifier, then it can not do autocomplete correctly. This is true for most JS variables in Php/WebStorm not just this angular variable.
You have a couple of ways to fix this:
1) Force type declaration with JsDoc to TypeScript
/**
* #var {angular.IAngularStatic} myAngular
*/
var myAngular = angular;
This will declare the variable myAngular using the TypeScript definition. There is less likely to be conflict with any already scanned JS source files that also declare angular. It's an easy fix, but adds unnecessary source code to your project.
2) Disable JavaScript source files by excluding them
If you are using node_modules or bower_components then you need to include some of the JS files from those folders, but not unnecessary duplicates. You won't need any Angular JS files since you've already installed the TypeScript definitions (which work better for auto-completion). In the Project Files panel in PhpStorm find the Angular packages, right click on those folders and "Exclude" those folders. You can also do this via project settings in "Files / Settings / Directories"
3) Ignore bundled output files for JavaScript
This is the most common issue I find with PhpStorm/WebStorm. PhpStorm will also scan minified JavaScript files you've packaged into your webroot/js folder. For example; If you use grunt to uglify your JavaScript code into app.min.js and inside that file is Angular and your project code. PhpStorm will scan this and create duplicate declarations of everything it finds.
Find all those duplicate *.js files in your project, right mouse click on the files and select "Mark as Plain Text" from the menu. This will tell the editor to completely ignore the file from all intellisense scanning.
So to summarize. If you control click on a declaration to go to source, and PhpStorm does not go immediately, but instead prompts you select from multiple declarations, then you have duplicates in your project and you need to narrow the scope. Once that is done everything else should work as expected.
f you prefer to use a CDN, place the cursor over the highlight library name, hit Alt+Enter, and Download Library. This will set up a local library in WebStorm’s cache (not in your project) so WebStorm can access AngularJS methods, directives, etc for autocompletion and documentation lookup.
This question already has answers here:
intellisense and code complete for DefinitelyTyped (TypeScript type definitions) on WebStorm IDE
(3 answers)
Closed 7 years ago.
I am just starting out with TypeScript and trying to add it to an existing AngularJS project.
I have 'excluded' the bower directory where angular is installed and downloaded the definitelyTyped definitions for angular in the preferences window.
Angular code completion is working, but typescript is giving me an error TS2304 wherever I code 'angular.'.
What have I missed?
To fix the error, you need to copy the downloaded definitelyTyped TypeScript stubs from ~/Library/Caches/WebStorm9/extLibs folder to your project directory and reference them in your .ts file using /// <reference path> comments, like
/// <reference path="path/to/angular.d.ts" />
Just to make things clear:
When you download Typescript stubs via Preferences/Languages & Frameworks/Javascript/libraries, they are placed into ~/Library/Caches/WebStorm9/extLibs.
It's perfectly fine for Webstorm - it doesn't require placing library files directly in the project folder. Also, Webstorm itself doesn't need ///reference comments to be able to resolve types - type hinting/navigation/completion works even if the types are not explicitly referenced. But the tsc compiler does need the d.ts files being placed somewhere in the project directory and referenced via ///reference comment.
So, to get downloaded stubs available to typescript compiler, you need to copy/move them to you project directory (and probably rename to more human readable names :)) and add comments (can be done using 'Generate reference path comment' intention (hit Alt+Enter on a reference to generate a comment)).
We plan to provide an option to download files directly to the project folder (instead of system/extLibs/ ) in the future versions
probably need to add a reference to the .d.ts in the particular .ts file having the problem, something like:
/// <reference path="../typings/angular.d.ts"/>
downloaded the definitelyTyped definitions for angular in the preferences window.
The intent of downloading the stubs like that is to provide intellisense for JavaScript code not TypeScript code. For TypeScript code you should download and reference the .d.ts directly in your TypeScript code.
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.