Configure Your App for TypeScript

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

IDE

You can create and import TypeScript files, edit them and compile them to JavaScript. When you want to develop with TypeScript, you need to create your app from a TypeScript-enabled template.

Based on your settings, the in-browser client, the classic Windows desktop client, the universal desktop client and the extension for Visual Studio automatically compile valid TypeScript to JavaScript as you save your changes or before build- and simulator-related operations. The command-line interface automatically compiles valid TapeScript to JavaScript during build and build-related operations.

You need to manually reference the resulting JavaScript files in your index.html.

For NativeScript apps developed with TypeScript, when you add custom or verified npm modules using the Manage Packages wizard or the plugin commands, AppBuilder will attempt to install their TypeScript definitions, if available. This lets you use TypeScript code completion and type checking.

Procedure

In-Browser

  1. In your browser, verify that you are logged in the Telerik Platform and you have switched to the account in which you want to develop your application.
  2. In the Telerik Platform home page, click Create app.
  3. Click Advanced.
  4. Select Samples and templates.
  5. Choose between Hybrid and NativeScript.
  6. Select TypeScript.
  7. Select the template that you want to use.
  8. Enter a name for your app.
  9. (Optional) Enter a description for your app.
  10. Click Create App.
  11. (Optional) Add new TypeScript files to your app.
    1. In the Project Navigator, right-click the scripts folder and select AddNew File.
    2. Select TypeScript.
    3. Enter a name for the file and click OK.
    4. Right-click the new file and select Compile to JavaScript.
      The in-browser client creates a new JS file with an identical name and places it in the current folder.
    5. In index.html, reference the newly compiled JavaScript file.

To manually recompile code, right-click a TS file in the Project Navigator and select Compile to JavaScript.

Universal

  1. Run the universal desktop client and log in.
  2. From the Dashboard, click Create App.
  3. Click Advanced.
  4. Select Samples and templates.
  5. Choose between Hybrid and NativeScript.
  6. Select TypeScript.
  7. Select the template that you want to use.
  8. Enter a name for your app.
  9. (Optional) Enter a description for your app.
  10. Click Create App.
  11. (Optional) Add new TypeScript files to your app.
    1. In the Project Navigator, right-click the scripts folder and select AddNew File.
    2. Select TypeScript.
    3. Enter a name for the file and click OK.
    4. Right-click the new file and select Compile to JavaScript.
      The in-browser client creates a new JS file with an identical name and places it in the current folder.
    5. In index.html, reference the newly compiled JavaScript file.

To manually recompile code, right-click a TS file in the Project Navigator and select Compile to JavaScript.

Windows

  1. Run the classic Windows desktop client and log in.
  2. From the Dashboard, click New.
  3. Select between Hybrid and Native (NativeScript).
  4. From the list, choose a TypeScript-enabled template (indicated by TypeScript in brackets).
  5. Enter a name for your app.
  6. Click Create.
  7. 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.
  8. (Optional) Add new TypeScript files to your app.
    1. In the Project Navigator, right-click the scripts folder and select AddNew File.
    2. Select TypeScript.
    3. Enter a name for the file and click OK.
    4. Right-click the new file and select Compile to JavaScript.
      The classic Windows desktop client creates a new JS file with an identical name and nests it under the TS file.
    5. In index.html, reference the newly compiled JavaScript file.

To manually recompile code, right-click a TS file in the Project Navigator and select Compile to JavaScript.

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.

  1. Run Microsoft Visual Studio and select FileNewProject.
  2. In the sidebar of the New Project window, select TelerikPlatform.
  3. In the sidebar, select Cordova to list the available hybrid templates or NativeScript to list the available NativeScript templates.
  4. From the list, choose a TypeScript-enabled template (indicated by TypeScript in brackets).
  5. (Optional) Provide a name for your app and solution and change the location where you want to store the app.
  6. Click OK.
  7. If prompted, log in the Telerik Platform.
  8. (Optional) Add new TypeScript files to your app.
    1. In the Solution Explorer, right-click the scripts folder and select AddNew Item.
    2. Select TypeScript.
    3. Enter a name for the file and click OK.
    4. Compile the newly created TS file to JavaScript.
    5. In index.html, reference the newly compiled JavaScript file.

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.

If you want to begin your TypeScript development from an app template, perform the following steps.

  1. Run the command-line interface.
  2. In the command prompt, navigate to the location where you want to create the new app.
  3. If you want to create a hybrid app, run the following command.

    appbuilder create hybrid <App Name> --template "TypeScript.Blank"
    
  4. If you want to create a NativeScript app, run the following command.

    appbuilder create native <App Name> --template "<Template Name>"
    

    <Template Name> is the name of a NativeScript template, enabled for TypeScript. You can set any of the following names: TypeScript.Blank, TypeScript.HelloWorld, TypeScript.NG2.Blank, TypeScript.MasterDetail, TypeScript.TabbedApp.

  5. Continue development in your preferred code editor.

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.