TypeScript - the missing link of JavaScript


Posted by : Darko Borojevic - contact me

Basic introduction to TypeScript

Do you still write Vanilla javascript code each time you have to use a little client-side boost in your web app? Have you heard about TypeScript? Building core javascript web applications is not easy. Writing big Vanilla javascript chunks of code tends to become extremly cumbersome, especially with pre-Ecmascript-6 specification and confusing pre-let keyword scope issues. At the beginning in 2012, when it was first launched, it was a part of Microsoft community, but steadily it became an open-source superset of JavaScript that almost every Angular developer or core JavaScript developer recognizes and uses, at least sometimes in their daily workflows. Maintained by Microsoft, this superset comes with an addition of class model object oriented programming, but the best part, is static typing and static types for JavaScript code.

With TypeScript, you can create JavaScript applications for client and server-side if you use it with proper tooling sets. TypeScript has been created to tackle the development of enterprise-level (and Angular SPA) web applications. Typescript, being what it is, and that is a superset of the JavaScript language (this is still just javascript at the end of the day), it can be transcompiled to the latter and all TypeScript fiels can be considered as JavaScript files, with the exception of .ts extension at the end.

TypeScript classes and types

Using a type system that is robust and reusable, TypeScript can push you to maintain clean and disciplined code on a scale that is virtually impossible with core Vanilla javascript, and more similar to Java or core-OOP type languages. Big companies use TypeScript, not because they have romantic feelings towards it, but exactly because of its latter abilities. Google, Asana, Github, to name some of them, and we don't need to talk about the fact that it is the de-facto standard for Angular SPA development. In Typescript, we can define types for our variables and objects, which is in turn recognised by the compiler and the tooling set, and therefore, errors can be controlled and ommited before runtime in a professional development manner. Let's waste no time and create an example base class and one extended class as an example, we will use (and I advise you to do so to) Typescript playground site to run and test code examples:

TypeScript class inheritance example with different member types

typescript class example

Access modifiers

Typescript can use encapsulation for its class members, as any other oop-paradigm programming language. Three optional modifiers are public,protected and private. If you do not use any of these, default is set as public.

The any type

Type any is one of the amazing features of Typescript. It allows you to work with JavaScript code letting you gradually move in and out of type checking during the compilation process itself. What any type gives us, is the ability to describe variables and objects for which types are still unknown to us, while writing the code for the application.

Variable with any type declaration

typescript-any
We can use any type in functions too:

Function with any type argument and return statement

typescript-any-function
A thing to have in mind is that using any, while generic, will cause the function to accept all types for the variable or argument. The information about what that type was when the function returns is lost at compile time, so if we passed in a number, a string, or other, the only information we have is that any type could be returned. To beat this problem, we can use type parameter (big T as seen below), to enable enhanced type checking. The type parameter can be any type, just like any, but it enables the function to catch the T at compile time, and compare it with the return value type of the function and see if both have similar types. This is how we can address the problem of tracking any type at compile time.

typescript-any

Optional parameters

In JavaScript every parameter is optional, and users can leave them undefined. We can use this type of functionality in TypeScript by adding a ? symbol at the end of parameters that we want to be optional. Below, we have transformed a class Vehicle_1 that extends the Car class, in such a way that we give the returnType() function optional boolean parameter. After that, we check that parameter with an elseif loop, and set the value of Functional variable accordingly.

TypeScript class inheritance with optional parameter function

typescript class example 2

Create Vehicle object and call a function with optional parameter set to false

typescript object

Interfaces

Interfaces are one of the biggest advantages of TypeScript. In regular Javascript what you usually do, is write function after function with different variables set as parameters of those functions. Instead of doing it this way, in Typescript, we can create an Interface that will describe object that we pass to the function as a parameter, which in turn keeps our code clean. Function uses this object, but only in accordance with the Interface that describes that object. Typescript will warn us about every missing property of the object and make us write clean and maintainable code even if we don't like it. Furthermore, and this is my personal favorite, we can use optional parameters in Interface as in regular classes or functions which gives us more flexibility but still maintains clean and disciplined javascript code. Let us now change our Car class example a little bit to demonstrate the practicality of TypeScript Interfaces:

TypeScript - using an Interface example

typescript interface example

TypeScript arrays

In TypeScript we can create arrays by declaring an array of certain type, very much like we do in Java. If you try to use push method to insert a new member of type string to a number array for example, TypeScript compiler will throw type is not assignable error (or something similar) and you will have to insert a proper value previously defined by type. Let's change our example to replace interface and its members with arrays:

Arrays example

typescript array example

Tuple

Our TypeScript superset gave us a new javascript data type. Tuple. Essentially, we can call it a very strange array but it can be very practical in specific situations. Tuple functions as an array data type with different member types defined within, and predefined number of indexes. All functions that we use for regular arrays like push() or pop() can be used on a Tuple. Let us again, modify our example a litte bit:

Tuple example

typescript tuple example
Additionally, we can use and define a Tuple as a type, using a type keyword.

Tuple as type example

typescript tuple as a type
Have fun with Typescript.



Do you have a comment?

Your E-mail


Your Message