Skip to main content
Redhat Developers  Logo
  • Products

    Featured

    • Red Hat Enterprise Linux
      Red Hat Enterprise Linux Icon
    • Red Hat OpenShift AI
      Red Hat OpenShift AI
    • Red Hat Enterprise Linux AI
      Linux icon inside of a brain
    • Image mode for Red Hat Enterprise Linux
      RHEL image mode
    • Red Hat OpenShift
      Openshift icon
    • Red Hat Ansible Automation Platform
      Ansible icon
    • Red Hat Developer Hub
      Developer Hub
    • View All Red Hat Products
    • Linux

      • Red Hat Enterprise Linux
      • Image mode for Red Hat Enterprise Linux
      • Red Hat Universal Base Images (UBI)
    • Java runtimes & frameworks

      • JBoss Enterprise Application Platform
      • Red Hat build of OpenJDK
    • Kubernetes

      • Red Hat OpenShift
      • Microsoft Azure Red Hat OpenShift
      • Red Hat OpenShift Virtualization
      • Red Hat OpenShift Lightspeed
    • Integration & App Connectivity

      • Red Hat Build of Apache Camel
      • Red Hat Service Interconnect
      • Red Hat Connectivity Link
    • AI/ML

      • Red Hat OpenShift AI
      • Red Hat Enterprise Linux AI
    • Automation

      • Red Hat Ansible Automation Platform
      • Red Hat Ansible Lightspeed
    • Developer tools

      • Red Hat Trusted Software Supply Chain
      • Podman Desktop
      • Red Hat OpenShift Dev Spaces
    • Developer Sandbox

      Developer Sandbox
      Try Red Hat products and technologies without setup or configuration fees for 30 days with this shared Openshift and Kubernetes cluster.
    • Try at no cost
  • Technologies

    Featured

    • AI/ML
      AI/ML Icon
    • Linux
      Linux Icon
    • Kubernetes
      Cloud icon
    • Automation
      Automation Icon showing arrows moving in a circle around a gear
    • View All Technologies
    • Programming Languages & Frameworks

      • Java
      • Python
      • JavaScript
    • System Design & Architecture

      • Red Hat architecture and design patterns
      • Microservices
      • Event-Driven Architecture
      • Databases
    • Developer Productivity

      • Developer productivity
      • Developer Tools
      • GitOps
    • Secure Development & Architectures

      • Security
      • Secure coding
    • Platform Engineering

      • DevOps
      • DevSecOps
      • Ansible automation for applications and services
    • Automated Data Processing

      • AI/ML
      • Data Science
      • Apache Kafka on Kubernetes
      • View All Technologies
    • Start exploring in the Developer Sandbox for free

      sandbox graphic
      Try Red Hat's products and technologies without setup or configuration.
    • Try at no cost
  • Learn

    Featured

    • Kubernetes & Cloud Native
      Openshift icon
    • Linux
      Rhel icon
    • Automation
      Ansible cloud icon
    • Java
      Java icon
    • AI/ML
      AI/ML Icon
    • View All Learning Resources

    E-Books

    • GitOps Cookbook
    • Podman in Action
    • Kubernetes Operators
    • The Path to GitOps
    • View All E-books

    Cheat Sheets

    • Linux Commands
    • Bash Commands
    • Git
    • systemd Commands
    • View All Cheat Sheets

    Documentation

    • API Catalog
    • Product Documentation
    • Legacy Documentation
    • Red Hat Learning

      Learning image
      Boost your technical skills to expert-level with the help of interactive lessons offered by various Red Hat Learning programs.
    • Explore Red Hat Learning
  • Developer Sandbox

    Developer Sandbox

    • Access Red Hat’s products and technologies without setup or configuration, and start developing quicker than ever before with our new, no-cost sandbox environments.
    • Explore Developer Sandbox

    Featured Developer Sandbox activities

    • Get started with your Developer Sandbox
    • OpenShift virtualization and application modernization using the Developer Sandbox
    • Explore all Developer Sandbox activities

    Ready to start developing apps?

    • Try at no cost
  • Blog
  • Events
  • Videos

Developing Mobile Applications using TypeScript on Red Hat Mobile Application Platform

July 5, 2017
Evan Shortiss
Related products:
Red Hat build of Node.js

