Write Object-Oriented TypeScript: Inheritance

This is part 1 of a 4 part article on how to program in TypeScript using object-oriented techniques. If you’re new to TypeScript, see Get Started Developing TypeScript Apps with WebStorm and the TypeScript docs.

While types are often hailed as the premiere feature of TypeScript, being able to write object-oriented code in ways that are similar to other mainstream languages such as C# or Java is a very important facet of the language.

Continue reading

Posted in Tutorials | Tagged , , , | 1 Comment

WebStorm 2019.1 EAP #2: intentions for JavaScript destructuring

WebStorm 2019.1 Early Preview build #2 is now available!

If you’re unfamiliar with our Early Access Program or if you want to catch up on all the new features, check out the previous EAP blog post.

Toolbox App is the easiest way to get EAP builds. You can also get notified right from the IDE when a new EAP build is available: go to Preferences | Appearance & Behavior | System Settings | Updates and select “Automatically check updates for Early Access Program”.

Download WebStorm 2019.1 EAP

Important! WebStorm EAP builds are not fully tested and might be unstable.

Here are some of the highlights of WebStorm 2019.1 EAP #2 (build 191.4738.20). For the full list of issues fixed in this update, see the Release Notes.

Destructuring in JavaScript and TypeScript

With destructuring, you can unpack values from arrays and objects into variables. This feature has a very concise syntax that is often used when you need to pass data in your app.

If you’re not yet familiar with destructuring, we recommend reading the great overview in the book Exploring ES6.

To help you start using destructuring in your code, WebStorm 2019.1 adds a set of new refactorings and intentions that can introduce destructuring to your code. Let’s see how they can be used when working with objects and arrays.

If you have a piece of code in which you are getting multiple values out of an array or an object, you can now simplify it by using the new Replace with object or array destructuring intention (Alt-Enter):

Replace with destructuring

Continue reading

Posted in Early Access Preview | Tagged | 7 Comments

WebStorm 2018.3.4 is available

WebStorm 2018.3.4 is now available!

Update to it using Toolbox App, or from the IDE. You can also download WebStorm 2018.3.4 directly from our website.

What’s fixed in WebStorm 2018.3.4:

  • Performance issue when using some complex mapped types in TypeScript and the TypeORM package was solved (WEB-35651)
  • The problem with the IDE running out of memory when debugging Angular apps was fixed (WEB-35886)
  • Web browsers panel is now shown in the Angular template files (WEB-35128)
  • The Angular Schematics popup now lists available schematics faster (WEB-36303)
  • Accessibility of the code completion popup (IDEA-203712) and the rename popup (IDEA-204449) was improved

You can find the full list of addressed issues in the Release Notes.

The WebStorm Team

Posted in Release Announcements | Tagged , | 3 Comments

WebStorm 2019.1 Early Access Preview: improved support for Vue and TypeScript, updated HTML docs, save project as template

We are again opening our Early Access Program – this time for WebStorm 2019.1! This means that every week, all the way through to the end of March (that’s when a stable release of v2019.1 is coming), there’s going to be a new EAP build that you can use to try out the latest features and improvements.

Toolbox App is the easiest way to get the EAP builds and keep both the stable and EAP versions up to date. Of course, you can also download the EAP builds from our website.

Download WebStorm 2019.1 EAP

If you’re not yet familiar with our Early Access Programs, here are the basics you should know:

  • Every week we publish a fresh build for the upcoming version of WebStorm.
  • EAP builds provide access to the newest features we’re currently developing.
  • EAP builds are free to use but expire within 30 days of the build date.
  • You can install an EAP build side by side with a stable WebStorm version.
  • Your feedback is very welcome in our issue tracker: youtrack.jetbrains.com/issues/WEB. Please don’t forget to mention the build number you’re using.

Important! WebStorm EAP builds are not fully tested and might be unstable.

Here are some of the highlights from WebStorm 2019.1 EAP #1 (build 191.4212.27):

To learn about the new features added in the next WebStorm 2019.1 EAP builds, please see these blog posts.

Easier navigation in Angular projects

We know that when working on Angular projects you always have to jump between the different component files such as TypeScript, template, and style files. There are many ways to do this: you can use the Navigation bar, or the Project view, or Go to File, or the Angular CLI QuickSwitch plugin…

We’ve decided to add one more – using the Related Symbol… popup. When you’re in one of the Angular component files, press Ctrl-Cmd-Up on macOS or Ctrl+Alt+Home on Windows and Linux to see the list of other related files. Then you can use the arrow keys to select the file you need and then press Enter to open it.

Angular related symbol popup

In the popup, you can also use the numbers associated with each file type: 1. The TypeScript file with the component class; 2. Template; 3. Tests; and 4. Styles. So Ctrl-Cmd-Up / Ctrl+Alt+Home and then 1 will take you to the TypeScript component file.

