TypeScript and Frameworks - 1.16

Extension ID

com.castsoftware.typescript

What’s new

See TypeScript and Frameworks - 1.16 - 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 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
@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.

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

Core release Operating System Supported
8.4.x Microsoft Windows / Linux
8.3.x Microsoft Windows

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

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++;
}
}
Typescript Built-in Object
function a() : void {
var strValue = new String(“text”);
let numValue = new Number(123);
}
Typescript Field
class A {
someField: number = 5;
}
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
NodeJS Delete Operation
NodeJS Get Operation
NodeJS Post Operation
NodeJS Put Operation
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
Node.js SignalR Hub Method
Node.js Azure SignalR Call to Hub Method
Node.js 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
Node.js Azure Function
Node.js Call to Azure Function
Node.js Call to Unknown Azure Function
Node.js CosmosDB Collection
Node.js AWS DynamoDB Table
Node.js GCP Bigtable table
Node.js CosmosDB Unknown Collection
Node.js GCP Unknown Bigtable table
NodeJS Unknown MongoDB collection
NodeJS Unknown MongoDB connection
TypeScript Redux Action Handler
Prisma Configuration
NodeJS Entity
NodeJS Entity Operation

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

Example analysis results

Click to expand...
class A {
  method(){};
}

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

abstract class Animal {};

class Dog extends Animal {
}

interface Animal {};

class Dog implements Animal {
}

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

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

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;
}

class Foo {
    someField: number = 5;

	fooMethod(){
        return this.someField;
    }
}

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.

Rules

The following rules are shipped with this extension:

Release Link
1.16.0-beta3 https://technologies.castsoftware.com/rules?sec=srs_typescript&ref=||1.16.0-beta3external link
1.16.0-beta2 https://technologies.castsoftware.com/rules?sec=srs_typescript&ref=||1.16.0-beta2external link
1.16.0-beta1 https://technologies.castsoftware.com/rules?sec=srs_typescript&ref=||1.16.0-beta1external link

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.
  • 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 JSXexternal link is not supported.
  • The spread operator “…” is not supported.