Page tree
Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 8 Next »

This extension was previously (in version 1.0, 1.1, and 1.2) known as TypeScript and Angular.

On this page:

Target audience:

Users of the extension providing support for the TypeScript language. It also includes support for Angular, React React-Native and some of the main frameworks for Node.js Web applications such as Express (when they are used within typescript source code).

Summary: This document provides information about the extension providing TypeScript, Angular, React and Node support for Web applications.

What's new

See TypeScript and Frameworks - 1.3 - Release Notes for more information.


This extension provides support for the TypeScript language. It also includes support for Angular, React, React-Native and some of the main frameworks for Node.js Web applications such as Express (when they are used within typescript source code).

  • TypeScript is an open-source programming  language. It is a superset of JavaScript that adds optional typing and that compiles to plain JavaScript.
  • Angular is a front-end web framework used to create modern web platform capabilities.
  • React and React-Native are frameworks for building user interfaces
  • Node.js is a run-time environment that executes JavaScript code outside of a browser thus allowing to develop the server-side of an application using TypeScript.
    • Express is a server web framework for Node.js.
    • Mongoose is a MongoDB object modelling tool designed to work in an asynchronous environment.
    • AWS S3 is a storage service by Amazon 

Note that:

  • in order to analyze a JavaScript source code which uses Express framework, you should use the Node.js extension.
  • similarly, in order to analyze a JavaScript source code which uses the Angular framework, you should use the AngularJS extension.
  • finally, in order to analyze a JavaScript source code which uses the React or React-Native framework, you should use the ReactJS extension.

In what situation should you install this extension?

The typical use case would be a full-stack web application developed entirely in TypeScript using Angular framework and Node.js. However, this extension should be used whenever any sub-set of the application is implemented using TypeScript (provided that you want to view the call-graph of that part of the application). 

Angular/TypeScript Front-end connected to Node.js/Express/MongoDB back-end

Supported versions

The following tables display the list of versions that this extension supports. It also gives a list of the supported frameworks for Node.js.





























Supported Node.js versions

VersionSupport Comment


No longer supported




Based on Javascript ES6


Based on Javascript ES6
v7.x(tick)Based on Javascript ES6








Supported frameworks for Node.js

  • (tick) indicates that the framework is currently supported.
  • (error) indicates that the framework is not yet supported.



Data Access

Web Service

Supported versions

ExpressNode.js application framework
(tick)4.x; 5.x
MongooseMongoDB access(tick)
SequelizeNode.js application framework(error)

Mode-mongodb-nativeMongoDB access(error)

Mongo-clientMongoDB access(error)

CouchdbCouchdb access(error)

Node-couchdbCouchdb access(error)

Couchdb-nanoCouchdb access(error)

MarklogicMarklogic access(error)

my_connectionMySQL access(error)

pgPostgreSQL access(error)

oracledbOracle Database access(error)

HapiNode.js application framework(error)

SailsNode.js application framework(error)(error)
LoopbackNode.js application framework


KoaNode.js application framework(error)

KnexNode.js SQL query builder (error)

MemcachedStorage framework(error)

AWS.DynamoDBAmazon database access(error)

AWS.S3Amazon storage service(error)

AWS.LambdaAmazon routing solution

Files analyzed




Skipped files

The TypeScript analyzer will automatically skip files inside folders (or sub-folders) that by convention pertain to either external libraries or unit-testing. Currently the following are skipped:

  • Folders named as node_modules, e2e, e2e-bdd, e2e-app
  • Files with following name endings: .spec.ts, -spec.ts, _spec.ts, .d.ts

As mentioned in the introduction, TypeScript is a language that will be compiled to generate JavaScript files. Sometimes, the delivery will include these files, this is why the analyzer will skip the generated JavaScript files if we find their original TypeScript file.

Function Point, Quality and Sizing support

This extension provides the following support:

  • Function Points (transactions): a green tick indicates that OMG Function Point counting and Transaction Risk Index are supported
  • Quality and Sizing: a green tick indicates that CAST can measure size and that a minimum set of Quality Rules exist

Function Points
Quality and Sizing

CAST AIP compatibility

This extension is compatible with:

CAST AIP release


7.3.4 and all higher 7.3.x releases(tick)

Supported DBMS servers

This extension is compatible with the following DBMS servers:

CAST AIP releaseCSSOracleMicrosoft
All supported releases(tick)(tick)(tick)


(tick)An installation of any compatible release of CAST AIP (see table above)

Dependencies with other extensions

Some CAST extensions require the presence of other CAST extensions in order to function correctly. The TypeScript and frameworks extension requires that the following other CAST extensions are also installed:

Note that when using the CAST Extension Downloader to download the extension and the Manage Extensions interface in CAST Server Manager to install the extension, the HTML5/JavaScript, ReactJS and NodeJS extensions will be installed automatically. You do not need to do anything.

