Book Image

TypeScript Essentials

By : Christopher Nance
Book Image

TypeScript Essentials

By: Christopher Nance

Overview of this book

Table of Contents (15 chapters)

The advantages of TypeScript

As hardware technology has advanced, so too has the need for more advanced software applications to run not just on one device but on an array of devices. JavaScript is the natural solution to this cross-platform model since almost all modern browsers are capable of running it. Unfortunately, the development paradigm of JavaScript is still dependent upon complex pattern knowledge, and debugging must be done at runtime. Creating large applications in JavaScript can be difficult and structuring the code in a maintainable form is just as difficult. TypeScript, an open source language project started by Microsoft, aims to take JavaScript development to the next level.

JavaScript originally ran as an interpreted language and still does in some places, while modern browsers convert it to machine code during execution. What this means is that the code you write is the code being used at runtime. The advantage of using interpreted languages is that they provide a rapid development model with very little overhead for the developer. They work in cross-platform environments because the code does not need to be compiled for each new device it is deployed to. Interpreted languages aren't without their share of disadvantages either though. In most modern implementations, JavaScript code must be run through a just-in-time compiler first, but even with the help of this compilation, the dynamic typing of the language makes this a difficult task and performance can suffer. On top of the performance hit, JavaScript code must still be deployed before testing can be done. A single syntax error will force you to run the application, track down the source of the problem, fix it, and then run the application again, which wastes a lot of time and can be quite frustrating. Developers like to refactor code as better ways to solve problems arise or new functionality is needed. This refactoring could cause other parts of the application to fail and without performing complete regression testing the problem could be overlooked. To interact with an object you must have intimate knowledge of the type that the object represents. TypeScript aims to solve these problems through a variety of additions to the JavaScript language including a compilation step with a detailed list of errors.

TypeScript is a statically typed compiled language that generates JavaScript code that can be used in cross-platform scenarios. You may be thinking to yourself at this point: why would I want to rewrite all of the applications I already have in this new language? The simple answer is you don't have to. TypeScript is just a superset of JavaScript that gets compiled into plain JavaScript. Although almost all of your existing JavaScript code is valid TypeScript code, certain pieces will need to be adapted to ensure safe compilation; however, they will generally improve the quality of your code. You are free to type your code as strong or as weak as you wish but I highly recommend embracing the typing system completely.

JavaScript was originally created as a scripting language, but as the need for larger applications has grown so has the need for those applications to contain more reusable components and libraries. JavaScript is dynamic enough to act as both a functional language and an object-oriented one through certain design patterns. Object-oriented code is focused on the concept of code reuse and we will be investigating it during our journey into TypeScript. TypeScript provides a rich set of object types and accessibility levels that will seem very familiar to object-oriented developers. Inheritance, encapsulation, and abstraction are all made easier in TypeScript. JavaScript is focused on the value of functions and prototype-based inheritance, which means TypeScript is as well. This can seem strange to anyone used to the idea of class-based inheritance. So through the use of its compiler, TypeScript introduces a number of important concepts from a few different object-oriented languages. These are as follows:

  • Static typing

  • Classes

  • Interfaces

  • Generics

  • Modules

TypeScript adds a static typing layer on top of JavaScript that is then run through a compiler. The compiler parses the TypeScript code and converts it into plain JavaScript. The addition of type safety and code compilation allows errors to be caught sooner and bugs to be eliminated without ever having to deploy a line of code. The introduction of classes and modules makes the development of large scale applications much easier. Including generics and interfaces in the type system allows us to easily create components and libraries that can be used with a variety of objects.

On top of this, TypeScript introduces the idea of public and private members. If an object or function attempts to access a private member of another object the compiler will recognize that the code is invalid and a build error will be generated. This helps implement encapsulation, which is meant to prevent consumers of your TypeScript objects from accessing methods and properties that could be potentially harmful when manipulated outside of the scope of the object itself. Providing accessibility levels helps us limit the scope of possible interactions with an object or even hide it completely from access by other components or libraries.


Keep in mind that the output from the compiler is just JavaScript code and when it is run, any segment of code that has access to the object can manipulate any property of the object.

Writing unit tests has become common practice in software development. Unit tests allow us as developers to refactor and clean code with the safety of knowing that we are not breaking existing functionality. The design decision to include interfaces in the language specification for TypeScript has helped to improve the testability of our code. Writing unit tests help us to verify that small segmented blocks of code always operate as expected. However, as our applications grow we must pass around more complex objects and create more complex functions. This makes testing small segments of code individually more difficult. With the addition of interfaces, it is now easier to mock up objects to be passed around and more tightly control the scope of the tests.

Another key component of JavaScript development is the ability to integrate third-party libraries. It is difficult to find rich web applications these days that don't integrate with jQuery, which has advantages and disadvantages. Due to the open nature of JavaScript development, libraries exist to do almost anything and a lot of them are free to use. Later on we will discuss how TypeScript is already equipped to integrate with these libraries and make the development experience infinitely better. For now, let's focus on getting ready to write our first application in TypeScript.