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

TypeScript

Version	Supported
1.x
2.x

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
8.1.x
8.0.x
7.3.4 and all higher 7.3.x releases

Supported DBMS servers

This extension is compatible with the following DBMS servers:

CAST AIP release	CSS	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:

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 is 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

Following quality rules are added in this version:

Limitations

CANDIDATES FOR IMPROVEMENT

• 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 initialdizations 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.