Skip to content

Using Typescript With React Native

At Aditi, we are constantly developing new mobile applications and evaluating new technologies. As companies demand increasingly sophisticated applications, it is important to reduce the auxiliary complexity introduced by the choice of tools/techniques/technologies (e.g., the entire JavaScript tool-chain).

One way to reduce auxiliary complexity is to switch the development language from JavaScript to TypeScript. Our empirical observations correlate TypeScript with robust, easy-to-maintain applications and a corresponding improvement in developer productivity.

TypeScript is a programming language created by Microsoft to help developers build and maintain enterprise-grade JavaScript applications. Maintainability is vital for hybrid mobile applications (e.g. those using React Native), as complexity is inherently greater than that of their web counterparts due to cross-platform dependencies.

Why are TypeScript applications easier to maintain?

Strongly-typed languages such as C, C#, Java, Python, etc. simplify development by eliminating entire classes of programming errors. JavaScript being weakly-typed creates opportunities for programming errors (see example below). TypeScript brings variable typing to the world of JavaScript (through transpiling, described below). Variable typing helps programmers write robust and maintainable code.

JavaScript vs TypeScript example:

This is a stark contrast to JavaScript where one can set a variable to the number `5` and then set it equal to the word `boy` without any issues whatsoever. While this functionality has it’s uses in preventing websites from crashing from a single bad JSON object, this could lead to some unexpected consequences such as `15-5555` instead of `555-5555` and functions spitting out `NaN`s.

This issue is further compounded as modern projects are significantly larger than their predecessors. It is not uncommon to see websites and mobile projects hit hundreds of thousands of lines of code if not millions and tens of thousands of functions. At this point trying to track down that issue could take days, time which could otherwise be spent in more useful ways such as adding new functionality or improving existing tools/processes.

For React Native apps, this issue is even more crucial as the JavaScript portion of the code eventually has to interact with the native iOS or Android code.  Unlike JavaScript, Objective-C, Swift, Java, and Kotlin are type-aware and raise compilation-errors when variables are mistyped.

TypeScript is optionally type-aware so variables and function parameters types can be specified.  When a type is specified, it forces the further usages of those variables or function arguments to be of that particular type. So, if a developer inadvertently assigns an incorrect type, the compiler will flag this during the build phase.  This enables the developer to identify and fix the issue during compile-time instead of during run-time (where the cost to fix an issue is disproportionately higher).

Why is TypeScript not more popular?

Seasoned developers recognize that TypeScript is a vast improvement over JavaScript. So why is TypeScript not more popular? Among other reasons is the developer belief that TypeScript takes more time to write than JavaScript.

It is true that assigning types to variables and arguments takes extra effort. In the long run, however, the effort pays off in terms of simplified maintenance.

Before we dive into the next reason, a discussion of transpilers is needed.  Like a compiler, a transpiler converts code from one form to another.  However, unlike compliers which convert human readable code into machine code, a transpiler converts code from one human readable format into another human readable format. The TypeScript transpiling toolchain enables developers to take advantage of the JavaScript ecosystem (browsers, engines, libraries, frameworks and tool-kits).

Until recently React Native did not officially support a TypeScript transpiler. This left a developer with two options:

  • Use an unofficial TypeScript transpiler (slow and difficult to setup), or
  • Use the beta version of Babel 7 (usable, but with tricky edge-cases)

Neither option presented a compelling case to adopt TypeScript for React Native. The outlook for TypeScript in 2019 is much better though. Babel 7 has been tagged stable for some time now and portions of React Native are now actively developed using TypeScript. This would be a good time to adopt TypeScript for React Native as the primary language/framework for mobile development.

We believe more developers and organizations will recognize the benefits of TypeScript and expect to see wide adoption of this technology.