Progress will discontinue Telerik Platform on May 10th, 2018. Learn more

Configure Your TypeScript Settings

Filter by IDE
Select the Progress AppBuilder client you are currently using for development.

IDE

Based on your AppBuilder client, you can configure some TypeScript settings for your apps such as general compilation options, compilation engine and code completion.

Prerequisites

  • Verify that your preferred AppBuilder client is running and you are logged in.
  • Verify that you have opened the code for your app.

Procedure

In-Browser

In the in-browser client, you can configure the compiling of TypeScript to JavaScript.

  • Based on the in-browser client settings, AppBuilder will recompile TS files to their corresponding JS files when you save changes to a TS file, before building the app, and before running the app in the simulator.
    1. Click the cogwheel icon and select Options.
    2. In the sidebar, click Code Editor.
      • To enable or disable automatic compilation on save, use the Compile TypeScript files on save check box.
      • To enable or disable automatic compilation before build, use the Compile TypeScript files before build check box.
      • To enable or disable automatic compilation before running the simulator, use the Compile TypeScript files before running the simulator check box.
  • You can add a tsconfig.json file in the root of your app. With this file, you can configure multiple compiler options for TypeScript.

    The in-browser client ignores the following tsconfig.json options: rootDir, rootDirs, outDir, outFile, sourceRoot, mapRoot, types, typeRoots.

    If you have the "noEmitOnError": true compiler option in your tsconfig.json file, TS to JS compilation will fail for any TypeScript files containing errors or warnings.

Universal

In the universal desktop client, you can configure the compiling of TypeScript to JavaScript.

  • Based on the universal desktop client settings, AppBuilder will recompile TS files to their corresponding JS files when you save changes to a TS file, before building the app, and before running the app in the simulator.
    1. Click the cogwheel icon and select Options.
    2. In the sidebar, click Code Editor.
      • To enable or disable automatic compilation on save, use the Compile TypeScript files on save check box.
      • To enable or disable automatic compilation before build, use the Compile TypeScript files before build check box.
      • To enable or disable automatic compilation before running the simulator, use the Compile TypeScript files before running the simulator check box.
  • You can add a tsconfig.json file in the root of your app. With this file, you can configure multiple compiler options for TypeScript.

    The universal desktop client ignores the following tsconfig.json options: rootDir, rootDirs, outDir, outFile, sourceRoot, mapRoot, types, typeRoots.

    If you have the "noEmitOnError": true compiler option in your tsconfig.json file, TS to JS compilation will fail for any TypeScript files containing errors or warnings.

Windows

In the classic Windows desktop client, you can enable or disable TypeScript processing, you can configure your compilation settings and you can customize your typing assistance options for TypeScript.

  1. Open your app.
  2. In the title bar, click your user name and select Options.
  3. Navigate to the General tab.
  4. Configure working with TypeScript in the classic Windows desktop client.
    This setting manages compilation, syntax highlighting and code completion.
    1. Select Text EditorTypeScript.
    2. To enable working with TypeScript in the classic Windows desktop client, verify that the Enable TypeScript compilation, syntax highlighting and code completion. check box is selected.
    3. To disable working with TypeScript in the classic Windows desktop client, verify that the Enable TypeScript compilation, syntax highlighting and code completion. check box is deselected.
    4. Click Ok.
    5. Restart the classic Windows desktop client and reopen your app.
  5. Configure compilation settings.
    1. Select Text EditorTypeScriptCompilation Settings.
    2. To enable automatic compilation, verify that the Compile on save check box is selected.
    3. To disable automatic compilation, verify that the Compile on save check box is not selected.
    4. Set the module-loading system for your TypeScript code. You can choose between CommonJS and AMD.
      For more information, see Code Generation for External Modules.
  6. Configure typing assistance.
    1. Select Text EditorTypeScriptTyping Assistance.
    2. Select the check boxes for the typing assistance options that you want to enable.
  7. Click OK.

Visual Studio

To develop with TypeScript in this version of the extension for Visual Studio, verify that you have installed TypeScript 1.5.2 for Visual Studio or a later stable TypeScript 1.x for Visual Studio release. To develop Angular 2 applications, verify that you are running Microsoft Visual Studio 2015 or later with TypeScript 2.0 or later installed.

In the extension for Visual Studio, you can configure the compiling of TypeScript to JavaScript.

  • Based on the extension for Visual Studio settings, AppBuilder will recompile TS files to their corresponding JS files before building the app, running it in the simulator, or synchronizing it with the cloud.
    1. Open your TypeScript project.
    2. In the main menu bar, select AppBuilderOptions.
    3. Navigate to the General tab.
    4. Select TypeScript.
    5. To enable or disable automatic compilation, use the Compile TypeScript files before build-, simulator-, and sync-with-cloud-related operations. check box.
  • In the extension for Visual Studio 2013, you can configure multiple TypeScript settings such as ECMAScript version, compilation settings, output settings, module system and others.

    1. Verify that you are running Microsoft Visual Studio 2013.
    2. Open your TypeScript project.
    3. In the Solution Explorer, double-click Properties.
    4. Navigate to the TypeScript Build tab.
    5. Configure the listed TypeScript settings.
    6. Save your changes.

    In Microsoft Visual Studio 2013, if you have the Do not emit outputs if any errors are reported option set to true, TS to JS compilation will fail for every TypeScript file containing errors or warnings.

  • In the extension for Visual Studio 2015, you can configure multiple TypeScript settings by editing the tsconfig.json file directly.
    1. Verify that you are running Microsoft Visual Studio 2015.
    2. Open your TypeScript project.
    3. Locate the tsconfig.json file and open it.
    4. Make the necessary modifications.
    5. Save your changes.

In Microsoft Visual Studio 2015, if you have the "noEmitOnError": true compiler option in your tsconfig.json file, TS to JS compilation will fail for every TypeScript file containing errors or warnings.

If you do not have the "sourceMap": true or the "inlineSourceMap": true compiler option in your tsconfig.json file, you will not be able to debug your TypeScript sources using the Microsoft Visual Studio built-in debug tools.

CLI

To develop with TypeScript in this version of the command-line interface, you can use your preferred code editor with TypeScript support. During build and build-related operations, the command-line interface automatically compiles your TypeScript code to JavaScript. You need to manually reference the resulting JavaScript file in your index.html.

Next Steps

Continue development.

See Also

Start a free trial Request a demo
Contact us: +1-888-365-2779
sales@telerik.com
Copyright © 2016-2017, Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.