Introduction to TypeScript Language

What is Typescript?

Typescript is a superset of Javasript, created with the goal of making the language more reliable and scalable. It is developed using the same syntax and semantics as Javascript, enabling developers to use existing Javascript code. A language is a superset of another if it contains all of the features of a given language and has been expanded or enhanced to include other features as well. It can be called from from Javascript and incorporates popuplar Javascript libraries. This also means that Javascript is Typescript. All *.js files can be renamed *.ts and compiled [5].

This language is typed, enabling developers to statically verify code. A type, also known as a data type, identifies and classifies various types of data (e.g. Integers, String, Floats, and Booleans). Type checking is the process of verifying the limitations related to various types. In Typescript’s case, type checking occurs at compile time, and is therefore static. This is in opposition to dynamic type verification which occurs at runtime. An advantage of type checking is that the compiled code executes much more quickly, as the compiler knows the exact data types that are in use. [3, 5]

The typescript compiler is a source-to-source code compiler, known as a transpiler. It creates a copy of the *.ts file in javascript.

It is an open-source language that has been maintained by Microsoft since it’s creation in 2012. It’s widespread use as a core programming language is said to have occured due to it’s utilisation as a core programming language in Angular 2.

This language compiles to Javascript, enabling it to run on any browser. [5]

Getting started with Typescript

In modern programming, many different technologies are used concurrently in order to streamline coding practices. While this guide’s main purpose is to introduce developers to the Typescript language, this installation portion introduces the installation of several other utilities that demonstrate the employment of Typescript in application development.

Node.js is a cross-platform runtime environment for serverside Javascript—allowing Javascript to run without browser support. [2]

Typescript and many other programming technologies can be installed via npm. Npm is a package share and reuse utility that can be used to install various packages.

Using Node.js

Npm is distributed on Node.js, an open source server environment that uses Javascript. If one uses Node.js to build a project, npm is also installed. Node.js has the following functionalities :

generate dynamic page content
create, open, read, write, delete, and close files on the server
collect form data
add, delete, and modify data in a database.

One way to install Node.js is via Homebrew, yet another package manager for Mac. The advantages of using Homebrew to install Node.js over using the installer available on the Node.js website is that Homebrew takes a safer approach by not requiring administrator-only access to install NodeJS, therefore making it a safer approach. [6]

Homebrew for OSx Users

In order to install homebrew, run the following command in the terminal :

Once that is done, packages, such as NodeJS can be installed with the following command :

One can check if node and/or npm have been installed and their version number via the command node –v or npm –v.

Once npm is installed, typescript may be installed with the following command :

The –g parameter indicates that typescript will be installed globally, and not only in the current project.

Setting up the IDE

My favorite text editor is Atom. This can be installed using the installer available on the official website https://atom.io. [4]

There are many text editors to choose from, but Atom’s extensibility provides many levels of convenience that I have not found in other text editors. Of these conveniences, Atom has many complementary functions to Git—a version management system.

The atom interface includes various utilities that are useful for developing applications. The left pane gives an easy visual of the application file structure. The bottom most bar indicates the branch one is developing on (in this case, ‘master’).

Installing Dependencies

There are additional tools specifically for TypeScript. To benefit from them, I adownloaded atom-typescript and it’s dependencies.

Notice that I attempted to install the atom-ide-ui package, but had issues downloading them. For this reason, I opted to download individual dependencies to get atom-typescript working, including linter, linter-ui-default, and intentions—some external packages for providing some of the tool’s GUI.

Hovering over identifiers shows their types after restarting Atom and opening the ts files.

Examples using Typescript

Example 1

The following code demonstrates a simple program used to receive the number of items purchased and return a confirmation message.

To compile typescript code, one uses the following command :

This creates a *.js file with compiled code with javascript syntax. In this case, the only difference between the typescript code and the javascript code is the data type specification within the function parameter.

vs

This difference is important in illustrating a key advantage to using typescript in application development.

Modify the code to use the function in the following way :

Compilation of this code produces the following code :

While the javascript code is compiled, warnings are produced at compile time to indicate an error in terms of the data type specified and the data type used. Typescript offers a static analysis of your code, indicating that it may not run as expected.

Example 2

Typescript is object-oriented javascript, meaning that it supports object-oriented programming features, including classes and interfaces.

The purpose of this example is to demonstrate a class definition and object instantiation.

There are two class fields in this example, name, a boolean value indicating that they are a member and a static variable type. The constructor takes a couple string inputs and creates a randomly generated ID that is assigned to the id attribute.

Notice that there are a few things that these customer objects automatically take care of upon creation. Aside from providing a name, the customer ID and types are instantiated with the object.

This is the javascript after transpilation.

Note that methods can be accessed using dot notation.

Example 3

The factory pattern is a software design pattern that provides a generic interface to create objects. This is useful when the process of creating an object is complex or when multiple objects are created that share the same properties.

The example below builds upon the previous introduction to the customers class. Here, we create a customer creator class that takes parameters to create different types of customers based on parameters—basic or VIP.

The javascript after transpilation :

Useful resources for learning TypeScript

Programming Concepts: Static vs. Dynamic Type Checking

A. Krauss, "Programming Concepts: Static vs. Dynamic Type Checking," 2019. [Online]. Available : https://thesocietea.org/2015/11/programming-concepts-static-vs-dynamic-type-checking/. [Accessed March, 2019]

How to Install Node.js and NPM on a Mac

D. McFarland. "How to Install Node.js and NPM on a Mac," teamtreehouse.com, 2015. [Online]. Available : https://blog.teamtreehouse.com/install-node-js-npm-mac. [Accessed March, 2019]

The Free Dictionary

Farlex. "The Free Dictionary," 2019. [Online]. Available : https://encyclopedia2.thefreedictionary.com/superset. [Accessed March, 2019]

Learn TypeScript in 5 minutes

H. Borgen. "Learn TypeScript in 5 minutes," medium.com, 2018. [Online]. Available: https://medium.freecodecamp.org/learn-typescript-in-5-minutes-13eda868daeb. [Accessed February, 2019]