Getting Started With TypeScript
Written by Mike James   
Thursday, 12 April 2018
Article Index
Getting Started With TypeScript
The Type System
Interface Inheritance

TypeScript is probably the most successful JavaScript replacement. While JavaScript has evolved since TypeScript was first introduced to "improve" it, there are still lots of reasons for using TypeScript. As long as you know JavaScript, TypeScript is an easy and gradual upgrade.

A Programmers Guide To Languages

languagecover

Contents

  1. Octave 
  2. Scratch 2 *revised
  3. Node.js *revised
  4. App Inventor 2 *revised
  5. Getting Started With .NET IL
  6. NetLogo
  7. Small Basic  *revised
  8. TypeScript *revised
  9. Google Apps Script
  10. Python
  11. Google's Go
  12. Ruby: Object-Oriented Approach
               A Functional Language

TypeScript from Anders Hejlsberg

TypeScript is a JavaScript extension invented by Anders Hejlsberg who has a history of inventing languages which have an impact on the programming community - TurboPascal, Delphi, C# and now TypeScript.

For this reason alone the new language deserves your consideration even if you finally decided that you can live without it.

So let's take a programmer's look at TypeScript. It is assumed that you know JavaScript and know something about using Visual Studio. It also assumes that you are interested in what makes a language a good language.

Before we get into the details of the language, we take a small detour into using it in Visual Studio. If you are only interested in the language then skip this section.

Visual Studio

Getting started is fairly easy. You can just download the compiler and use any text editor you like but the easiest way to get to know TypeScript is via Visual Studio and the special addin. The addin is automatically included in Visual Studio 2017 and later and works in the free Community edition. You can also use Visual Studio Code or just an editor.

https://www.typescriptlang.org/#download-links

 If you want to try it with an earlier version then its the command line compiler and a text editor for you or point your browser at the TypeScript Playground where you can try small chunks of code out.

 play

As long as the TypeScript SDK and addin are install you should see  a new project type HTML Application with TypeScript in the TypeScript section.

project

 

You can create Node.js TypeScript projects and ones that use Azure for deployment.

If you start a new HTML TypeScript project you will discover that it creates a TypeScript file called app.ts and an HTML file called index.htm which loads the JavaScript file app.js.

The idea is that when you build the project all .ts files are complied to .js files of the same name which you use in the HTML part of the project.

Three Key Language Ideas

For a new language, TypeScript doesn't add much to JavaScript - it is a very minimal extension. Its creator, Anders Hejlsberg, is well known for advocating strongly typed languages and TypeScript is an attempt to impose some of this discipline on what you might see as the indiscipline of JavaScript. Before going on to explain the solution lets take a quick look at the problem.

JavaScript is a weakly typed dynamic llanguage. This means that you can create objects at runtime and methods and properties to them whenever you like. This means that objects don't have a type and there is no type hierarchy of the sort you get with a class based strongly typed language like Java or C#. In addition variables don't have a type and this means that any variable can reference any object and this makes type checking at compile time much more difficult.

This is what many programmers converting to JavaScript find so terrible about it - objects are dynamic things which change what they can do as the program runs. It is arguable that once you understand this JavaScript becomes a much more powerful language than class based static languages and with a few good techniques it can be safe and maintainable. If you are of this opinion, then TypeScript is in for a rough ride because it aims to add type into the language.

There are three basic ways it does this.

  • The first is that it introduces the module which allows you to encapsulate code in such a way that name collisions are avoided. It is essentially a cross between encapsulation and a namespace.

  • The second is a standard class and inheritance based way of creating objects. You can define classes that inherit from other classes and instantiated objects using them.

  • The third and final is the most radical. The type system that TypeScript introduces is partly based on type inference and some manual, optional, type annotation but the key introduction is the interface. TypeScript uses the interface to define an objects type. The interface creates a type system for objects.

A quick summary of the three key ideas makes it clear that this is a very small change to JavaScript and that the class and module facilities are based on the EcmaScript 5. It is arguable that TypeScript is less necessary now that JavaScript has been modernised in ES 5, ES2015 and so on. However JavaScript still isn't a typed language and this is still the main advantage of TypeScript.

Notice that you wont find any great language additions to give you amazing new powers - everything else is left as it was in JavaScript and not much else is added.

Perhaps the fourth key idea, although it isn't exactly a language feature, is that all of JavaScript is TypeScript. You can write any valid JavaScript and expect it to work. This is both a huge strength and a fundamental weakness of TypeScript as a JavaScript object can mutate into something else at runtime the compile time type checking imposed by TypeScript isn't 100% secure.

JavaScript is a tamed a little by TypeScript but it can still get out of the box if it feels the need to.

As TypeScript IS JavaScript it is still possible to make a mess of things.

Another key idea is that the translation from TypeScript to JavaScript should be as understandable as possible. For this reason the class and module constructs translate to well known JavaScript idioms. In short if you want to use TypeScript's approach to module and class in pure JavaScript you can and many programmers already do. All of the type information is stripped out of the compiled JavaScript code and the type checking is a compile time only feature. 

Now lets take a closer look at each of the features.

Of the key ideas the module and the class are perhaps the simplest and hence least interesting but we need to know about them to describe the type system  so let's begin with the module and then look at class.

If you are happy with the ideas of module and class simply jump to the section in the type system which is the real meat of TypeScript.

 

logots

The Module

The TypeScript module is nothing new to the JavaScript programmer. The simplest module is something like:

module MyModule{
 export var myVariable;

}

You can define variables, objects, classes, interfaces and functions within the module. Everything that you define is created in JavaScript within an encapsulating object with the same name as the module. So to access myVariable you would have to write

MyModule.myVariable

Anything that you don't export is private to the module and cannot be accessed by the external world. 

The module is implemented in JavaScript as an anonymous function that is executed at once to create an object that contains all of the modules members. Modules can extend existing modules of the same name.  Modules can be internal, i.e. defined in the same file, or external in another file of the same name. The import MyModule instruction loads MyModule.js.

There is a lot more to say about the fine detail of modules but essentially what we have is the CommonJS, AMD or the namespace idiom in JavaScript made slightly easier to use.



Last Updated ( Thursday, 12 April 2018 )