Download and installation instructions

Please see:

The latest release status of this extension can be seen when downloading it from the CAST Extend server.

Packaging, delivering and analyzing your source code

Once the extension is downloaded and installed, you can now package your source code and run an analysis. The process of packaging, delivering and analyzing your source code is described below:

 Click here to expand...

Unable to render {include} The included page could not be found.

What results can you expect?

Once the analysis/snapshot generation has completed, you can view the results in the normal manner:

In this full-stack example, the front-end is implemented in TypeScript and uses Angular and the back-end is implemented in JavaScript and uses Express and MongoDB. If analyzing a web-application with the back-end implemented in TypeScript, the data-base access would be missing since this extension does not yet support any database access framework.


The following objects are identified:

IconMetamodel nameCode Reference (example)

Typescript Module

Typescript Namespace
namespace A {
    // not exported
    function a() {

Typescript Class
export class TodoStorage implements ... {


Class Initializer
export class TodoStorage implements ... {

field = new Todo();


Typescript Method
export class TodoStorage implements ... {

	// Standard method
	getTodos(): Observable<Todo[]> {

	// Arrow method
	m1 = () => {alert("m1 is called")}     

Typescript Interface
export interface ITodoScope extends... {


Typescript Function
// Named function
function add(x, y) {
    return x + y;

// Anonymous function
function(x, y) { return x + y; };

// Arrow function
var f = (x,y) => { return x + y };

// Anonymous arrow function
(x,y) => x+y;

// Generator function
function* infiniteSequence() {
    var i = 0;
    while(true) {
        yield i++;

Angular Component

Angular Directive

Angular GET http service

Angular POST http service

Angular PUT http service

Angular DELETE http service

HTML5 HTML fragment

ReactJS Application

ReactJS Component

ReactJS Form

Node.js Delete Operation Service
Node.js Get Operation Service
Node.js Post Operation Service
Node.js Put Operation Service

Node.js MongoDB connection

Node.js MongoDB collection

More about Typescript analysis 

 Click here to expand...

Support of arrow functions and methods

Arrow functions which have been introduced in typescript following ES6 standard (also known as ES2015) are supported. Since arrow functions are equivalent to standard functions, the same function objects are created by the analyzer for both standard functions and arrow functions. Arrow functions can also define methods in which case method objects are created by the analyzer. Examples of arrow functions and methods are provided in the Objects section of this documentation.

Support of anonymous functions

For anonymous functions, the analyzer creates function objects named <Anonymous$i> where $i is incremented such that each anonymous function object has a unique fullname.

More about Angular framework analysis

 Click here to expand...

Web Services

Angular web services are supported for both the older Http and new HttpClient (Angular ≥4.3) libraries. The method calls get, post, put, delete, jsonp, and request are recognized.

example web services
// web-service_GET.ts
export class ExampleService {

  constructor(private http: HttpClient) { }
  getData() {
    const url = "";
    return this.http.get(url);

The results of this code snippet are shown below.:

Finally the use of the rxjs/ajax API as web service call is also supported. The different types of web services (GET, POST, PUT, DELELTE) are represented with the same Angular objects we have used above, despite they are not restricted to the Angular framework.

Angular components and HTML fragments

In addition to the basic TypeScript objects the analyzer will generate specific objects and links for the Angular framework. In the following example the analyser creates a TypeScript module object associated to the file and a TypeScript class object associated to the decorated class MyComponentAngular components objects are created when finding special class decorators with name Component. The view of Angular components is described in HTML language and the associated code can be either found in an external .html file or embedded in the decorator metadata. 

Link to html fragments
// example.ts
  selector: 'click-me',
  template: `
    <button (click)="onClickMe()">Click me!</button>
export class MyComponent {

For embedded data, the analyzer creates an HTML5 HTML Fragment belonging to the component, and will automatically generate a use (U) link between the Component and the HTML fragment:

The generation of these links is necessary to describe the higher level call flow abstracted in the Angular framework and thus to retrieve transactions.

Environment variables

In our analysis we consider a production deployment scenario. Thus we mimic the behavior of Angular when overloading behind-the-scenes the variables declared inside the exported environment dictionary defined in environment.ts  by those defined in Global variables might be used to connect different technology layers (via URLs for example), thus retrieving them correctly can be critical for full transactions. Latest versions of Angular allows using many different production files. We only support a single production environment file, the standard When using a no-production environment file a warning message will be logged.

// environment.ts
export const environment = { 
  production: false,
  urls = { .... }   // urls used for development

export const environment = { 
  production: true,
  urls = { .... }   // production urls

More about React and React-Native framework analysis

 Click here to expand...

ReactJS Application

This declaration will create a ReactJS application named App:

    <Provider store={store}>
      <App version={appVersion} />

ReactJS Component

This declaration will create a ReactJS component named Sequence because the class inherits from Component (a class which inherits from PureComponent would also induce the creation of a ReactJS component). A component must contain a render method. The render method is automatically called when the component is refered to in an HTML fragment:

import React, { Component } from 'react';
 class Sequence extends Component {
  shouldComponentUpdate(nextProps) {
    return this.props.positionFrom !== nextProps.positionFrom ||
      this.props.sequence !== nextProps.sequence ||
      this.props.nucleotidesPerRow !== nextProps.nucleotidesPerRow ||
      this.props.rowHeight !== nextProps.rowHeight;
  render() {
    return (
        {, index) =>
            position={this.props.positionFrom + index}

ReactJS Form

This declaration will create a ReactJS form named contact:

import React from 'react'
import { Field, reduxForm } from 'redux-form'

let ContactForm = props => {
  const { handleSubmit } = props
  return (
    <form onSubmit={handleSubmit}>
        <label htmlFor="firstName">First Name</label>
        <Field name="firstName" component="input" type="text" />
        <label htmlFor="lastName">Last Name</label>
        <Field name="lastName" component="input" type="text" />
        <label htmlFor="email">Email</label>
        <Field name="email" component="input" type="email" />
      <button type="submit">Submit</button>

ContactForm = reduxForm({
  // a unique name for the form
  form: 'contact'

HTML fragment

This declaration will create a HTML fragment named render_fragment_1 starting with "<g>" and ending with "</g>". There can be several fragments in any function/method:

render() {
  return (
      {, index) =>
          position={this.props.positionFrom + index}

Links from the ReactJS application

  • A relyon link is created from the application to the HTML fragment of the application.
  • A call link is created from the fragment to the ReactJS component refered to in the fragment
  • A call link is created from the component to the render method of the class representing the component (as render method is automatically called).
  • A call link is created from the render method to the fragment contained inside the render method

Please remember that components are called mainly from html fragments, and render methods are implicitly called from ReactJS components.

Links from a HTML fragment

HTML tags present in HTML fragments are linked to ReactJS components if they exist:


HTML tags present in HTML fragments can also be linked to a Typescript function. HTML fragments are linked to functions or methods when they are represented between { ... }:

  label={formatMessage({ defaultMessage: 'Transfer to...' })}

Node support

More about Express framework analysis

 Click here to expand...

The analysis of the following code will create a Node.js Get Operation named /login with a call link from the operation to the handler function f:

var app = express()
function f(req, res) {
    console.log('login ' + req.url);
    var currentSession = getSessionId(req, res);
app.get('/login', f);

Routers are also supported and the analysis of the following code will create a Node.js Get Operation named /foo1/foo2:

import express from 'express';

var router = express.Router()

// define the about route
router.get('/foo2', function (req, res) {
  res.send('About birds')

var app = express()
app.use('/foo1', router)

More about Express framework analysis

 Click here to expand...

In the following code: 

import * as Sequelize from 'sequelize';

const Model = Sequelize.Model;
class User extends Model {}
  // attributes
  firstName: {
    type: Sequelize.STRING,
    allowNull: false
  lastName: {
    type: Sequelize.STRING
    // allowNull defaults to true
}, {
  modelName: 'user'
  tableName: 'users'
  // options

User.findAll().then(users => {
  console.log("All users:", JSON.stringify(users, null, 4));

the User class defines a model which is linked with the table named 'users' (through the User.init() call). The name of the table is defined by the tableName value which if not defined is set to the pluralized (if freezeTableName is not set to true) value of modelName which is itself set to the class name when it is not explicitly defined. The User.findAll() call then selects elements from that table 'users'.

In this example, this extension creates a useSelect link to the table 'users'.

More about Mongoose framework analysis

See MongoDB support for Node.js source code

More about AWS S3 framework analysis

See AWS S3 support for Node.js source code


Analysis of the TypeScript application will result in the following links:

  • callLink: Created when a method or a function is called. These links connect TypeScript Method and TypeScript Function elements between them.
  • inheritLink: Represents direct inheritance between TypeScript Class and TypeScript Interface objects.


The following rules are shipped with this extension:


  • Connectivity between components through Angular routing is not supported.
  • Passing directly url strings (or string variables referring to urls) as arguments to web-service calls is supported for many use cases. However passing them
    through http.RequestOptions (containing metadata) is work in progress.
  • String concatenations using the operator '+' inside loops does not raise violations currently.
  • The cyclomatic complexity number might appear underestimated in callables containing loops with complex conditional expressions.
  • A single production environment file is supported (see corresponding section above).
  • Use of bind method is not supported and would lead to missing callLinks.
  • Use of Object.freeze method is not supported.
  • React Without JSX is not supported
  • No labels