Programming Guide   >   Viewing   >   Miscellaneous Topics

TypeScript

About TypeScript

TypeScript is a superset of JavaScript with additional language features that make it easier to develop and maintain large-scale applications. TypeScript adds to JavaScript a number of extremely useful features such as type annotations, compile-time error detection, and a source map for debugging. Its features allow for high-confidence app development as an application's size and complexity grow. TypeScript code compiles to pure JavaScript that runs in any browser or Node.js.

TypeScript's type checking system means that errors can be detected and corrected before the problematic code runs in the browser.

TypeScript error detection

TypeScript also makes debugging in the browser easier by automatically generating source maps for mapping the JavaScript output to the original TypeScript files. With this feature enabled, we can step through the actual TypeScript source code instead of the generated JavaScript:

TypeScript debugging in the browser

To learn more about TypeScript, visit https://www.TypeScriptLang.org

Definition Files

The TypeScript definition files for HOOPS Communicator are located in the web_viewer/typescript folder of the release package. These files contain definitions for the HOOPS Web Viewer API and default user interface. The files are described below:

File Purpose
hoops_web_viewer.d.ts Definition for the HOOPS Web Viewer API. This should be included for all HOOPS Communicator uses.
tcc.d.ts Definition for HOOPS Web Viewer dependencies. This should be included for all HOOPS Communicator uses.
hoops_web_viewer_ui.d.ts Definition for the HOOPS Web Viewer User Interface. This only needs to be included if you want to interact with default user interface components.

With HOOPS Communicator TypeScript definition files, the code editor can provide inline documentation assistance for HOOPS Web Viewer components:

TypeScript inline documentation assistance

Tutorial

In this tutorial we'll write a small TypeScript application utilizing HOOPS Communicator using Visual Studio Code.

Prerequisites

For this tutorial, the following software must be installed and configured:

Setup

Begin by extracting the tutorial files from the provided source archive. The archive contains several starter files that we'll use to build out the tutorial. Before beginning, we will need to copy the following files into the tutorial project directory from the HOOPS Communicator package:

We now have all of the HOOPS Communicator files needed to complete the tutorial. Finally, run the start_server() script located in the quick_start folder of the package. Open the project folder in Visual Studio Code.

Configuration

For this tutorial, we'll also need to install some package dependencies. They are listed in the package.json file included in the starter archive.

Follow these steps to install the Node Package Manager and start a HOOPS Server:

  1. Begin by opening a new terminal by selecting Terminal > New Terminal from the main menu bar.
  2. Install the Node.js dependencies by running: npm install
  3. Start the http server by running: node_modules\.bin\http-server
  4. Point your browser to http://localhost:8080 to view the tutorial page. This page will not show anything at the moment – we will be bringing it to life in the next section of the tutorial.

Creating a Viewer

To create a viewer, we need to create an endpoint from the HOOPS Server by sending it a POST request. The HOOPS Server listens for requests on http://localhost:11182. Open up index.ts and add the following code to create a WebViewer:

var viewer = null;
async function createViewer() {
let responseData = await $.post("http://localhost:11182/service", JSON.stringify({ "class": "csr_session" }));
let responseJson = JSON.parse(responseData);
viewer = new Communicator.WebViewer({
model: "microengine",
containerId: "viewer",
endpointUri: responseJson.endpoints.ws,
});
viewer.start();
}
$(() => {
createViewer();
});

As you are typing out the code, you will notice that Visual Studio Code's IntelliSense offers code completion hints and code assistance as you type. It will also highlight any errors that you make along the way.

Before we can see our code in action, we need to compile it into JavaScript. This is accomplished by hitting Ctrl + Shift + B and selecting tsc:build from the pop-up menu. This will produce the compiled JavaScript code and source maps. Once the build is complete, reload the webpage in your browser and you will see the microengine model appear on your screen.

Adding a Simple Callback

Let's add a callback to our page which will write the name of the node that is selected. Add a function in index.ts below the definition of createViewer() that will receive a NodeSelectionEvent array from the HOOPS Web Viewer:

function onSelection(selectionEvents) {
let $selectionBox = $("#selected-part");
if (selectionEvents.length > 0) {
let selection = selectionEvents[0];
let name = viewer.model.getNodeName(selection.getSelection().getNodeId());
$selectionBox.html(`Selected Part: ${name}`);
}
else {
$selectionBox.html("Selected Part: None");
}
}

This straightforward method gets the name of the node that was selected using the Model.getNodeName() method if an item was selected. The selectionBox div is then updated with the node's name or None if there was no selection.

The final step is to bind this function to be called when the selectionArray event is triggered. Add the following code right above the call to viewer.start() in createViewer():

viewer.setCallbacks({
selectionArray: onSelection
});

At this point, if we rebuild our TypeScript code and then reload our browser page we will see our model appear. If we click on a part, the part's name will appear below the viewer:

Selected Part: MechanicalTool.1

Wrapping Up

In this tutorial we have seen how to set up our code editor for HOOPS Communicator development with TypeScript. We have also seen how TypeScript can speed up the development process and streamline debugging.