In the TypeScript file, the Related Symbol popup will also list all the symbols that were imported into this file (hence, the name).

Better support for Vue projects with TypeScript

We have good news for all our Vue and TypeScript fans! WebStorm now uses the TypeScript language service together with its own TypeScript support, for any TypeScript code in .vue files. This means that you’ll now get more accurate type checking and type info, and you will be able to use the quick-fixes provided by the service. All the TypeScript errors in the current file will be listed in the TypeScript tool window at the bottom of the IDE window.

Save project as a template

Do you have a project that you want to use as a template for other new projects? Now with the new action Save as a Template in the Tools menu you can create custom project templates.

To use the template, click Create New Project on the IDE Welcome Screen and simply select the template from the list.

Create new project from custom template
Continue reading

Posted in Early Access Preview | Tagged , , , , , , , | 14 Comments

WebStorm 2018.3.3 is available

WebStorm 2018.3.3 (build 183.5153.33) is now available!

Update to it using our neat little Toolbox App, or from the IDE. You can also download WebStorm 2018.3.3 from our website.

Running and debugging tests using Cucumber 3+

You can now run and debug tests using the latest Cucumber version in WebStorm.

To start tests, you can right-click on the feature file and select Run <file name> in the context menu. Or you can create a new run/debug Cucumber.js configuration from the Run menu – Edit configurations… and then run or debug it. 

You will see the test results in the test tool window, from where you can jump to its definition in the editor.

Cucumber test results in a tool window

Please note that at the moment WebStorm only supports step definitions that are written using regular expressions.

What’s new:

  • Support for Set Literals in Dart (WEB-36102)
  • Completion for attribute bindings in Angular (e.g. [atrr.foo] ) (WEB-36071)
  • Better coding assistance for some Ionic and @angular/flex-layout attributes (WEB-36437)

What’s fixed:

  • Wrong indent after self-closing JSX tags in JavaScript and TypeScript files (WEB-36263)
  • Decorators are now supported in the class expressions like let newTest = @test class Test or export default @observer class Test (WEB-23326WEB-34774)
  • When using the bundled TypeScript service in Angular apps, the Angular language service is now disabled. Otherwise, there’re false errors in the template files (WEB-36226).

You can find the full list of addressed issues in the Release Notes.

The WebStorm Team

Posted in Release Announcements | Tagged , , | 22 Comments

Get Started Developing TypeScript Apps with WebStorm

TypeScript Language Overview

TypeScript is a superset of JavaScript that contains features that make it easier to write and maintain than standard JavaScript. Types are at the heart of TypeScript, and it performs type checking when compiling to JavaScript.

TypeScript logo

While JavaScript does contain a few primitive types, its type system is loosely typed, and types are inferred by their usage. Developers are free to change the data type of variables during a program’s execution. This might sound easy, and it is – an easy way to get into trouble! This is especially true if some data is accepted from an input source that doesn’t match the expected type. TypeScript offers a full type system, since types are important to create correct code.

Continue reading

Posted in Tutorials | Tagged , | 7 Comments

WebStorm 2018.3.2 is available

WebStorm 2018.3.2 (build 183.4886.41), the bug-fix update for WebStorm 2018.3, is now available!

Update to it using our neat little Toolbox App, or from the IDE. You can also download WebStorm 2018.3.2 from our website.

What’s new:

  • Completion for Bootstrap Vue (WEB-35477) and Shards Vue components (WEB-36054)
  • Better support for Prettier 1.15 and above (WEB-35806)
  • The Extract interface refactoring now works for objects (WEB-21926)
  • The IDE now bundles TypeScript 3.2 (WEB-36159)

What’s fixed:

  • The Optimize imports action now keeps the comment on top when ‘Sort imports
    by modules’ is on (WEB-28878)
  • The usage of the Angular template reference variable in the ViewChild selector is now resolved (WEB-36109)
  • The problem with using Hebrew in the ‘Find in path’ dialog was fixed (IDEA-199367)

You can find the full list of addressed issues in the Release Notes.

The WebStorm Team

Posted in Release Announcements | Tagged , | 8 Comments

Accessibility features in WebStorm 2018.3

In this era of software development, professionals everywhere are paying more attention to diversity, including building software with accessibility in mind. WebStorm contains a multitude of features to help make accessible software, and adds more in every release.

Developing for those with accessible needs is important for the following reasons:

  • When you make it easier for someone with accessible needs to use your software, it makes it even easier for those won’t don’t have those same needs. It’s a win-win.
  • According to Forrester and Microsoft’s research, up to 60% of the population has accessible needs that may result in the use of accessible technology.
  • An aging world population demands that software and technology evolve with their users.

