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 { |
|
Typescript Class | export class TodoStorage implements … { |
|
Class Initializer | export class TodoStorage implements … { |
|
Typescript Method | export class TodoStorage implements … { |
|
Typescript Interface | export interface ITodoScope extends… { |
|
Typescript Function | // Named function |
|
Typescript Built-in Object | function a() : void { |
|
Typescript Field | class A { |
|
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 |
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.
- 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...
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.
Rules
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.
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 JSX is not supported.
- The spread operator “…” is not supported.