Share:

    As of its release 2.19, the Red Hat Mobile JavaScript Client SDK contains a TypeScript definition file. By providing type definitions our JavaScript SDK can easily be used in applications developed using TypeScript. As a developer with a few years of JavaScript experience, I was initially skeptical of TypeScript, but after using it for a short period, I'm not sure how I ever managed without it! In this post, I take a look at the benefits TypeScript offers and demonstrate how you can get up and running with an application written in TypeScript on the Red Hat Mobile Application Platform.

    TypeScript

    If you're not familiar with TypeScript then it might be best to head over to the project website and read a little about it, but to summarize, TypeScript is a superset of JavaScript that compiles down to regular JavaScript code. Since it compiles to JavaScript it will run in virtually any JavaScript platform - even older web browsers! For those who are curious as to the benefits of writing TypeScript instead of regular JavaScript here's a quick summary:

    • Static typing. This improves development speed due to better readability, clear type information, and excellent IntelliSense.
    • Compilation. Since TypeScript is compiled to JavaScript, many errors that could easily be missed with JavaScript are caught by the compiler before runtime.
    • Extended language features. You can use modern JavaScript language features that would otherwise require browser workarounds.
    • Ease of use. Since TypeScript is a superset of JavaScript, it immediately feels familiar to JavaScript developers and is an easier transition for developers who aren't used to JavaScript.

    Let's see how the following JavaScript code could be improved using TypeScript:

    // return the sum of two numbers
    function add (x, y) {
      return x + y;
    }

    This function should return the sum of two numbers passed to it, but there's nothing to stop a developer from accidentally passing an Object like so:

    // incorrectly try to use this function to merge two objects
    add({firstname: 'red'}, {lastname" hat'});
    

    If you're familiar with JavaScript you're aware that this code would actually run and return the result "[object Object][object Object]". Ideally, we'd like these issues to be captured before runtime - this is where TypeScript can help us:

    // We specify the type of inputs using TypeScript syntax
    // We don't specify the return type of this function since the TypeScript
    // engine can use type inference to figure it out!
    function add (x: number, y: number) {
      return x + y;
    }

    If a developer attempted to pass anything other than a number to this function the TypeScript compiler would throw an error thus avoiding wasted time debugging a simple developer error.

    The GIF below is an example of a TypeScript enabled editor (Visual Studio Code) providing documentation and warnings for the RHMAP Client SDK as I type:

    TypeScript-Intellisense

    Getting Started with TypeScript on RHMAP

    To help you get started we've created a new version of our standard Hello World HTML5 Cordova application using TypeScript. We've also ported it to React to further demonstrate how you can create a structured, statically typed Cordova Application. You can find the source code for this application in this repository on GitHub.

    Those of you who've been observant of the code in the linked GitHub repository might have noticed that the www/ folder that typically contains JavaScript files for Cordova applications contains only CSS, JSON, and HTML. The reason for this is that the JavaScript files can be easily generated so we've deliberately chosen to not commit them to the repository via a rule in our .gitignore. You might now be wondering how Red Hat Mobile Application Platform will know how to generate the JavaScript files. The solution is simple but very powerful - it will try calling an install script that can be specified in our package.json. This feature provides the ability to call tools we need such as the TypeScript compiler and browserify.

    Let's go ahead and get our template imported into your Red Hat Mobile Application Platform instance. Open a web browser and navigate to your domain. Select an existing project or create a new blank project by choosing "Blank" from the options on the left of the Create screen shown:

    create-project

    Once the Project has been created, add a new Client Application to it. Client Applications are Applications that will run on a mobile device or in a web browser. To add a Client Application click the plus icon in the corner of the "Apps" pane:

    project-created

    When adding the Client Application choose "Import Existing Application" and when prompted to select a type to choose "Cordova":

    create-client

    Now choose the "Public Git Repository" option and when prompted for a repository URL enter https://github.com/evanshortiss/rhmap-hello-world-typescript-react and choose the master branch as demonstrated:

    create-client-import

    Once the import is complete, you can return to the Project screen and view it. From the Project screen, you will need to add a Cloud Application by clicking the plus icon similar to how you added the Client Application:

    client-created

    Select our regular "Cloud App" template and give it a name:

    create-cloud

    Once the Cloud Application is created Deploy it, then navigate back to your Client Application. Go to the "Build" screen in your Client Application to create an application binary for the platform of your choice. Remember, iOS will require you to upload valid iOS developer credentials, but Android Debug builds can be done without any special requirements:

    build-client

    Once the build process is complete, you will be presented with a QR code that you can scan on a mobile device to install our application. Here's an example of it working on an Android tablet. Enter your name in the text box, then tap the "Say Hello From the Cloud" button to have it echoed back.

    rhmpa-typescript-hello-world


    Red Hat Mobile Application Platform is available for download, and you can read more at Red Hat Mobile Application Platform.

    Last updated: October 31, 2023

    Recent Posts

    • How to run AI models in cloud development environments

    • How Trilio secures OpenShift virtual machines and containers

    • How to implement observability with Node.js and Llama Stack

    • How to encrypt RHEL images for Azure confidential VMs

    • How to manage RHEL virtual machines with Podman Desktop

    Red Hat Developers logo LinkedIn YouTube Twitter Facebook

    Products

    • Red Hat Enterprise Linux
    • Red Hat OpenShift
    • Red Hat Ansible Automation Platform

    Build

    • Developer Sandbox
    • Developer Tools
    • Interactive Tutorials
    • API Catalog

    Quicklinks

    • Learning Resources
    • E-books
    • Cheat Sheets
    • Blog
    • Events
    • Newsletter

    Communicate

    • About us
    • Contact sales
    • Find a partner
    • Report a website issue
    • Site Status Dashboard
    • Report a security problem

    RED HAT DEVELOPER

    Build here. Go anywhere.

    We serve the builders. The problem solvers who create careers with code.

    Join us if you’re a developer, software engineer, web designer, front-end designer, UX designer, computer scientist, architect, tester, product manager, project manager or team lead.

    Sign me up

    Red Hat legal and privacy links

    • About Red Hat
    • Jobs
    • Events
    • Locations
    • Contact Red Hat
    • Red Hat Blog
    • Inclusion at Red Hat
    • Cool Stuff Store
    • Red Hat Summit

    Red Hat legal and privacy links

    • Privacy statement
    • Terms of use
    • All policies and guidelines
    • Digital accessibility

    Report a website issue