There are four main facets of developing with accessibility in mind to consider:

  1. Visual: Blindness, low vision, color blindness, color contrast sensitivity.
  2. Auditory: Deafness, low hearing.
  3. Motor: Tremors, injury, loss of limb, aging, arthritis, and many debilitating diseases and medical issues.
  4. Cognitive: ADHD/ADD, dyslexia, autism spectrum, synesthesia, learning disabilities, and similar.

These facets cover the range of human characteristics and abilities, and web apps need to account for this wide human spectrum. Otherwise, the research shows that your web app could be unusable to a large number of your customers.

There are many design and programming techniques available for developing with accessibility in mind. This article covers a few of the basics that were released in WebStorm 2018.3.

Continue reading

Posted in Cool Feature, Tutorials | Tagged , , , | Leave a comment

WebStorm 2018.3.1 is available

WebStorm 2018.3.1, the first bug-fix update for the recently released WebStorm 2018.3, is now available!

Update to it using Toolbox App or from the IDE. You can also download WebStorm 2018.3.1 from our website.

What’s new:

  • Support for TypeScript 3.2 features: BigInt (WEB-34802), object rest and spread on generic types (WEB-35664), configuration inheritance via node_modules packages (WEB-35522), and more.
  • Code completion for Vue.js instance methods and properties (WEB-28529).
  • Option to disable icons on the editor gutter for implemented and overridden methods (WEB-32824).
  • Configurable syntax highlighting for Angular templates (WEB-35815).
  • Support for the ECMAScript throw expression proposal (WEB-35752).

What’s fixed:

  • Methods and properties are now resolved in Angular templates written in Pug (WEB-35848).
  • 18 issues in the Angular support were fixed.
  • Shortcuts for “Close tab” and “Select next/previous tab” now work again in the terminal (IDEA-200854).
  • The prompt to override terminal history was removed (IDEA-202523).
  • Select in… now works in the Search Everywhere popup (IDEA-197872).
  • The problem with Replace in selection was fixed (IDEA-200011).
  • Indentation now works correctly when the display scaling is 250% or higher (IDEA-202087).
  • The problem with indexing when package.json contains "//" in dependencies was fixed (WEB-36082).

Please also see the Release Notes.

The WebStorm Team

Posted in Release Announcements | Tagged , | 9 Comments

WebStorm 2018.3: improved Angular support, better autoimports, GitHub Pull Requests, and more

⭐️WebStorm 2018.3 is now here!⭐️

WebStorm 2018.3 brings lots of exciting new features and enhancements across the board. Much-improved Angular support, GitHub Pull Requests, debug for Node.js worker threads, and lots more await!

Explore the top new features and download WebStorm 2018.3 on our website.

In this blog post we would like to share with you the detailed release notes for the WebStorm 2018.3 update. They are compiled from the EAP blog posts that we’ve been publishing here for the past two months.

Here are the features and improvements grouped by the WebStorm subsystems:

  • JavaScript and TypeScript support: autoimports in JavaScript for symbols from the project’s dependencies, parameter hints in JavaScript, convert to a variable with arrow function, better ‘null’ and ‘undefined’ checks, suggestions for variable names, and TypeScript 3.1.
  • HTML and JSON support: accessibility inspections for HTML, improved Remove action for HTML and JSX tags, and improvements in JSON support.
  • Style sheets: Extract ruleset and move it to another file, new code style options, and updated inspection for CSS shorthand properties.
  • Development with Angular: major improvements in the Angular templates support and fixes in AngularJS support.
  • Development with React: completion for lifecycle methods and new inspection for the undefined components.
  • Development with Vue.js: support for Vuetify.
  • Node.js development: completion for previous package versions in package.json and debugging Node.js worker threads.
  • Editor: multiline Todos, indent size in the status bar, and disabling code formatting for specific files and folders.
  • Accessibility: new high-contrast UI theme and screen reader support for gutter icons.
  • Version Control: Git submodules, tool window for GitHub Pull Requests, and better support for precommit hooks.
  • Linters integrations: suppress comments for TSLint rules, linting TypeScript files with ESLint, and an option to override severity from ESLint or TSLint config.
  • Debugging: Live Edit without Chrome extension, and adding multiple variables to debugger’s watches.
  • Testing: Structure view for test files, Go to failure for tests, and running a single Protractor test or suite.
  • Other IDE improvements: unified Search popup, a new plugin configuration, and drag folder to Welcome screen to open it.

Download WebStorm 2018.3

JavaScript and TypeScript support

Autoimport symbols from the project’s dependencies

We have extended the autoimports in JavaScript files to symbols defined in the project’s dependencies. This will work if there’s a TypeScript definition file present inside the package (like in moment or redux) or if the package contains sources written as ES modules.


And of course, autoimports in JavaScript work for symbols exported in the ES modules in your project. Continue reading

Posted in Release Announcements | Tagged , , , , , , , , , , , , | 9 Comments