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

Extension ID

com.castsoftware.typescript

What's new

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

Description

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
Redux is a state container for JavaScript and TypeScript application
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.
- Fastify is a server web framework.
- Axios is a promise based HTTP client.
- Mongoose is a MongoDB object modeling tool designed to work in an asynchronous environment.
- AWS is a cloud service by Amazon.
- Azure is a cloud service by Microsoft
- Google Cloud Platform is a cloud service by Google
- TypeORM is an Object-Relational Mapping framework.
- Sequelize is a framework for database management.

Note that:

in order to analyze a JavaScript source code which uses Express or Fastify frameworks, 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.

TypeScript

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

Angular

Version	Supported
2
4
5
6
7
8
9
10
11
12
13
14
15
16
17

React

Version	Supported
15.x
16.x

React-Native

Version	Supported
0.x

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
v15.x
v16.x
v17.x
v18.x
v19.x
v20.x

Supported frameworks for Node.js

indicates that the framework is currently supported.
indicates that the framework is not yet supported.

Library	Comment	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	4.x
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; SDK 3.x
AWS.S3	Amazon storage service	SDK 2.x; SDK 3.x
AWS.Lambda	Amazon routing solution	Cloudformation, Serverless framework, SAM (requires com.castsoftware.cloudconfig)
AWS.SNS	Amazon Simple Notification Service	SDK 2.x; SDK 3.x
AWS.SQS	Amazon Simple Queue Service	SDK 2.x; SDK 3.x
Azure Blobs	Azure storage service	@azure/storage-blob; azure-storage
Azure Service Bus	Azure Queue Service	@azure/service-bus; azure-sb
GCP BigTable	GCP database access	@google-cloud/bigtable
GCP Cloud Storage	GCP storage service	@google-cloud/storage

Supported Emailing frameworks: @sendgrid/mail, nodemailer

Files analyzed

Icon(s)	File	Extension	Notes
	TypeScript	.ts, .tsx, .mts, .cts	.mts and .cts files are supported for version of CAIP ≥ 8.3.54

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 (transactions)	Quality and Sizing
TypeScript
Angular
React
Express
Mongoose
Sequelize
TypeORM

AIP Core compatibility

AIP Core 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 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...

Packaging and delivery

Note that the TypeScript and Angular extension does not contain any CAST Delivery Manager Tool discoverers or extractors, therefore, no "TypeScript and Angular" projects will be detected by the CAST Delivery Manager Tool. You therefore have two choices:

manually create an Analysis Unit in the CAST Management Studio.
or download and install the Web Files Discoverer to automatically detect projects in the CAST Delivery Manager and therefore Analysis Units in the CAST Management Studio.

Using the CAST Delivery Manager Tool:

create a new Version
create a new Package for your TypeScript and Angular source code using the Files on your file system option:

Define the root folder of your Application source code:

Run the Package action
Before delivering the source code, check the packaging results:

Without the Web Files Discover

If you are not using the Web Files Discoverer, the following will occur:

the CAST Delivery Manager Tool will not find any "projects" related to the TypeScript and Angular application source code - this is the expected behaviour. However, if your TypeScript and Angular related source code is part of a larger application (for example a JEE application), then other projects may be found during the package action (click to enlarge):

With the Web Files Discoverer

If you are using the Web Files Discoverer, the following will occur:

the CAST Delivery Manager Tool will automatically detect "HTML5 file projects" (see Web Files Discoverer for more technical information about how the discoverer works) related to the TypeScript and Angular application source code. In addition, if your TypeScript and Angular related source code is part of a larger application (for example a JEE application), then other projects may also be found during the package action (click to enlarge):

Deliver the Version

Analyzing

Using the CAST Management Studio:

Accept and deploy the Version in the CAST Management Studio.

Without the Web Files Discover

If you are not using the Web Files Discoverer, the following will occur:

No Analysis Units will be created automatically relating to the TypeScript and Angular source code - this is the expected behaviour. However, if your TypeScript and Angular related source code is part of a larger application (for example a JEE application), then other Analysis Units may be created automatically:

