What's new

See TypeScript and Angular - 1.2 - Release Notes for more information.

Description

This extension provides support for the TypeScript and Angular frameworks.

• TypeScript is a type superset of JavasScript that compiles to plain JavasScript.
• Angular is framework used to create modern web platform capabilities.

In what situation should you install this extension?

If your Web application contains TypeScript and/or Angular source code and you want to view these object types and their links with other objects, then you should install this extension.

Supported versions

The following table displays the list of TypeScript and Angular versions that this extension supports:

Angular

Version	Supported
2
4
5
6
7
8
9
10
11
12

TypeScript

Version	Supported
1.x
2.x
3.x
4.x

React

React-Native

Supported Node.js versions

Version	Support	Comment
v0.x		No longer supported
v4.x		LTS
v5.x		Based on Javascript ES6
v6.x		Based on Javascript ES6
v7.x		Based on Javascript ES6
v8.x
v9.x
v10.x
v11.x
v12.x
v13.x
v14.x

Supported frameworks for Node.js

Library	Comment	Data Access	Web Service	Supported versions
Express	Node.js application framework			4.x
Mongoose	MongoDB access			5.x
Sequelize	Node.js application framework			5.x; 6.x
TypeORM	ORM			0.2.x
Fastify	Node.js server			3.x
Axios	Promise based HTTP client			0.x
Node-mongodb-native	MongoDB access			3.x
nestjs	Node.js application framework			6.x; 7.x
https	Node.js web service
fetch	JavaScript builtin web service
request	HTTP request client 'request'			2.x
request-promise	HTTP request client 'request'			4.x
request-promise-native	HTTP request client 'request'			1.x
request-promise-any	HTTP request client 'request'			1.x
Mongo-client	MongoDB access
Couchdb	Couchdb access
Node-couchdb	Couchdb access
Couchdb-nano	Couchdb access
Marklogic	Marklogic access
my_connection	MySQL access			0.x
pg	PostgreSQL access			7.x; 8.x
oracledb	Oracle Database access			4.x; 5.x
node-sqlserver	MsnodeSQL access			0.x
mssql	MsSQL access			5.x; 6.x
Hapi	Node.js application framework
Sails	Node.js application framework
Loopback	Node.js application framework
Koa	Node.js application framework
Knex	Node.js SQL query builder
Memcached	Storage framework
AWS.DynamoDB	Amazon database access			SDK 2.x
AWS.S3	Amazon storage service			SDK 2.x
AWS.Lambda	Amazon routing solution			Cloudformation, Serverless framework, SAM
AWS.SQS	Amazon Simple Queue Service			SDK 2.x

Supported Emailing frameworks: @sendgrid/mail, nodemailer

Files analyzed

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 (transactions)	Quality and Sizing

CAST AIP compatibility

This extension is compatible with:

CAST AIP release	Supported
8.3.x
8.2.x

Supported DBMS servers

This extension is compatible with the following DBMS servers:

CAST AIP release	CSS/PostgreSQL	Oracle	Microsoft
All supported releases

Prerequisites

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 Angular extension requires that the following other CAST extensions are also installed:

• HTML5/JavaScript

Download and installation instructions

Please see:

• Download an extension
• Install an extension

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:

What results can you expect?

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

Objects

The following objects are identified:

namespace A {
     
    // not exported
    function a() {
    }
}

export class TodoStorage implements ... {


...     
}

export class TodoStorage implements ... {

field = new Todo();

...     
}

export class TodoStorage implements ... {

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


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

export interface ITodoScope extends... {


...     
}

// 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;

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.

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.

// web-service_GET.ts
 
export class ExampleService {

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

The results of this code snippet are shown below.:

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 MyComponent. Angular 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. 

// example.ts
 
@Component({
  selector: 'click-me',
  template: `
    <button (click)="onClickMe()">Click me!</button>
    {{clickMessage}}`
})
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 environment.prod.ts. 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 environment.prod.ts. 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
};

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

Links

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.
• includeLink: Created when importing modules.
• referLink: Link between a module and an imported element

Rules

The following rules are shipped with this extension:

Limitations

• Calls between JavaScript and TypeScript source codes are not supported.

• Call links from field initializations are not fully supported.

• 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.
• A single production environment file is supported (see corresponding section above).