Sergey Nivens - Fotolia

What Java developers need to know about TypeScript syntax

For Java developers transitioning into JavaScript frameworks, like React and Angular, this TypeScript tutorial on syntax will help make the transition easier.

As internet browsers become more powerful, application development on the client side is trending heavily toward rich web development frameworks, like Ember, Angular and React. And more often than not, TypeScript is the preferred language to use when writing JavaScript.

For a competent Java developer, TypeScript syntax is relatively straightforward. Like Java, TypeScript syntax has mechanisms to define enums, iterative loops, methods, classes and constructors. None of these topics are foreign to anyone who has knowledge of the javac utility. But while the key concepts are all the same, the TypeScript syntax is decidedly different. This can make transitioning from Java to TypeScript a frustrating experience, as tasks once simple in Java can trigger esoteric errors when you compile the corresponding TypeScript.

To make the transition from Java to TypeScript a little bit easier, we've provided a quick TypeScript syntax guide for Java developers here.

The goal of this TypeScript syntax tutorial is not to describe every aspect of the language, but instead to demonstrate how concepts familiar to a Java developer manifest themselves in TypeScript. Most Java developers can write pretty impressive programs using language constructs such as variables, classes, conditional statements, iterative logic and methods.

TypeScript variable declaration syntax

Java has a number of primitive variable types, including double, float, char, boolean and long. With TypeScript, developers only need to concern themselves with number, boolean and string.

For both fractions and whole numbers, TypeScript uses the number type. For text, TypeScript uses the string type, and for true or false values, it uses boolean.

TypeScript syntax 1

Declaring a TypeScript enum

While the Java universe only gained access to the concept of an enum with the Java Development Kit 1.5 release, it has been a TypeScript syntax staple since the language was released.

TypeScript syntax 2

For a Java developer, a confusing aspect of the enum is that, when referenced directly, the output is the zero-based index of the element. To get the actual value of an element of the enum, a reference to the index of the element must be provided. It's somewhat counterintuitive.

TypeScript arrays

Declaring arrays in TypeScript is very similar to Java, with the exception that the name of the array and the associated data type are stated in reverse.

TypeScript syntax 3

Iterative loops

For the most part, TypeScript performs looping by simply utilizing the underlying iterative structures provided by JavaScript. So, TypeScript for "while and do...while loop" is simply JavaScript for "while and do...while loop."

TypeScript syntax 4

The TypeScript let..of iterative loop

There is a special let syntax, however, for looping through collections. For the Java developer learning TypeScript, the syntax is analogous in many ways to the for..each loop, which was introduced with Java 5.

TypeScript syntax 5

Conditional statements in TypeScript

As with iterative loops, TypeScript simply uses the underlying JavaScript syntax for conditional if..else statements, so in this situation, there is no noteworthy deviation between TypeScript and JavaScript.

TypeScript syntax 6

Java methods and TypeScript functions

Java has methods, while TypeScript has functions. The two concepts are identical. It's only the syntax that is different.

JavaScript and TypeScript are much more flexible in terms of syntax than Java, so with TypeScript, you may see methods that don't have a return type or don't have typed method parameters. But for this tutorial, our concern is what a Java method would look like in TypeScript and vice versa.

When compared to TypeScript, the key differences are:

  1. The word function appears in the name of the method.
  2. The return type appears after the arguments.
  3. The name and type of the arguments are reversed when Java methods and TypeScript functions are compared.
TypeScript syntax 7

Declaring Java and TypeScript classes

Both TypeScript and Java embrace the concept of a class in order to implement object-oriented concepts. Similarities between the two include the fact that classes can have methods, constructors and variables, although each of these items are declared in a slightly different way. The following example shows the difference between declaring a simple Java class and a simple TypeScript class.

TypeScript syntax 8

As single-page interface frameworks, like Angular and React, become increasingly popular, it is more important than ever for Java developers to start to hone their JavaScript skills, and TypeScript, which shares many of Java's object-oriented concepts, is the best one for Java developers to learn.

Dig Deeper on Front-end, back-end and middle-tier frameworks

App Architecture
Software Quality
Cloud Computing