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:

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:

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.

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:

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.

About Rachel Appel

Rachel Appel is a Developer Advocate at JetBrains focusing on .NET, Azure, and web development technologies.
This entry was posted in Tutorials and tagged , . Bookmark the permalink.

9 Responses to Get Started Developing TypeScript Apps with WebStorm

  1. David T Nguyen says:

    Do you have any example on writing TSX in WebStorm?

  2. J says:

    I would like to get the downloadable link to this example project on GitHub or another hosting site. Why don’t you support novice users like me? IMHO, this does not support at all, and I would find out such posts like this easily if I would. This is not the like one I hope for the paid tool supporting pages.

    • Rachel Appel says:

      Hello J

      We didn’t post a corresponding project for this blog post to Github. This is the blog, where we post tutorials and informational posts, but it doesn’t serve as official support. Our official help and support pages are here at https://www.jetbrains.com/help/webstorm/meet-webstorm.html.

      • J says:

        I’m sorry about that. I didn’t know you are not of the official team.
        I pushed am an example for this BLOG. I don’t like the official help, because they are not fully helpful.

        https://github.com/JunjiUmeno/GetStratedTypeScriptForNovice

        • Rachel Appel says:

          J, yes I am part of the team.
          If you can clearly state what you’re attempting, then perhaps I can help. You should be able to use the post as a guide to create a new blank project, and copy the code that is here into it.

          • J says:

            No, I don’t need any help now. I’ve just got over myself, and I shared my project to the same novice guys. Could you please be more nice to them and share any real codes as files. It’s my feedback to your team. Many thanks.

  3. Steve says:

    I fee like you are leaving a few steps out that will confuse total beginners. In the “Write Typescript Code” section, you display a simple JavaScript function then in the compile gif, it’s magically part of a class.

    What are the full contents of file.ts and file.html?

    Thanksl

    • Ekaterina Prigara says:

      Hello Steve, thank you for your feedback! I’ve updated the blog post adding all the code used as snippets. Hope it helps!

Leave a Reply to Rachel Appel Cancel reply

Your email address will not be published. Required fields are marked *