TypeScript Sheriff: How can I use TypeScript in the SAP ecosystem? (Part 2 of 3)
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?
How does TypeScript work?
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).
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.
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.
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.