TypeScript and Frameworks - 1.18

---

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 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
From 1.x to 5.x	✅

Angular

Version	Supported
From 2.x to 19.x	✅

React

Version	Supported
From 15.x to 19.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	✅
v21.x	✅
v22.x	✅
v23.x	✅
v24.x	✅
v25.x	✅

Supported frameworks for Node.js

• ✅ indicates that the framework is currently supported.
• ❌ indicates that the framework is not yet supported.

Library	Comment	Data Access	Web Service or communication	Supported versions
@nestjs/axios	Promise based HTTP client for Nest		✅	from 0.x to 3.x
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
Axios	Promise based HTTP client		✅	0.x; 1.x
@nestjs/axios	Promise based HTTP client		✅	1.x; 2.x; 3.x
vue-axios	Promise based HTTP client		✅	1.x; 2.x; 3.x
Azure Blobs	Azure storage service	✅		@azure/storage-blob; azure-storage
Azure Service Bus	Azure Queue Service		✅	@azure/service-bus; azure-sb
Couchdb	Couchdb access	❌
Couchdb-nano	Couchdb access	❌
cross-fetch	Fetch API for Node		✅	from 0.x to 4.x
Express	Node.js application framework		✅	4.x
Fastify	Node.js server		✅	3.x
fetch	JavaScript builtin web service		✅
GCP BigTable	GCP database access	✅		@google-cloud/bigtable
GCP Cloud Storage	GCP storage service	✅		@google-cloud/storage
Hapi	Node.js application framework	❌
https	Node.js web service		✅
isomorphic-fetch	Fetch API for Node		✅	from 1.x to 3.x
Knex	Node.js SQL query builder	❌
Koa	Node.js application framework	❌
Loopback	Node.js application framework	❌	✅
Marklogic	Marklogic access	❌
Memcached	Storage framework	❌
Mongodb (node-mongodb-native)	MongoDB access	✅		3.x
Mongo-client	MongoDB access	❌
Mongoose	MongoDB access	✅		5.x
mssql	MsSQL access	✅		5.x; 6.x
my_connection	MySQL access	✅		0.x
mysql	MySQL access	✅		0.x
mysql2	MySQL2 access	✅		from 0.8.2 to 3.x
nestjs	Node.js application framework		✅	6.x; 7.x
Node-couchdb	Couchdb access	❌
oracledb	Oracle Database access	✅		4.x; 5.x
pg	PostgreSQL access	✅		7.x; 8.x
prisma	MsSQL, MySQL, PostgreSQL, MongoDB access	✅		from 2.x to 5.x
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
Sails	Node.js application framework	❌	✅	4.x
Sequelize	Node.js application framework	✅		5.x; 6.x
sqlite3	SQLite3 access	✅		from 2.x to 5.x
tedious	Tedious access	✅		from 0.1.3 to 18.x
TypeORM	ORM	✅		0.2.x
whatwg-fetch	Fetch API for Node		✅	from 0.x to 3.x

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.

Transactions

Transaction support is derived from metamodel concepts used to build CAST Imaging Blueprint and structural transaction flows. Entry Points start transactions; Exit Points include both output/boundary concepts and Data Entities manipulated by transactions.

Role	Support	Breakdown
Entry Point ?	✓	File - Presentation Message Queue Subscriber Exposed Web Services
Exit Point ?	✓	Message Queue Publisher Web Services Call ⛁ Unresolved Storage Data Query

Data version: 1.18.0-funcrel

ISO 5055 Structural Rules

Quality support is based on ISO 5055 structural rules available for the selected extension version.

Reliability	Maintainability	Security	Performance Efficiency
✓	✓	✓	✓

Data version: 1.18.0-funcrel

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:

• HTML5/JavaScript
• ReactJS
• Node.js

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 database 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 - see Results.

Objects

For objects created by companion extensions while analyzing TypeScript applications, refer to the HTML5 Objects, ReactJS Objects, and Node.js Objects sections.

The following tables summarize the objects created by the TypeScript and frameworks analyzer.

TypeScript Objects

Angular Objects

React and Objects

AWS Objects

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. Additionally, when a callable (function or method) is passed as an argument in a call, and no existing callLink to that callable is found, a new callLink is created between the current caller and the callable.
• inheritExtendLink: Represents inheritance between Typescript Class and Typescript Class objects.
• inheritImplementLink: Represents inheritance between:
  • Typescript Class and Typescript Interface objects,
  • Typescript Method and Typescript Interface Method objects,
  • Typescript Method and Typescript Abstract Method objects.
• inheritOverrideLink: Represents inheritance between Typescript Method and Typescript Method objects.
• relyonLink: Created when a class or an interface is called. The caller is a callable. The callee can be:
  • Typescript Class,
  • Typescript Interface,
• accessWriteLink: Created when a value is assigned to a field. These links connect:
  • Typescript Function and Typescript Field objects,
  • Typescript Method and Typescript Field objects,
  • Typescript ClassInitializer and Typescript Field objects.
• accessReadLink: Created when a field is called. These links connect:
  • Typescript Function and Typescript Field objects,
  • Typescript Method and Typescript Field objects.

Naming of arrow functions and anonymous functions

This extension assigns names to arrow functions and anonymous functions based on the context in which they are defined, as described in the following table

case	code snippet	name of the function	is the function set as anonymous
function assigned to variable	const a = ()=>{} const b = function(){}	name of variable (a and b in this example)	❌
function assigned to a key of an object	var a = { foofunc: ()=>{}, barfunc: function(){} }	name of the key (foofunc, barfunc in the example)	❌
functions passed as parameter of a call	f(()=>{}, // f_PARAM_1 ()=>{}, // f_PARAM_2 //… ()=>{}) // f_PARAM_{x}	{functionname}_PARAM_{index}	✅
function in a return	function f (){ return ()=>{} }	RETURN	✅
export =	export = () => {} export = function(){}	export	❌
export default	export default ()=>{}	name of the module	❌
in HTML fragment	<TextInput parse={value => value.trim()} />	name of the prop (parse in the example)	❌

Example analysis results

Click to expand...

callLink

class A {
  method(){};
}

function main(param: A)
{
    param.method();
}

inheritExtendLink

abstract class Animal {};

class Dog extends Animal {
}

inheritImplementLink

interface Animal {};

class Dog implements Animal {
}

inheritOverrideLink

class BarClass
{
    barMethod(): void {};
}

class FooClass extends BarClass
{
    barMethod(): void{};
}

relyOnLink

Example 1 (parameter type):

class FooType{};

function fooFunc(param: FooType){

}

Example 2 (return type):

class FooClass{};

function fooFunc() : FooClass{
    var a = new Object();
    return a;
}

Example 3 (variable declaration):

class FooClass {}

function fooFunc() : void {
    let someVariable: FooClass;
}

accessWriteLink

class Foo {
    someField: number = 5;

	fooMethod(){
        return this.someField;
    }
}

accessReadLink

class Foo {
    someField = 5;

    getSomeField(){
        return this.someField;
    }
}

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.

Quality rules

• 1.18.0-funcrel 
• 1.18.0-beta2 
• 1.18.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.

Data sensitivity

This extension is capable of setting a property on NoSQL collection and Cloud File storage objects for the following:

• custom sensitivity
• GDPR
• PCI-DSS

See Data Sensitivity for more information.

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