Running and debugging TypeScript

1. Press CtrlAlt0S to open settings and then select Languages & Frameworks | TypeScript.

2. Make sure the TypeScript Language Service checkbox is selected.

1. In the Project tool window Alt01, select the folder where your TypeScript code is (most often it is the project root folder) and then select New | tsconfig.json File from the context menu.

2. To generate source maps during compilation, make sure the sourceMap property is set to true.

3. Optionally:

   To override the default compilation scope, which is the entire project, add the files property and type the names of the files to process in the following format:

   "files" : ["<file1.ts>","<file2.ts>"],

You may need to apply different TypeScript configurations to different files in your project.

It is not a problem if you arrange your sources so that all the files in each folder should be processed according to the same configuration. In such case you only have to create a separate tsconfig.json for each folder.

However, if you want to apply different rules to the files that are stored in the same folder, you need to create several configuration files and configure scopes for them.

1. Create as many tsconfig*.json configuration files as you need.

2. Open the Settings dialog (CtrlAlt0S) , go to Editor | File Types, and make sure the names of all these files match the patterns from the Typescript config file name pattern list.

   If necessary, add patterns as described in Add file type associations.

   

3. In each *tsconfig*.json, specify the files to be processed according to its settings:

   • List the file names explicitly in the files field:

     "files" : ["<file1.ts>","<file2.ts>"],

     Learn more from TSConfig Reference: Files.

   • In the include field, specify the file names or patterns:

     "include" : ["<pattern1>, <pattern2>"]

     Learn more from TSConfig Reference: Include.

   • To skip some files whose names match the patterns listed in the include field, list their names or patterns in the exclude field:

     "exclude" : ["<pattern3>, <pattern4>"]

     Learn more from TSConfig Reference: Exclude.

note

PyCharm doesn't use just the nearest tsconfig.*.json (from the list of files recognized as Typescript config file type). PyCharm uses the nearest tsconfig.*.json in which a particular file is somehow specified – either explicitly in the files field or through patterns in the include and exclude fields.

1. Click the Language Services widget on the Status bar.

   tip

   If no other language services are running against the current file, the title of the widget changes to TypeScriptt.

   The TypeScript widget is shown on the Status bar all the time after you have opened a TypeScript file in the editor.

2. Click .

   

   In the Compile TypeScript popup, select one of the following options:

   • To compile the TypeScript code of the entire application, select Compile All.

     Alternatively, select Compile TypeScript from the context menu of any open TypeScript file.

     

     tip

     You can also press CtrlShift0A and choose Compile TypeScript from the list.

   • To compile one file, select the path to it in the Compile TypeScript popup.

     

   • To compile files from a custom scope, make sure they are listed in the files property of your tsconfig.json as described above.

     In the Compile TypeScript popup, select the path to tsconfig.json.

     

• Open the Languages & Frameworks | TypeScript settings page  CtrlAlt0S and select the Recompile on changes checkbox.

1. Compile the TypeScript code into JavaScript.

2. In the editor, open the HTML file with a reference to the generated JavaScript file. This HTML file does not necessarily have to be the one that implements the starting page of the application.

3. Do one of the following:

   • Choose View | Open in Browser from the main menu or press AltF2. Then select the desired browser from the list.

   • Hover over the code to show the browser icons bar: . Click the icon that indicates the desired browser.

1. Configure the built-in debugger as described in Configuring JavaScript debugger.

2. To enable source maps generation, open your tsconfig.json and set the sourceMap property to true, as described in Create a tsconfig.json file.

3. Configure and set breakpoints in the TypeScript code.

4. Run the application in the development mode. Often you need to run npm start for that.

   Most often, at this stage TypeScript is compiled into JavaScript and source maps are generated. For more information, refer to Compile TypeScript into JavaScript.

   When the development server is ready, copy the URL address at which the application is running in the browser - you will need to specify this URL address in the run/debug configuration.

5. Go to Run | Edit Configurations. Alternatively, select Edit Configurations from the Run widget on the toolbar.

   

   In the Edit Configurations dialog that opens, click the Add button () on the toolbar and select JavaScript Debug from the list. In the Run/Debug Configuration: JavaScript Debug dialog that opens, specify the URL address at which the application is running. This URL can be copied from the address bar of your browser as described in Step 3 above.

   

6. From the Run widget list on the toolbar, select the newly created configuration and click next to it. The URL address specified in the run configuration opens in the browser and the Debug tool window appears.

   You may need to refresh the page in the browser to get the controls in the Debug tool window available.

7. In the Debug tool window, proceed as usual: step through the program, stop and resume program execution, examine it when suspended, explore the call stack and variables, set watches, evaluate variables, view actual HTML DOM, and so on.