What's new

See TypeScript and Angular - 1.1.0 - What's new 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 tables display the list of versions that this extension supports. It also gives a list of the supported frameworks for Node.js.

TypeScript

Angular

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

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 ... {


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

export interface ITodoScope extends... {


...     
}

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

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

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.

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.

• Partial support for missing semi-colons in statement endings. We note that systematic semi-colon omission is considered as a bad practice both in Typescript and JavaScript.

• Call links from field initializations are not fully supported.
• Connectivity between components through Angular routing in is not supported.
• Evaluation of Url's in web service calls are supported at module level. However, incorporation of metadata passed through parameters is work in progress.