This extension was previously (in version 1.0, 1.1, and 1.2) known as TypeScript and Angular.
On this page:
Target audience:
Users of the extension providing 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).
Summary: This document provides information about the extension providing TypeScript, Angular, React and Node support for Web applications.
What's new
See TypeScript and Frameworks - 1.3 - 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
- 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 for Node.js.
- Mongoose is a MongoDB object modelling tool designed to work in an asynchronous environment.
- AWS S3 is a storage service by Amazon
Note that:
- in order to analyze a JavaScript source code which uses Express framework, 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 |
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 |
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 | 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.DynamoDB | Amazon database access | SDK 2.x | ||
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
Files analyzed
Icon(s) | File | Extension |
---|---|---|
TypeScript | .ts | |
TypeScript | .tsx |
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
- 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 |
CAST AIP compatibility
CAST AIP 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:
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:
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.
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 | ||
Angular POST http service | ||
Angular PUT http service | ||
Angular 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 |
More about Typescript analysis
More about Angular framework analysis
More about React and React-Native framework analysis
Node support
More about Express framework analysis
More about Express framework analysis
More about Mongoose framework analysis
See MongoDB support for Node.js source code
More about AWS S3 framework analysis
See AWS S3 support for Node.js source code
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.
Rules
The following rules are shipped with this extension:
Limitations
- Calls between JavaScript and TypeScript source codes are not supported.
- Connectivity between components through Angular routing is not supported.
- Use of HttpRequest in Angular is not supported.
- Use of String replace() method is not supported.
- Use of setters and getters is not supported.
- Passing directly url strings (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 does 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).
- Use of bind method is not supported and would lead to missing callLinks.
- Use of Object.freeze method is not supported.
- React Without JSX is not supported