A Brief Introduction to TypeScript — Part 1

TypeScript is a programming language designed for large-scale JavaScript application development, it has been designed as a typed superset of JavaScript. This means we’ve actually been writing TypeScript this whole time! 🎉

This language allow us to use features from the most recent ECMAScript versions and even some features that are not even in the scope of the standard. This is because when compiled, it produces JavaScript in a cross-platform safe version. TypeScript, currently in the version 2.5, adds features like optional static typing, classes, interfaces, modules, and many others. All of this allow us to use JavaScript from the future right now!

But how does all this sorcery work?

TypeScript needs something that transforms its syntax into standard JavaScript, this is called the transpiler, a type of compiler that takes the source code in a programming language as the input, and transforms it into another programming language.

TypeScript files have the .ts extension, and the transpiler produces the well known .js files.

TypeScript also allows the use of common JavaScript libraries and frameworks, by providing an easy integration with declaration files.

Types

One of the most controversial features of this language are its types, mainly because it seems to be sometimes an initial misconception of how they work and how strict their use really is. In order to clarify this, let’s start by reviewing our understanding of types.

Dynamic Types

JavaScript counts with dynamic types. This means that when you declare a variable, you don’t define the type:

The type will be inferred during execution, this allows a variable to have different types:

This apparently simple and convenient feature, can make the programming and debugging activities way more complex in the long run.

Static Types

This is what makes the whole difference, TypeScript adds optional static types to JavaScript, this means that you can declare a typed variable:

And the type of this variable will be the same in your development process thanks to the type checking at compile time:

The transpiler would alert us of this error with a message like: Type “number” is not assignable to type” string”.

TypeScript supports most of JavaScript types and it also adds some other new datatypes.

The most important thing to notice here is that the static types provided by TypeScript are optional, this means that even the core principle behind the language can be used based on convenience, unlike other static typed languages that enforce the use of types. And this separates TypeScript from other typed languages, for instance Java, where the use of types is very strict.

Even more, in case you decide not to adopt types, the types will be inferred by the transpiler.

Can you see it? I bet you can now!

Now let’s dig into what TypeScript types have to offer:

Boolean

Is similar to the Boolean JavaScript datatype, it represents logical values that can be true or false:

Number

As well as in JavaScript, all numbers are floating point values. TypeScript supports decimal, hexadecimal, octal and binary literals:

String

Like the well known string type in JavaScript, this datatype uses double quotes (”) or single quotes (’) to surround the text. A basic string variable declaration in TypeScript would be:

or:

TypeScript supports the use of template strings, these are multiple lines surrounded by the backtick/backquote (`) character.

You can also have embedded expressions within a template string with the form ${expression}, these allow you to have evaluated operations inside the string, also known as string substitution.

In this scenario, the variable message as the following value:

TypeScript 2.5 says:
Hello!

These features enhance significantly the traditional JavaScript string datatype, and allow us to use modern capabilities that are well known in other programming languages.

Array

A typed array can be declared in two ways. In the first one, the datatype is followed by []:

In the second one, the generic array type is used with Array<elemType>:

Enum

Is a special datatype and it allows a variable to be a set of predefined constants, giving a consecutive numeric value associated with each identifier.

Any and Void

When we don’t know the type of the variable, we can use the type any, this means to mute the type checking but in some scenarios might be necessary, like when we deal with dynamic content or external sources.

The absence of any type at all is represented by void, this is mostly used with functions and interfaces that we will see later.

Other Datatypes

TypeScript 2.x introduces new datatypes like: null, undefined and never. But for now we will avoid them in order to focus just in the common scenarios faced with static types.