Introduction to TypeScript

A few months back, we featured an article about the top programming languages on the rise for 2019. Coming in at a surprising #3 was the JavaScript superset TypeScript. In fact, it’s now the language with the 7th highest number of contributors in GitHub. For many programmers coming from more traditional object-oriented languages, TypeScript lets them write JavaScript the way they would really want to. It’s pure object-oriented with classes and interfaces, and it’s statically typed much like Java or C# for example. Even Angular is written in TypeScript. In short, TypeScript seems like it’s going to have a bright future.

As such, let’s explore TypeScript in a series of articles that will cover all the basics. This TypeScript series is aimed at programmers who already have experience in OOP and want to apply those skills to the JavaScript world.

There are plenty of resources available to help you set up a TypeScript environment, so we won’t get into that here. But, if you want to run the code examples in this series without setting up a TypeScript environment on your local machine, feel free to simply paste them into this TypeScript playground. TypeScript compiles into pure JavaScript code so the examples will have the TypeScript, the JavaScript that it compiles to, and finally the output of the JavaScript code.

For example, the following TypeScript:

var message:string = "I love DiscoverSDK!"
console.log(message)

compiles to the following JavaScript:

var message = "I love DiscoverSDK!";
console.log(message);

which then returns the following output to the console:

I love DiscoverSDK!

Why TypeScript?

JavaScript has been one of the most popular languages out there for a long time now. But once Node.js came onto the scene and brought JavaScript to the back-end, JavaScript’s place as the dominant language of the web was sealed. However, JavaScript is not without its issues.

As JavaScript code grows large, it can get real messy, real quick. Then you have to deal with issues like not having strong type checking or compile-time error checks. All this makes JavaScript a poor choice for enterprise software. TypeScript attempts to address these issues and views itself as JavaScript for application-scale development—it is compiled, strongly typed, and object-oriented.

Some of the notable features of TypeScript are:

• Compiles to plain old JavaScript
• It’s compatible with other JavaScript libraries
• It’s portable across browsers and devices and can run in any environment that JavaScript can run in

Declaration Files

One last note—when you compile TypeScript, you’ll have an option to create a declaration file with the extension .d.ts. This file functions as an interface to the components in the JavaScript. These declaration files are similar to header files found in C or in C++. They provide intellisense for function calls, variables, and types, and support for JavaScript libraries like jQuery, and others.

Basic Elements of a TypeScript Program

TypeScript syntax is nothing that should come as a shock or surprise to you if you’ve programmed in Java or another OOPL before. TypeScript programs are comprised of variables, functions, statements & expressions, modules, and of course comments. In order to examine a bit of TypeScript Syntax, let’s look back at the code example we just used above:

var message:string = "I love DiscoverSDK!"
console.log(message)

It’s pretty straightforward. In the first, line we declare a variable called message and in the second we print that variable out to the console.

Identifiers and Keywords in TypeScript

Identifiers in TypeScript are simply the names given to the members of any class such as a variable, method name, class name, array name and so on. There are rules one must follow when declaring an identifier in TypeScript. An identifier’s name must begin with either an upper or lower case letter, but cannot start with a number. The only two symbols you can use in a TypeScript identifier are the underscore (_)and the question mark (?). Identifiers are case sensitive and cannot contain a space.

Keywords in TypeScript, however, are different from Identifiers. These are words that are responsible for performing a specific task and represent some specific functionality. Here are some of the most common keywords in TypeScript:

Again, nothing should come as much of a shock in this list.

Whitespace, Line Breaks and Misc

TypeScript ignores spaces, tabs, and newlines in your program. You can use spaces, tabs, and newlines as you wish. But be sure to format or indent your program in an orderly and consistent way so that your code will be easily readable.

Also, you should note that TypeScript is case sensitive and semicolons are optional. Comments in TypeScript are // for end of line comments, and /* I’m a comment */ for a comment block.

Object Orientation in TypeScript

The overarching aim of TypeScript was to make JavaScript more like a traditional OOPL such as Java or C#. Here’s an example of some object-oriented code in TypeScript:

class Greeting {
  greet():void {
     console.log("Hello DiscoverSDK :)")
  }
}
var obj = new Greeting();
obj.greet();

In this example we define a class called Greeting. This class has a method called greet(). The method prints the string “Hello DiscoverSDK :)” to the console. Finally, the new keyword creates an object of the class (obj), which invokes the greet() method.

When compiled, it will generate the following code in pure JavaScript.

var Greeting = /** @class */ (function () {
   function Greeting() {
   }
   Greeting.prototype.greet = function () {
       console.log("Hello DiscoverSDK :)");
   };
   return Greeting;
}());
var obj = new Greeting();
obj.greet();

Then, in the console it will print out:

Hello DiscoverSDK :)

That's all for this introductory article to TypeScript. Next time we’ll dive into using the language when we look at Types and Variables. See you then!