Use TypeScript in Quantum Visualizer

From the 202307 release, Quantum Visualizer has added support for TypeScript language in the Form Controllers and Modules associated with an app. You can convert Form Controllers that use JavaScript (.js files) into TypeScript files (that use the .ts file extension), and create Module Files that use TypeScript code.

Enable TypeScript in Quantum Visualizer

Follow these steps to enable support for TypeScript in Quantum Visualizer:

  1. From the Project Explorer of Quantum Visualizer, click Project Settings.
    The Project Settings window appears.
  2. In the Application tab, under the TypeScript section, select the Enable TypeScript checkbox.

    Support for TypeScript is enabled in Quantum Visualizer.

After you enable support for TypeScript, you can start creating Forms and Modules that use TypeScript code.

IMPORTANT: If you disable TypeScript support from the Project Settings, the code in the TypeScript Files is converted to JavaScript code, and the updates specific to TypeScript code (such as datatypes, return types, and others) are removed from the files.

Use TypeScript in FormControllers

To use TypeScript code in a FormController, follow these steps:

  1. Enable support for TypeScript in Quantum Visualizer. For more information, refer Enable TypeScript in Quantum Visualizer.
  2. From the Project Explorer, expand the required <channel> (either Mobile, Tablet, Responsive Web/Desktop, or Wearables).
  3. Expand the Controllers node, and right-click the file that you want to convert into TypeScript.
  4. From the context menu that appears, select Convert to TypeScript.

    The file is converted to a .ts file, and the updated file appears in the Controllers node.

    NOTE: After you convert a FormController to TypeScript, Quantum Visualizer displays a higher number of syntax validation warnings as they are expected by the TypeScript compiler and linter. For example, you might view warnings for variable or parameter datatypes, and declarations of the function return types.


  5. Open the FormController.ts file, and enter the code that you want to add (or paste it in from another source by pressing Ctrl+V).
  6. Save the file by pressing Ctrl+S.

Important Considerations

  • When you convert a JS file to a TS file, the code within the file is not converted from JavaScript to TypeScript code. You must manually convert the code to TypeScript. For example, add variable and parameter datatypes, and return types.
  • You can convert a FormController from a TypeScript file into a JavaScript file. To do so, right-click the FormController that you want to convert, and select the Convert to JavaScript option from the context menu.

Use TypeScript in TemplateControllers

To use TypeScript code in a TemplateController, follow these steps:

  1. Enable support for TypeScript in Quantum Visualizer. For more information, refer Enable TypeScript in Quantum Visualizer.
  2. From the Project Explorer, navigate to the Templates Tab.
  3. Expand the required <channel> (either Mobile, Tablet, Desktop, or Wearables).
  4. Expand the Controllers node, and right-click the file that you want to convert into TypeScript.
  5. From the context menu that appears, select Convert to TypeScript.

    The file is converted to a .ts file, and the updated file appears in the Controllers node.
  6. Open the TemplateController.ts file, and enter the code that you want to add (or paste it in from another source by pressing Ctrl+V).
  7. Save the file by pressing Ctrl+S.

Create Module Files using TypeScript

To create Module files that use TypeScript, follow these steps:

  1. Enable support for TypeScript in Quantum Visualizer. For more information, refer Enable TypeScript in Quantum Visualizer.
  2. From the Project Explorer, expand the Modules node, and right-click the type of module file that you want to create (either require, workerthreads, or Wearables > Android Wear).
  3. From the context menu that appears, select any of the following options based on the type of module file that you want to create:
    • For require module files: Select the New Require module > TypeScript option.
    • For workerthreads module files: Select the New TS Module option.
    • For Wearables > Android Wear module files: Select the New TS Module option.

      Alternatively, you can expand the Android Wear node, right click the require node, and then select the New Require module > TypeScript option.

    A Module.ts file is created and appears in the respective section of the Modules node.

  4. Open the Module.ts file, and enter the code that you want to add (or paste it in from another source by pressing Ctrl+V).
  5. Save the file by pressing Ctrl+S.