Write Object-Oriented TypeScript: Polymorphism

This is part 4 of a 4 part article on how to program in TypeScript using object-oriented techniques. If you are just starting with TypeScript and WebStorm, see our blog post on Getting Started with TypeScript.

Implement polymorphism in TypeScript

When multiple classes inherit from a parent and override the same functionality, the result is polymorphism. Each of those child classes now implements a property or method, but they each may have their own way of performing that implementation.

For example, both business and personal checking accounts can inherit from a parent checking account. Calling a method to open the business checking account might require that the code checks for a higher initial deposit than when opening a personal checking account. A business account might require multiple owners, where a personal checking account can have one or more. Alternatively, one child class might override the parent’s members while another child doesn’t but just accepts the parent class’s implementation instead. This also demonstrates polymorphic behavior, since those behaviors are different between the siblings. Continue reading

Posted in Tutorials | Tagged , | Leave a comment

WebStorm 2019.1 EAP #7: run Node.js using Docker Compose, Recent Locations popup

WebStorm 2019.1 Early Preview build #7 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 posts.

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 #7 (build 191.6014.17). For the full list of issues fixed in this update, see the Release Notes.

Run and debug Node.js app when using Docker Compose

If you’re using Docker for testing your Node.js application, you can now use the configuration described in the Docker Compose file to easily run and debug the app from the IDE.

Please note that the described steps only work if you use node or npm in the command field of your Docker Compose file to run your app, e.g. command: node ./src/app.js Continue reading

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

Write Object-Oriented TypeScript: Encapsulation

This is part 3 of a 4 part article on how to program in TypeScript using object-oriented techniques. If you are just starting with TypeScript and WebStorm, see our blog post on Getting Started with TypeScript.

Implement encapsulation in TypeScript

A key aspect of object-oriented programming, encapsulation enables you to perform what’s called “data hiding”. It’s necessary to hide certain data so that it’s not changed accidentally or purposefully by other components or code in the program. For example, you don’t want any code from outside of the CheckingAccount class calling its private methods directly. But the data that is inside the CheckingAccount class can and should be changed by other code in the CheckingAccount class itself. If encapsulated, the data can be exposed thoughtfully to other classes through methods and properties that enforce business rules.
Continue reading

Posted in Tutorials | Tagged , , | Leave a comment

WebStorm 2019.1 EAP #6: new debug console, completion for npm scripts

WebStorm 2019.1 Early Preview build #6 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 posts.

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 #6 (build 191.5849.24). For the full list of issues fixed in this update, see the Release Notes.

New debugger console

We have completely re-implemented the debugger console in the JavaScript and Node.js debug tool windows. This console shows you stack traces and everything that was logged in your code (e.g. using console.log()). You can use this interactive console to evaluate arbitrary JavaScript statements – just start typing them in the input at the bottom of the console panel.

Here are some of the new features and improvements that we’ve implemented. You can debug this demo file in WebStorm 2019.1 EAP to see all these features in action. Continue reading

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

Write Object-Oriented TypeScript: Abstraction

This is part 2 of a 4 part article on how to program in TypeScript using object-oriented techniques. If you are just starting with TypeScript and WebStorm, see our blog post on Getting Started with TypeScript.

Implement abstraction in TypeScript

Abstraction is a way to model objects in a system that creates a separation of duties between class or type and the code that inherits it. It’s also a way to enforce a concept called contract based development, as you’ll see in this post. A developer creates a type, i.e., a class or interface, and that type specifies what the calling code should implement, but not how. So it’s the job of the abstract type to define what needs to be done, but up to the consuming types to actually do those things. To enforce abstraction, inherit or implement from abstract classes and interfaces.
Continue reading

Posted in Tutorials | Tagged , , | Leave a comment

WebStorm 2018.3.5 is available

Please welcome WebStorm 2018.3.5, the final bug-fix update for this IDE version.

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

What’s fixed in WebStorm 2018.3.5:

  • The error when running async tests with Jest 24.0+ has been fixed (WEB-37021)
  • Search Everywhere popup now allows to filter out run/debug configurations and shows search results with shorter delay
  • The performance problem causing a high CPU and memory usage in the idle state has been fixed (IDEA-205778)
  • When the light editor color scheme is selected together with the dark IDE theme, the IDE will no longer reset the scheme to Darcula after restart (IDEA-202248)

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

The WebStorm Team

Posted in Release Announcements | Tagged , | 6 Comments

WebStorm 2019.1 EAP #5: updated CSS docs and browser compatibility check, new Angular inspections

WebStorm 2019.1 Early Preview build #5 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 posts.

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 #5 (build 191.5701.27). For the full list of issues fixed in this update, see the Release Notes.

Updated docs for CSS and browser compatibility check

We’ve updated our documentation for CSS properties and pseudo-elements. Press F1 to see the brief description of the property and its values, as well as information about the supported browsers.

CSS docs

The description and browser compatibility data is loaded from MDN. You can quickly open the full article in the browser to see more details and examples – click the link at the bottom on the documentation popup, or press Shift-F1.
Continue reading

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

WebStorm 2019.1 EAP #4: Extract method for React hooks, Convert to async function

WebStorm 2019.1 Early Preview build #4 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 posts.

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 #4 (build 191.5532.37). For the full list of issues fixed in this update, see the Release Notes.

Convert Promise to async/await

With this new intention in the IDE, you can automatically change a function that returns a promise with .then() and .catch() calls to an async function that uses the async/await syntax – not only in TypeScript files, but also in JavaScript and Flow.

Simply press Alt-Enter on the name of the function and select Convert to async function. Voila!

convert-to-async

Continue reading

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

WebStorm 2019.1 EAP #3: improved support for ESLint and TSLint

WebStorm 2019.1 Early Preview build #3 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 posts.

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 #3 (build 191.5109.10). For the full list of issues fixed in this update, see the Release Notes.

Improved Support for ESLint and TSLint

We have completely redesigned our integration with ESLint and TSLint to improve the way it works in monorepos (including projects managed by lerna and yarn workspaces) and projects with multiple linter configurations.

Before, WebStorm could run only one linter’s service per project. So if you had different linter versions with different configs in different parts of your project, still only one ESLint or TSLint process would run, resulting in some configs being ignored or some plugins working incorrectly.

Now, the IDE will start a separate process for every package.json that lists a linter (ESLint or TSLint) as a dependency, and it will process everything below it as if it were invoked with .bin/eslint **/*.js (in case of ESLint).

This behavior is on by default for all new projects.

To switch to the new mode in the existing projects, go to Preferences/Settings | Languages and Frameworks | JavaScript | Code Quality Tools | ESLint or TypeScript | TSLint and select Automatic ESLint/TSLint configuration.

If you need to run a globally installed linter, pass additional options to it, or add a custom rules directory, you configure all these additional options if you select Manual configuration. Continue reading

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

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 , , , | Leave a comment