In the Current Version tab, add a new Analysis Unit specifically for your TypeScript and Angular source code, selecting the Add new Universal Analysis Unit option:

Edit the new Analysis Unit and configure in the Source Settings tab:
- a name for the Analysis Unit
- ensure you tick the HTML5/JavaScript option (the TypeScript and Angular extension depends on the HTML5 and JavaScript extension - and therefore the Universal Analyzer language for the AngularJS extension is set as HTML5/JavaScript)
- define the location of the deployed TypeScript and Angular source code (the CAST Management Studio will locate this automatically in the Deployment folder):

Run a test analysis on the Analysis Unit before you generate a new snapshot.

With the Web Files Discoverer

If you are using the Web Files Discoverer, the following will occur:

"HTML5" Analysis Units will be created automatically (see Web Files Discoverer for more technical information about how the discoverer works) related to the TypeScript and Angular application source code. In addition, if your TypeScript and Angular related source code is part of a larger application (for example a JEE application), then other Analysis Units may also be created:

There is nothing further to do, you can now run a test analysis on the Analysis Unit before you generate a new snapshot.

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.

Detailed analysis results per framework

See below for more details about how the extension handles each supported framework:

Objects

The following objects are identified:

Icon	Metamodel name	Code 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 TypeScript GET http service
	Angular POST http service TypeScript POST http service
	Angular PUT http service TypeScript PUT http service
	Angular DELETE http service TypeScript 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
	TypeScript SQL query
	Node.js AWS SQS Publisher Node.js AWS SNS Publisher Node.js Azure Service Bus Publisher
	Node.js AWS SQS Receiver Node.js AWS SNS Subscriber Node.js Azure Service Bus Receiver
	Node.js AWS Unknown SQS Publisher Node.js AWS Unknown SNS Publisher Node.js Azure Unknown Service Bus Publisher
	Node.js AWS Unknown SQS Receiver Node.js AWS Unknown SNS Subscriber Node.js Azure Unknown Service Bus Receiver
	Node.js Call to Lambda
	Node.js Call to unknown Lambda
	NodeJS SignalR Hub Method
	NodeJS Azure SignalR Call to Hub Method
	NodeJS Azure SignalR Call to Unknown Hub Method
	Node.js S3 Bucket Node.js Azure Blob Container
	Node.js S3 Unknown Bucket Node.js Azure Unknown Blob Container
	NodeJS Azure Function
	NodeJS Call to Azure Function
	NodeJS Call to Unknown Azure Function
	NodeJS CosmosDB Collection NodeJS AWS DynamoDB Table NodeJS GCP Bigtable table
	NodeJS CosmosDB Unknown Collection NodeJS GCP Unknown Bigtable table
	TypeScript Redux Action Handler

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.

External libraries

When an import is made to an external library (with the library defined in a package.json file or provided within the node_module folders), an IncludeLink is created between the TypeScript file and the external library which is of the type "HTML5 JavaScript Source Code". This feature requires using a version of com.castsoftware.html5 ≥ 2.1.24-funcrel. For more details about external libraries, check the com.castsoftware.html5 documentation.

Rules

The following rules are shipped with this extension:

1.13.0-beta2	https://technologies.castsoftware.com/rules?sec=srs_typescript&ref=\|\|1.13.0-beta2
1.13.0-beta1	https://technologies.castsoftware.com/rules?sec=srs_typescript&ref=\|\|1.13.0-beta1

The rule "Avoid too many copy-pasted artifacts" depends on com.castsoftware.html5 extension. It will be activated automatically for TypeScript source code when using a version of com.castsoftware.html5 >= 2.0.15-funcrel.

Limitations

Limitations for support of the following frameworks are given in their own section:
- Angular
- NestJS
- TypeORM
- Fastify
- AWS
Calls between JavaScript and TypeScript source codes are supported only in some simple cases.
The use of setters and getters is not supported.
Passing the URL strings directly (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 do 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).
The use of bind method is not supported and would lead to missing callLinks.
The use of Object.freeze method is not supported.
React Without JSX is not supported.
The spread operator "..." is not supported.