This extension was previously (in version 1.0, 1.1, and 1.2) known as TypeScript and Angular. |
Summary: This document provides information about the extension providing TypeScript, Angular, React and Node support for Web applications. |
com.castsoftware.typescript
See TypeScript and Frameworks - 1.8 - Release Notes for more information.
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).
Note that:
|
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 |
The following tables display the list of versions that this extension supports. It also gives a list of the supported frameworks for Node.js.
Version | Supported |
---|---|
1.x |
|
2.x | |
3.x | |
4.x |
Version | Supported |
---|---|
2 | |
4 | |
5 | |
6 | |
7 | |
8 | |
9 | |
10 | |
11 | |
12 |
Version | Supported |
---|---|
15.x | |
16.x |
Version | Supported |
---|---|
0.x |
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 |
Library | Comment | Data Access | Web Service | 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 | |||
Loopback | Node.js application framework | |||
Koa | Node.js application framework | |||
Knex | Node.js SQL query builder | |||
Memcached | Storage framework | |||
AWS.S3 | Amazon storage service | SDK 2.x | ||
AWS.Lambda | Amazon routing solution | Cloudformation, Serverless framework, SAM | ||
AWS.SQS | Amazon Simple Queue Service | SDK 2.x |
Supported Emailing frameworks: @sendgrid/mail, nodemailer
Icon(s) | File | Extension |
---|---|---|
TypeScript | .ts | |
TypeScript | .tsx |
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:
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 Points (transactions) | Quality and Sizing | |
---|---|---|
TypeScript | ||
Angular | ||
React | ||
Express | ||
Mongoose | ||
Sequelize | ||
TypeORM |
CAST AIP release | Supported |
---|---|
8.3.x | |
8.2.x |
This extension is compatible with the following DBMS servers:
CAST AIP release | CSS/PostgreSQL | Oracle | Microsoft |
---|---|---|---|
All supported releases |
An installation of any compatible release of CAST AIP (see table above) |
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. |
Please see:
The latest release status of this extension can be seen when downloading it from the CAST Extend server. |
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:
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.
The following objects are identified:
Icon | Metamodel name | Code Reference (example) | |
---|---|---|---|
Typescript Module | |||
Typescript Namespace |
| ||
Typescript Class |
| ||
Class Initializer |
| ||
Typescript Method |
| ||
Typescript Interface |
| ||
Typescript Function |
| ||
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 SQS Receiver | |||
Node.js AWS SQS Unknown Publisher | |||
Node.js AWS SQS Unknown Receiver | |||
Node.js S3 Region | |||
Node.js S3 Bucket | |||
Node.js AWS Lambda Get Operation Service | |||
Node.js AWS Lambda Post Operation Service | |||
Node.js AWS Lambda Put Operation Service | |||
Node.js AWS Lambda Delete Operation Service | |||
Node.js AWS Lambda Any Operation Service | |||
Node.js AWS Lambda Function |
Support of arrow functions and methodsArrow functions which have been introduced in typescript following ES6 standard (also known as ES2015) are supported. Since arrow functions are equivalent to standard functions, the same function objects are created by the analyzer for both standard functions and arrow functions. Arrow functions can also define methods in which case method objects are created by the analyzer. Examples of arrow functions and methods are provided in the Objects section of this documentation. Support of anonymous functionsFor anonymous functions, the analyzer creates function objects named <Anonymous$i> where $i is incremented such that each anonymous function object has a unique fullname. Web ServicesXMLHttpRequestThe analysis of the following code will create a TypeScript GET http service named "foo/url" and a callLink between my_func function and that service :
fetchThe analysis of the following code will create a TypeScript POST http service named "foo/url" and a callLink between my_func function and that service :
Window variableThe JavaScript window variable can be used to pass values such as urls. The windows variable is accessible from all modules. So when analyzing the following modules:
a webservice object is created with the url set through the window variable: |
Web ServicesAngular 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.
The results of this code snippet are shown below.: Finally the use of the rxjs/ajax API as web service call is also supported. The different types of web services (GET, POST, PUT, DELETE) are represented with the same Angular objects we have used above, despite they are not restricted to the Angular framework. Angular components and HTML fragmentsIn addition to the basic TypeScript objects the analyzer will generate specific objects and links for the Angular framework. In the following example, the analyzer creates a TypeScript module object associated with the file and a TypeScript class object associated with the decorated class MyComponent. Angular components objects are created when finding special class decorators with the 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.
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. Environment variablesIn our analysis, we consider a production deployment scenario. Thus we mimic the behavior of Angular when overloading behind-the-scenes the variables declared inside the exported environment dictionary defined in environment.ts by those defined in environment.prod.ts. Global variables might be used to connect different technology layers (via URLs for example), thus retrieving them correctly can be critical for full transactions. The latest versions of Angular allow using many different production files. We only support a single production environment file, the standard environment.prod.ts. When using a no-production environment file a warning message will be logged.
Injection with useValueDependencies are services or objects that a class needs to perform its function. Dependency injection, or DI, is a design pattern in which a class requests dependencies from external sources rather than creating them. For instance, in the following, the Angular module provides an "environment" value.
This value can be accessed by other components through the constructor (note that the Type given to the "env" variable is the same as the one given in the provide key (see previous source code).
Analyzing the previous modules will create a web service with the URL given through injection: Known limitations
|
ReactJS ApplicationThis declaration will create a ReactJS application named App:
ReactJS ComponentThis declaration will create a ReactJS component named Sequence because the class inherits from Component (a class that inherits from PureComponent would also induce the creation of a ReactJS component). A component must contain a render method. The render method is automatically called when the component is referred to in an HTML fragment:
ReactJS FormThis declaration will create a ReactJS form named contact:
HTML fragmentThis declaration will create a HTML fragment named render_fragment_1 starting with "<g>" and ending with "</g>". There can be several fragments in any function/method:
LinksLinks from the ReactJS application
Please remember that components are called mainly from html fragments, and render methods are implicitly called from ReactJS components. Links from a HTML fragmentHTML tags present in HTML fragments are linked to ReactJS components if they exist:
HTML tags present in HTML fragments can also be linked to a Typescript function. HTML fragments are linked to functions or methods when they are represented between { ... }:
|
It is possible to developp custom node packages. Apackageis a file or a directory that is described by a An application can combine mutliple packages. The packages can be built together using npm. npm adds these packages to a node_mudules directory. Note that the analyzer will skip everything which is inside a node_modules directory. Users should provide their custom packages at the root of the analyzed source code. Let's consider a package named my_proj. The root dir contains a package.json file which defines the project name.
Everything which is exported (or re-exported) from the my_proj/src/index.ts can be imported from any project which uses this package.
For instance when an other package uses this package, it can import the my_func function using the name of the package for the import:
When analyzing these source code, a callLink will be created between other_func and my_func: |
When analyzing the following source code, an email object is created with a callLink from the my_send_mail function
Similarly when analyzing the following source code, an email object is created with a callLink from the my_send_mail function:
|
Nodejs comes along with several built-in modules. Here is a description of the support we provide for some of these modules.
This extension currently supports the use of these modules for http requests from the client-side only (i.e. the use of these modules as server is not yet supported). The analysis of the previous code will generate Node.js Get HttpRequest service object which is called by my_request function. A link between my_request function and the anonymous handler function is also added.
|
Nest (NestJS) is a framework for building Node.js server-side applications. Nest provides a level of abstraction above many common Node.js frameworks. The following features provided by nestjs are supported. ControllersA controller's purpose is to receive specific requests for the application. A controller is defined using a classe@ and decorators. The analysis of the following code will create a Node.js Get Operation named cats/all/ with a call link from the operation to the handler method findAll. The URL corresponds to the concatenation of the argument of the @Controller decorator with that of the @Get decorator of the method. The decorator of each method defines the type of the operation
MiddlewaresMiddleware is a function that is called before the route handler. For instance, in the following source code, the logger function will be called before each handler of the CatsController. Our analyzer will create a callLink between the operations defined in the CatsController and the logger.
HTTP moduleNestjs allows performing http requests using the HTTP module. The analysis of the following source code will create a Node.js Get HttpRequest named foo/path/ with a call link from the findAll method to that request:
Known limitationsAll nestjs features which are not documented here are not supported. |
The analysis of the following code will create a Node.js Get Operation named /login with a call link from the operation to the handler function f:
Routers are also supported and the analysis of the following code will create a Node.js Get Operation named /foo1/foo2:
|
The analysis of the following code will create a Node.js Get Operation named /login/{} with a call link from the operation to the handler function f:
Supported fastify methods are: get, put, post, delete, route Known limitations
|
The analysis of the following code will create a Node.js Post HttpRequest named foo/post/ with a call link from my_func to that request:
|
Similar support is provided for request, request-promise, and request-promise-any frameworks.
The analysis of the following code will create a Node.js Put HttpRequest named foo/put/ with a call link from my_func to that request:
|
In the following code:
the User class defines a model which is linked with the table named 'users' (through the User.init() call). The name of the table is defined by the tableName value which if not defined is set to the pluralized (if freezeTableName is not set to true) value of modelName which is itself set to the class name when it is not explicitly defined. The User.findAll() call then selects elements from that table 'users'. In this example, this extension creates a useSelect link to the table 'users': Note that a model can also be defined using method sequelize.define(). |
ConnectionTypeORM can be used both with SQL and NoSQL databases. The database type is set through the connection option type :
The only NoSQL database which is supported by TypeORM is mongodb. A connection object is created by our analyzer only for mongodb databases. The name of the connection is the URL mongodb://localhost/test which is constructed using the host and database values. An Entity is a class that maps to a database table (or collection when using MongoDB):
When a mongodb database is used, for each entity, the extension creates a MongoDB collection object. A parentLink between that collection and the corresponding connection is added. For an SQL connection, the entity will be associated with the SQL table having the same name (if that table exists). Link to table/collectionTypeORM provide several ways to access and/or update a table or collection. One can use an entity manager, a repository, or a query builder. Here is an example with a repository:
Example for a mongodb database: both useSelect and useUpdate links are created between the update_user function and the User entity which belongs to the <Default> connection: Example for a SQL database: both useSelect and useUpdate links are created between the update_user function and the user table. CascadesCascades are supported.
When the profile column of a user instance is saved, if the profile column of that instance was updated with a profile instance, that profile instance is also saved.
In the previous example, a useUpdate link is created between the update_user function and both the user and profile tables/entities: SQL queriesPlain SQL queries can also be carried out using typeORM such as with the following code:
In that example, a TypeScript query object is created and a callLink between the foo method and that query is added. The SQL Analyzer can then link that query with the corresponding table: Known limitationsThe following features are not supported
|
See MongoDB support for Node.js source code.
In 1.3.x, MongoDB Connection and MongoDB Collection objects were added to Typescript Module objects and when a connection (or a collection) is accessed using Mongoose from several files, the analyzer was creating one connection (or collection) object per such file. In order to avoid "added objects" and minimize the number of "deleted objects" when updating from 1.3.x to >=1.4.x a migration is carried out. This migration requires com.castsoftware.internal.platform version >= 0.8.5 to be used.
|
Behavior explanationServerless framework, Serverless Application Model (SAM), and Cloudformation are supported. These are frameworks using *.yml or *.json file to set up AWS environment.
What results can you expect?When analyzing the following source code with a recent enough version of com.castsoftware.nodejs (≥ 2.6.0.beta1):
Assuming that the handler function is a TypeScript function, once the analysis/snapshot generation has completed, you can view the results in the normal manner (for example via CAST Enlighten): Click to enlarge |
Links
Code samplesThis code will create an S3 Bucket named "MyBucket" on an AWS server in region "REGION" and puts an object in it
What results can you expect?Once the analysis/snapshot generation has completed, you can view the results in the normal manner (for example via CAST Enlighten): Analysis of the code sample |
Links
Support for SDKThis code will publish a message into the "SQS_QUEUE_URL" queue:
This code will receive a message from the queue "SQS_QUEUE_URL"
What results can you expect?Once the analysis/snapshot generation has been completed, you can view the results in the standard manner (for example via CAST Enlighten): Click to enlarge When the evaluation of the queue name fails, a Node.js AWS SQS Unknown Publisher (or Receiver) will be created. |
aws-xray encapsulates AWS methods calls in order to provide status and load status. However, the encapsulation did not allow the extension to provide objects and links. With the support of AWS XRay starting in 2.6.0-beta4, these objects and links will be created. Code samplesThis code will encapsulate AWS SDK then create a dynamoDB instance, and a Table instance.
What results can you expect? Once the analysis/snapshot generation has been completed, you can view the results with your favorite tool (for example via CAST Enlighten): Click to enlarge Analysis of the code sample |
The use of AWS.SQS with promises is not supported. For instance, no link would be created between the receiver and the handler function defined in .then() call in the following source code:
this.sqs.receiveMessage(params).promise().then( () => {}) |
This extension supports some libraries offering access to SQL databases. The SQL frameworks analysis is based on the evaluation of the first argument of the "query()" and "execute()" method calls. The first argument is evaluated and if it corresponds to an SQL query, a CAST_TS_Query object is created. In the case where the first argument does not correspond to a SQL query, we evaluate the second argument if is exists. Text only and parameterized SQL queries are supported. This heuristic allows us to support a large number of SQL database frameworks.
In the following code:
In this example, a TypeScript query object is created and a callLink between the getTables method and that query is added. The sql analyzer can then link that query with the corresponding table if the table exists. In the present case, this extension creates a useSelect link to the table 'tables': |
In the following code:
In this example, a TypeScript query object is created and a callLink between the getMostUsedApps method and that query is added. The sql analyzer can then link that query with the corresponding table if the table exists. In the present case, this extension creates a useSelect link to the tables 'track_ussd', 'categories', 'apps': |
In the following code:
In this example, a TypeScript query object is created and a callLink between the anonymous function and that query is added. The sql analyzer can then link that query with the corresponding table if the table exists. In the present case, this extension creates a useDelete link to the table 'TODO': |
In the following code:
In this example, a TypeScript query object is created and a callLink between the anonymous function and that query is added. The sql analyzer can then link that query with the corresponding table if the table exists. In the present case, this extension creates a useSelect link to the table 'authors': |
In the following code:
In this example, a TypeScript query object is created and a callLink between the anonymous function and that query is added. The sql analyzer can then link that query with the corresponding table if the table exists. In the present case, this extension creates a useSelect link to the table 'titles': |
Analysis of the TypeScript application will result in the following links:
The following rules are shipped with this extension:
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. |