TypeScript and Frameworks - 1.13

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 Data Access Web Service or communication Supported versions
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
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 ❌
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 ✔️
Koa Node.js application framework ❌
Knex Node.js SQL query builder ❌
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
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
TypeORM ORM ✔️ 0.2.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.

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
Technology Function Points (transactions) Quality and Sizing
TypeScript ✔️ ✔️
Angular ✔️ ✔️
React ✔️ ✔️
Express ✔️ ❌
Mongoose ✔️ ❌
Sequelize ✔️ ❌
TypeORM ✔️ ❌

Compatibility

CAST Imaging Core release Supported
8.3.x ✔️

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:

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

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
NodeJS MongoDB connection
NodeJS 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
NodeJS Unknown MongoDB collection
NodeJS Unknown MongoDB connection
TypeScript Redux Action Handler

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:

Release Link
1.13.2-funcrel https://technologies.castsoftware.com/rules?sec=srs_typescript&ref=||1.13.2-funcrel
1.13.1-funcrel https://technologies.castsoftware.com/rules?sec=srs_typescript&ref=||1.13.1-funcrel
1.13.0-funcrel https://technologies.castsoftware.com/rules?sec=srs_typescript&ref=||1.13.0-funcrel
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.

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