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.
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”.
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.
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):
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:
You can find the full list of addressed issues in the Release Notes.
The WebStorm Team
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.
If you’re not yet familiar with our Early Access Programs, here are the basics you should know:
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.
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.
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).
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.
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.
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.
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.
Please note that at the moment WebStorm only supports step definitions that are written using regular expressions.
What’s new:
[atrr.foo] ) (WEB-36071)What’s fixed:
let newTest = @test class Test or export default @observer class Test (WEB-23326, WEB-34774)You can find the full list of addressed issues in the Release Notes.
The WebStorm Team
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.
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.
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:
What’s fixed:
You can find the full list of addressed issues in the Release Notes.
The WebStorm Team
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:
There are four main facets of developing with accessibility in mind to consider:
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.
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:
What’s fixed:
"//" in dependencies was fixed (WEB-36082).Please also see the Release Notes.
The WebStorm Team
⭐️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:
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