TypeScript Sheriff: How can I use TypeScript in the SAP ecosystem? (Part 2 of 3)

TLDR: TypeScript is nothing more than JavaScript plus types. TypeScript files with a .ts extension are transpiled to plain JavaScript files with a .js extension, so that they will be understood by a JavaScript runtime. We can use TypeScript wherever we can use JavaScript, and it’s well supported in the SAP ecosystem.

Now that we have covered why we use TypeScript (see Part 1), lets move on to explaining what it is and how we can use it.

What is TypeScript?

As explained in the documentation, TypeScript is simply JavaScript plus types.  All of JavaScript is in TypeScript.  If you are familiar with JavaScript then you will be instantly familiar with TypeScript.

TypeScript is JavaScript plus types

How does TypeScript work?

If you have built front-end apps using JavaScript (e.g. SAP UI5) you will be familiar with minifying your code. The code we write gets transformed before it runs in the browser. This is just for performance reasons (to speed download). Variable names are shortened, whitespace is removed and files are combined.

With TypeScript we just add a predecessor step. The code we write gets transpiled by the TypeScript compiler before minification. The types, which the runtime doesn’t understand, are removed.

In the example above we’ve added types to the function signature.  We’ve made it clear that the arguments passed in must be of type string/string/Date (see inside parenthesis) and that a string will be returned (see immediately following parenthesis).

As you can see from the diagram, TypeScript files are distinguished by the extension .ts (rather than .js).  If you open these files they will look just like JavaScript, apart from the types you find here and there.  The transpilation step transforms .ts files to .js files, removing the types.  It is the .js files which can be interpreted by the JavaScript runtime.

Happily, when testing we can still debug the original TypeScript source code (.ts), because these files are still available (to the client browser) for download when in debug mode.

NB this example is for front-end code. With back-end code (e.g. with Node.js running on the server) we don’t need the minification step because the code doesn’t need to be downloaded to a client.

Where can we use TypeScript in an SAP context?

Consider the following scenario.  We are extending the standard functionality of our S/4HANA system.  We are using SAP BTP to build a side-by-side extension because we want to keep our ‘core clean’ and enable easy upgrades of S/4HANA.

Where can we use TypeScript in this scenario? Everywhere of course!  Out of the box we get TypeScript support from

• The SAP Cloud Application Programming Model (a.k.a. CAP) which we can use to provision OData services for the back-end of our application
• SAP UI5, which we can use to build the user interface for the front-end of our application (consuming the CAP services)
• The SAP Cloud SDK which makes it easy for us to consume external services (APIs), such as those provided by S/4HANA

At the time of writing these frameworks differ slightly in the level of support they provide for TypeScript. The Cloud SDK, for example, already generates OData Clients in TypeScript form (.ts files) by default. UI5 provides types for controls and modules and the tooling supports TypeScript too.

CAP does provide standard types (e.g. for Request) and generating types for the OData services you create is a new feature (see @cap-js/cds-typer). It’s aimed at those using JavaScript (not TypeScript) and in its current form there are some compatibility issues with TypeScript (running cds-ts commands can overwrite the files generated by cds-typer). I would prefer that cds-typer would support TypeScript so that we can simply say ‘the SAP BTP stack has full TypeScript support’ without need of caveats.

NB I have shown an SAP-only stack here, but of course I could use non-SAP tools and frameworks too.  For example I could build the front-end with React and use TypeScript with that.

Where can I find all the information I need to get started?

The official TypeScript documentation is a great place to begin your learning. It’s comprehensive, gives a good introduction and can serve as a reference once you get going.

For UI5 there is a central UI5 vs. TypeScript page. I also recommend Peter Muessig’s blog Getting Started with TypeScript for UI5 Application Development as an introduction.

Andreas Kunz has put together a comprehensive UI5 TypeScript Tutorial based on a recent workshop at UI5Con.  See also the video presentation.

See Using TypeScript for the lowdown on using TypeScript with CAP.

There isn’t a specific page in the SAP Cloud SDK on using TypeScript (that I can find), however support is good and TypeScript is referenced across the documentation.

SAP have created a full-stack reference app that uses TypeScript.  I found it very useful to see what a working TypeScript app looks like.

Andreas Kunz has investigated the easiest ways to generate types from OData metadata in his blog post UI5 and TypeScript: how to generate types for OData services. If you have entities in your services with a non-trivial number of properties then you might want to generate interfaces to use in your code (rather than just creating them manually), and CAP doesn’t currently do this for you.

Now read Part 3 of this series, to get some tips to help you get started with TypeScript.

So, be a good citizen and use types with your JavaScript. That way you can stay on side with the TypeScript Sheriff…

The TypeScript Sheriff