TypeScript - An Overview

ArcGIS-REST-JS is an open source library that Esri developers are actively working on that provdes an javascript abstraction interface to ArcGIS REST. I’m interested in both using the library and contributing to it. One initial hurdle… it’s writtin in TypeScript, which I know very little about. Time to roll up my sleeves and start learning. Come join me along the way.

What is TypeScript

TypeScript defines itself as being JavaScript that scales. Unlike the regular interpreted language of JavaScript we are all used to, TypedScript is a compiled language. Once compiled, the output is regular JavaScript. TypeScript introduces concepts that aren’t inherit to regular JavaScript programmers, like strict data types, interfaces, classes, and namespaces. Although these can be implemented by design in JavaScript, they are not an inherit part of most traditional coding concepts for JavaScript developers. However, modern JavaScript (ES2015, ES6) does have support for classes.

Next, let’s go through the tutorial here for a quick introduction to TypeScript. I’m also documenting the steps below.

Installing TypeScript

Since TypeScript code will need to be compiled to JavaScript, we need to download the TypeScript compiler.

$ npm install -g typescript

The -g flag installs the nodejs package globally.

Writing

So far, this looks like regular JavaScript. We are however, using the let block level variable declaration. This is available to modern JS engines, but not older browswers. Let’s see what happens if we compile this code.

$ tsc greeter.ts
$ cat greeter.js

TypeScript compiles greeter.ts into a new file, greeter.js. Cat’ing it out to the console produces the following output:

Notice how the compiler converted the block level let variable to var.

Typed Annotations

Using TypeScript we can start to have some better checking of our code. Placing checks makes building software more robust, and the compiler can tell us ahead of time of there are issues with our code. One thing we can check for is what kind of data type we expect go be passed as a parameter to a function.

In our previous example, we could pass any data type (string, boolean, array, object, etc) as a parameter to our greeter function. Let’s tighten this up by requiring that the parameter of of type string.

Oops, tryint to pass the array let user = [0, 1, 2]; threw an error. The compiler still builds our greeter.js file, but warns us that there are problems.

Interfaces

Interfaces are probably something you haven’t worked with languages like Java or C#. Essentially, an interface is a contract or definition about what something should look like that we can implement over and over again.

For example, a we might establish a person as an interface:

interfacePerson{firstName:string,lastName:string}

Let’s build a simple program that has a function that implements this interface as a parameter:

Modules

Another important feature of TypeScript is the use of modules. If you have been working with modern JavaScript or nodejs, you should be familiar with the concept. Modules allow us to export and import blocks of code between different javascript files.

Conclusion

When you are jumping into a project that uses TypeScript, don’t be overwhelmed. Most of your JavaScript knowldege will carry over just fine. The essentials of TypeScript are easy to learn and their documentation is simple to follow for understanding more advanced features of the language.