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

Compile TypeScript to JavaScript

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

IDE

To write more manageable and complex code in AppBuilder, you can use TypeScript (TS) files and compile them to JavaScript (JS).

Based on the in-browser client, the classic Windows desktop client, the universal desktop client and the extension for Visual Studio settings, AppBuilder automatically compiles valid TypeScript to JavaScript as you save your changes. You need to manually reference the resulting JavaScript file in your index.html. If AppBuilder does not recompile the TypeScript file to JavaScript, you can manually recompile it.

When you save your changes to a TS file, AppBuilder attempts to automatically recompile the corresponding JS file. In case of syntax errors in the TypeScript code, AppBuilder does not recompile the code. However, AppBuilder ignores semantic errors and recompiles the code.

Based on the command-line interface, the in-browser client, the universal desktop client and the extension for Visual Studio settings, AppBuilder automatically compiles valid TypeScript to JavaScript during build and build-related operations, including LiveSync. You need to manually reference the resulting JavaScript file in your index.html.

During the compile operation, AppBuilder might create a source map (JS.MAP) for debugging purposes.

Prerequisites

  • Verify that your preferred AppBuilder client is running and you are logged in.
  • Verify that you have opened the code for your app in AppBuilder.
  • Verify that you have added a TS file in your app.
  • Verify that you have configured your TypeScript settings.

Procedure

In-Browser

If enabled, when you select RunBuild or Open Simulator, AppBuilder attempts to automatically recompile the TS files to their corresponding JS files.

  • Compile single file.
    1. In the Project Navigator, right-click the TS file that you want to compile.
    2. Select Compile to JavaScript.
      If you have not compiled the TS file before, the in-browser client creates a corresponding JS file under the TS file.
      If you have compiled the TS file before, the in-browser client recompiles the existing corresponding JS file.
      During the compile operation, AppBuilder might create a source map (JS.MAP) for debugging purposes.
    3. If needed, add a <script> reference for the JS file in your HTML code.
  • Compile all files.
    1. In the Project Navigator, right-click the second node from the top.
    2. Select Compile All TypeScript Files.
      If you have not compiled one or more TS files before, the in-browser client creates corresponding JS files and places them under their TS parents.
      If you have compiled one or more TS files before, the in-browser client recompiles the existing corresponding JS files.
      During the compile operation, AppBuilder might create source maps (JS.MAP) for debugging purposes.
    3. If needed, add a <script> reference for the JS file in your HTML code.

AppBuilder shows TypeScript compilation issues under the Errors tab in the output pane.

Universal

If enabled, when you select RunBuild or Open Simulator, AppBuilder attempts to automatically recompile the TS files to their corresponding JS files. AppBuilder shows TypeScript compilation errors under the Errors tab in the output pane.

  1. In the Project Navigator, right-click the TS file that you want to compile.
  2. Select Compile to JavaScript.
    If you have not compiled the TS file before, the universal desktop client creates a corresponding JS file and places it in the current folder.
    If you have compiled the TS file before, the universal desktop client recompiles the existing corresponding JS file.
    During the compile operation, AppBuilder might create a source map (JS.MAP) for debugging purposes.
  3. If needed, add a <script> reference for the JS file in your HTML code.

AppBuilder shows TypeScript compilation issues under the Errors tab in the output pane.

Windows

  1. Verify that the TypeScript engine is enabled.
    1. In the title bar, click your user name and select Options.
    2. In the General tab, select Text EditorTypeScript.
    3. Verify that the Enable TypeScript compilation, syntax highlighting and code completion. check box is selected.
    4. Click Ok.
    5. If you have enabled the TypeScript engine, save your changes, restart the classic Windows desktop client and reopen your app.
  2. In the Project Navigator, select and right-click the TS files that you want to compile.
  3. Select Compile to JavaScript.
    If you have not compiled the TS file before, the classic Windows desktop client creates a corresponding JS file and nests it under the TS file.
    If you have compiled the TS file before, the classic Windows desktop client recompiles the existing corresponding JS file.
    During the compile operation, AppBuilder might create a source map (JS.MAP) for debugging purposes.
  4. If needed, add a <script> reference for the JS file in your HTML code.

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.

  • If enabled, when you select Build in Cloud, Build and Deploy, Synchronize with Cloud or Run in Simulator, AppBuilder attempts to automatically recompile the TS files to their corresponding JS files.

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.