Tips & Tricks

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.

In addition to data types, TypeScript, like JavaScript, is object-oriented, so you can create models that mirror data stores or objects in the real world. It also performs module resolution and has the notion of namespaces, so you can more easily organize code. Finally, TypeScript has many syntactical enhancements and features from ECMAScript even before they’re standardized. TypeScript makes writing JavaScript apps quite easy because of these new programming features!

Install and Configure TypeScript

You don’t need to do anything to use TypeScript with WebStorm. You can use it in any WebStorm project, including built-in project templates using JavaScript frameworks or existing projects.

When you’re ready to start writing TypeScript code, add a tsconfig.json file (TypeScript configuration file) to the project. The tsconfig.json file is a JSON file that tells the TypeScript compiler how to compile TypeScript to JavaScript. In WebStorm, add a tsconfig.json file by choosing File – New tsconfig.json File from the menu. Most developers add this file to their root directory.

Add tsconfig.json file to project

The default tsconfig.json file looks like the following:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true
  },
  "exclude": [
    "node_modules"
  ]
}

Project directories and assets can be organized into any structure, however, a popular convention is to create a structure where TypeScript files are in a src directory and the compiled output from them in another, such as a build folder, similar to the following:

A common TypeScript file structure

To configure this folder structure, you must first add "outDir": "build" under "compilerOptions" in the tsconfig.json file. You can alert TypeScript to build particular folders in the build by adding the "include" directive as a top-level entry. This is the resulting tsconfig.json file:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true,
    "outDir": "build"
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "src/scripts/**/*"
  ]
}

If you prefer, you can use a JavaScript bundler, e.g. webpack, to combine the output into a single JavaScript file.

Write TypeScript Code

Since many TypeScript apps are part of client-side apps, we’ll add in some simple HTML to the body of an HTML file that defines a button and an element to display the output.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../build/file.js"></script>
</head>
<body>

<button id="totalButton"
        onclick="displayTotalPerPerson('Tom Foolery', 15)">See Total</button>

<div><span id="totalMessage"></span></div>
</body>
</html>

The click on the button will be handled by the displayTotalPerPerson function that we’ll write in a moment. The code will be written in a TypeScript file and the compiler to JavaScript. This compiled JavaScript file is included using the script tag in our HTML file.

In order to output the message, you must add some code to a .ts file. The following code shows how we display a message using TypeScript:

function displayTotalPerPerson(person: string, total: number) {
    let message: string = "Total for " + person + " is " + total;
    document.getElementById("totalMessage").innerText = message;
}

There are only tiny differences between the above TypeScript code and JavaScript, though in a sizable app you’ll see many more. Notice the type annotations on the person and total function arguments, as well as the message variable. TypeScript provides a full type system so you can write code that’s easy to read and maintain. You can write both in TypeScript and JavaScript in .ts files.

When ready, compile to JavaScript using the Compile button on the top left corner of the TypeScript tool window in the IDE. Notice that WebStorm builds both a JavaScript file and a .map file. Mapping files map the TypeScript code to its JavaScript output, and exist so that tools can allow developers to debug TypeScript code. When compiling for production use, mappings are usually not built, unless they are needed for production debugging. To turn off mapping, change the "sourceMap" setting under "compilerOptions" to false in the tsconfig file.

Compile TypeScript

Test the TypeScript App

Once your code is compiled, run the app in the browser to test it. In WebStorm, navigate to the page that you want to launch, and click on the browser icon of your choice in the top-right of the editor. You can also debug TypeScript apps using WebStorm’s excellent debugging tools.

Launch TypeScript HTML page

Notice the localhost:port address in the browser that specifies that this is WebStorm’s web server for testing.

HTML at runtime

Summary

WebStorm has many features for developing apps in TypeScript out of the box. It makes getting started easy, without needing to add any plug-ins or extensions.

Keep an eye out for more posts showing how to develop applications using TypeScript with WebStorm. Or visit WebStorm docs to find out more about the TypeScript support.

image description