This book aims to provide you with a broad overview of TypeScript's features, its limitations, and its ecosystem. You will learn about the TypeScript language, development tools, design patterns, and recommended practices.

This chapter will give you an overview of the history behind TypeScript and introduce you to some of its basics.

In this chapter, you will learn about the following concepts:

• The TypeScript architecture
• Type annotations
• Variables and primitive data types
• Operators
• Flow control statements
• Functions
• Classes
• Interfaces
• Namespaces

In this section, we will focus on TypeScript's internal architecture and its original design goals.

The following list describes the main design goals and architectural decisions that shaped the way the TypeScript programming language looks today:

• Statically identify JavaScript constructs that are likely to be errors: The engineers at Microsoft decided that the best way to identify and prevent potential runtime issues was to create a strongly-typed programming language and perform static type checking at compile time. The engineers also designed a language services layer to provide developers with better tools.
• High compatibility with existing JavaScript code: TypeScript is a superset of JavaScript; this means that any valid JavaScript program is also a valid TypeScript program (with a few small exceptions).
• Provide a structuring mechanism for larger pieces of code: TypeScript adds class-based object-orientation, interfaces, namespaces, and modules. These features will help us to structure our code in a much better way. We will also reduce potential integration issues within our development team and our code will become easier to maintain and scale by adhering to the best object-oriented principles and recommended practices.
• Impose no runtime overhead on emitted programs: It is common to differentiate between design time and execution time when thinking about TypeScript. We use the term design time or compile time to refer to the TypeScript code that we write while designing an application, while we use the term execution time or runtime to refer to the JavaScript code executed after compiling some TypeScript code.

TypeScript adds some features to JavaScript, but those features are only available at design time. For example, we can declare interfaces in TypeScript, but since JavaScript doesn't support interfaces, the TypeScript compiler will not declare or try to emulate this feature at runtime (in the output JavaScript code).

The Microsoft engineers provided the TypeScript compiler with some mechanisms, such as code transformations (converting TypeScript features into plain JavaScript implementations) and type erasure (removing static type notation), to generate clean JavaScript code. Type erasure removes not only the type annotations, but also all the TypeScript-exclusive language features such as interfaces.

Furthermore, the generated code is highly compatible with web browsers as it targets the ECMAScript 3 specification by default, but it also supports ECMAScript 5 and ECMAScript 6. In general, we can use the TypeScript features when compiling to any of the available compilation targets, but sometimes some features will require ECMAScript 5 or a higher version as the compilation target.

• Align with current and future ECMAScript proposals: TypeScript is not just compatible with existing JavaScript code; it is also compatible with some future versions of JavaScript. At first glance, we may think that some TypeScript features make it quite different from JavaScript, but the reality is that all the features available in TypeScript (except the type system features) follow the ECMAScript proposals, which means that many of the TypeScript files will eventually be available as native JavaScript features.
• Be a cross-platform development tool: Microsoft released TypeScript under the open source Apache license and it can be installed and executed in all major operating systems.

The TypeScript language has three main internal layers. Each of these layers is, in turn, divided into sublayers or components. In the following diagram, we can see the three layers (three different shades of gray) and each of their internal components (boxes):

Each of these main layers has a different purpose:

• Language: Features the TypeScript language elements.
• Compiler Performs the parsing, type checking, and transformation of your TypeScript code to JavaScript code.
• Language services: Generates information that helps editors and other tools provide better assistance features, such as IntelliSense or automated refactoring.
• IDE integration (VS Shim): The developers of the IDEs and text editors must perform some integration work to take advantage of the TypeScript features. TypeScript was designed to facilitate the development of tools that help to increase the productivity of JavaScript developers. Because of these efforts, integrating TypeScript with an IDE is not a complicated task. A proof of this is that the most popular IDEs these days include good TypeScript support.

Now that you have learned about the purpose of TypeScript, it's time to get our hands dirty and start writing some code.

Before you can start learning how to use some of the basic TypeScript building blocks, you will need to set up your development environment. The easiest and fastest way to start writing some TypeScript code is to use the online editor, available on the official TypeScript website at https://www.typescriptlang.org/play/index.html:

The preceding screenshot shows the appearance of the TypeScript playground. If you visit the playground, you will be able to use the text editor on the left-hand side of the screen to write TypeScript code. The code will then be automatically compiled into JavaScript. The output code will be inserted in the text editor located on the right-hand side of the screen. If your TypeScript code is invalid, the JavaScript code on the right-hand side will not be updated.

Alternatively, if you prefer to be able to work offline, you can download and install the TypeScript compiler. If you work with a Visual Studio version older than Visual Studio 2015, you will need to download the official TypeScript extension from https://marketplace.visualstudio.com/. If you are working with a version of Visual Studio released after the 2015 version (or Visual Studio Code), you will not need to install the extension, as these versions includes TypeScript support by default.

You can also use TypeScript from the command-line interface by downloading it as an npm module. Don't worry if you are not familiar with npm. For now, you only need to know that it stands for node package manager and is the default Node.js package manager. Node.js is an open source, cross-platform JavaScript runtime environment for executing JavaScript code server-side. To be able to use npm, you will need to install Node.js in your development environment. You will be able to find the Node.js installation files on the official website at https://nodejs.org/.

Once you have installed Node.js in your development environment, you will be able to run the following command in a console or Terminal:

npm install -g typescript

Create a new file named test.ts, and add the following code to it:

let myNumberVariable: number = 1; 
console.log(myNumberVariable); 

Save the file into a directory of your choice and open a command-line interface. Navigate to the directory in which you saved the file and execute the following command:

tsc test.ts

If everything goes well, you will find a file named test.js in the same directory in which the test.ts file is located. Now you know how to compile your TypeScript code into JavaScript code.

You can execute the output JavaScript code using Node.js:

node test.js

Now that we know how to compile and execute TypeScript source code, we can start learning about some of the TypeScript features.

As we have already learned, TypeScript is a typed superset of JavaScript. TypeScript added a static type system and optional static type annotations to JavaScript to transform it into a strongly-typed programming language.

TypeScript's type analysis occurs entirely at compile time and adds no runtime overhead to program execution.

The TypeScript language service is great at automatically detecting the type of a variable. However, there are certain cases where it is not able to automatically detect a type.

When the type inference system is not able to identify the type of a variable, it uses a type known as the any type. The any type is a value that represents all the existing types, and as a result, it is too flexible and unable to detect most errors, which is not a problem because TypeScript allows us to explicitly declare the type of a variable using what is known as optional static type annotations.

The optional static type annotations are used as constraints on program entities such as functions, variables, and properties so that compilers and development tools can offer better verification and assistance (such as IntelliSense) during software development.

Strong typing allows programmers to express their intentions in their code, both to themselves and to others in the development team.

For a variable, a type notation comes preceded by a colon after the name of a variable:

let counter; // unknown (any) type 
let counter = 0; // number (inferred) 
let counter: number; // number 
let counter: number = 0; // number 

As you can see, we declare the type of a variable after its name; this style of type notation is based on type theory and helps to reinforce the idea of types being optional.

When no type annotations are available, TypeScript will try to guess the type of the variable by examining the assigned values. For example, in the second line, in the preceding code snippet, we can see that the variable counter has been identified as a numeric variable, because its value is a numeric value. There is a process known as type inference that can automatically detect and assign a type to a variable. The any type is used as the type of a variable when the type inference system is not able to detect its type.

Please note that the companion source code might be slightly different from the code presented during the chapters. The companion source code uses namespaces to isolate each demo from all the other demos and sometimes appends numbers to the name of the variables to prevent naming conflicts. For example, the preceding code is included in the companion source code as follows:

namespace type_inference_demo { 
    let counter1; // unknown (any) type 
    let counter2 = 0; // number (inferred) 
    let counter3: number; // number 
    let counter4: number = 0; // number 
} 

The basic types are boolean, number, string, array, tuple, Object, object, null, undefined, {}, void, and enumerations. Let's learn about each of these basic types:

let isDone:   boolean = false;   

let height:   number = 6;   

let name: string   = "bob";   
name = 'Smith';   

let list: number[]   = [1, 2, 3];   

let list: Array<number>   = [1, 2, 3];   

let x: [string,   number];   
x = ["hello",   10]; // OK   
x = ["world",   20]; // OK   
x = [10, "hello"];   // Error   
x = [20, "world"];   // Error   

enum Color {Red,   Green, Blue};   
let c: Color =   Color.Green;   

let notSure: any   = 4; // OK   
notSure = "maybe   a string instead"; // OK   
notSure =   false; // OK   

let list: any[] =   [1, true, "free"];   
list[1] = 100;   

const obj =   {};    
obj.prop = "value";   // Error   

   
function   impossibleTypeGuard(value: any) {   
    if (   
        typeof   value === "string" &&   
        typeof   value === "number"   
    ) {   
        value; //   Type never   
    }    
}   

function   warnUser(): void {   
    console.log("This   is my warning message");   
}   

In TypeScript and JavaScript, undefined is a property in the global scope that is assigned as a value to variables that have been declared but have not yet been initialized. The value null is a literal (not a property of the global object) and it can be assigned to a variable as a representation of no value:

let testVar; // variable is declared but not initialized 
consoe.log(testVar); // shows undefined  
console.log(typeof testVar); // shows undefined 
 
let testVar = null; // variable is declared, and null is assigned as its value 
cosole.log(testVar); // shows null  
console.log(typeof testVar); // shows object 

When we declare a variable in TypeScript, we can use the var, let, or const keywords:

var myNumber: number = 1; 
let isValid: boolean = true; 
const apiKey: string = "0E5CE8BD-6341-4CC2-904D-C4A94ACD276E"; 

Variables declared with var are scoped to the nearest function block (or global, if outside a function block).

Variables declared with let are scoped to the nearest enclosing block (or global, if outside any block), which can be smaller than a function block.

The const keyword creates a constant that can be global or local to the block in which it is declared. This means that constants are block-scoped.

TypeScript supports the following arithmetic operators. We must assume that variable A holds 10 and variable B holds 20 to understand the following examples:

TypeScript supports the following comparison operators. To understand the examples, you must assume that variable A holds 10 as value and variable B holds 20 as value:

TypeScript supports the following logical operators. To understand the examples, you must assume that variable A holds 10 and variable B holds 20:

TypeScript supports the following bitwise operators. To understand the examples, you must assume that variable A holds 2 as value and variable B holds 3 as value:

TypeScript supports the following assignment operators:

The spread operator can be used to initialize arrays and objects from another array or object:

let originalArr1 = [ 1, 2, 3]; 
let originalArr2 = [ 4, 5, 6]; 
let copyArr = [...originalArr1]; 
let mergedArr = [...originalArr1, ...originalArr2]; 
let newObjArr = [...originalArr1, 7, 8]; 

The preceding code snippet showcases the usage of the spread operator with arrays, while the following code snippet showcases its usage with object literals:

let originalObj1 = {a: 1, b: 2, c: 3}; 
let originalObj2 = {d: 4, e: 5, f: 6}; 
let copyObj = {...originalObj1}; 
let mergedObj = {...originalObj1, ...originalObj2}; 
let newObjObj = {... originalObj1, g: 7, h: 8}; 

The spread operator can also be used to expand to an expression into multiple arguments (in function calls), but we will skip that use case for now.

This section describes the decision-making statements, the looping statements, and the branching statements supported by the TypeScript programming language.

The following code snippet declares a variable of type boolean and name isValid. Then, an if statement will check whether the value of isValid is equal to true. If the statement turns out to be true, the Is valid! message will be displayed on the screen:

let isValid: boolean = true; 
 
if (isValid) { 
  console.log("is valid!"); 
} 

The following code snippet declares a variable of type boolean and name isValid. Then, an if statement will check whether the value of isValid is equal to true. If the statement turns out to be true, the message Is valid! will be displayed on the screen. On the other hand, if the statement turns out to be false, the message Is NOT valid! will be displayed on the screen:

let isValid: boolean = true; 
 
if (isValid) { 
  console.log("Is valid!"); 
} else { 
  console.log("Is NOT valid!"); 
} 

The inline ternary operator is just an alternative way of declaring a double-selection structure:

let isValid: boolean = true; 
let message = isValid ? "Is valid!" : "Is NOT valid!"; 
console.log(message); 

The preceding code snippet declares a variable of type boolean and name isValid. Then, it checks whether the variable or expression on the left-hand side of the operator ? is equal to true.

If the statement turns out to be true, the expression on the left-hand side of the character will be executed and the message Is valid! will be assigned to the message variable.

On the other hand, if the statement turns out to be false, the expression on the right-hand side of the operator will be executed and the message, Is NOT valid! will be assigned to the message variable.

Finally, the value of the message variable is displayed on the screen.

The switch statement evaluates an expression, matches the expression's value to a case clause, and executes statements associated with that case. Switch statements and enumerations are often used together to improve the readability of the code.

In the following example, we declare a function that takes an enumeration named AlertLevel.

Inside the function, we will generate an array of strings to store email addresses and execute a switch structure. Each of the options of the enumeration is a case in the switch structure:

enum AlertLevel{ 
 info, 
  warning, 
  error   
} 
 
function getAlertSubscribers(level: AlertLevel){ 
  let emails = new Array<string>(); 
  switch(level){ 
  case AlertLevel.info: 
     emails.push("cst@domain.com"); 
     break; 
  case AlertLevel.warning: 
     emails.push("development@domain.com"); 
     emails.push("sysadmin@domain.com"); 
     break; 
  case AlertLevel.error: 
    emails.push("development@domain.com"); 
    emails.push("sysadmin@domain.com"); 
    emails.push("management@domain.com"); 
    break; 
  default: 
    throw new Error("Invalid argument!"); 
  } 
  return emails; 
} 
 
getAlertSubscribers(AlertLevel.info); // ["cst@domain.com"] 
getAlertSubscribers(AlertLevel.warning); // 
 ["development@domain.com", "sysadmin@domain.com"]

The value of the level variable is tested against all the cases in the switch. If the variable matches one of the cases, the statement associated with that case is executed. Once the case statement has been executed, the variable is tested against the next case.

Once the execution of the statement associated with a matching case is finalized, the next case will be evaluated. If the break keyword is present, the program will not continue the execution of the following case statement.

If no matching case clause is found, the program looks for the optional default clause, and if found, it transfers control to that clause and executes the associated statements.

If no default clause is found, the program continues execution at the statement following the end of switch. By convention, the default clause is the last clause, but it does not have to be so.

The while expression is used to repeat an operation while a certain requirement is satisfied. For example, the following code snippet declares a numeric variable i. If the requirement (the value of i is less than 5) is satisfied, an operation takes place (increase the value of i by one and display its value in the browser console). Once the operation has completed, the accomplishment of the requirement will be checked again:

let i: number = 0; 
while (i < 5) { 
  i += 1; 
  console.log(i); 
} 

In a while expression, the operation will take place only if the requirement is satisfied.

The do...while expression can be used to repeat an instruction until a certain requirement is not satisfied. For example, the following code snippet declares a numeric variable i and repeats an operation (increase the value of i by one and display its value in the browser console) for as long as the requirement (the value of i is less than five) is satisfied:

let i: number = 0; 
do { 
  i += 1; 
  console.log(i); 
} while (i < 5); 

Unlike the while loop, the do...while expression will execute at least once, regardless of the tested expression, as the operation will take place before checking whether a certain requirement is satisfied or not.

The for...in statement by itself is not a bad practice; however, it can be misused, for example, to iterate over arrays or array-like objects. The purpose of the for...in statement is to enumerate over object properties:

let obj: any = { a: 1, b: 2, c: 3 }; 
 
for (let key in obj) { 
    if (obj.hasOwnProperty(key)) { 
        console.log(key + " = " + obj[key]); 
    } 
} 
 
// Output: 
// "a = 1" 
// "b = 2" 
// "c = 3" 

The following code snippet will go up in the prototype chain, also enumerating the inherited properties. The for...in statement iterates the entire prototype chain, also enumerating the inherited properties. When you want to enumerate only the object's properties that aren't inherited, you can use the hasOwnProperty method.

In JavaScript, some built-in types are built-in iterables with a default iteration behavior. To be an iterable, an object must implement the @@iterator method, meaning that the object (or one of the objects in its prototype chain) must have a property with a @@iterator key, which is available via constant Symbol.iterator.

The for...of statement creates a loop iterating over iterable objects (including array, map, set, string, arguments object, and so on):

let iterable = [10, 20, 30]; 
 
for (let value of iterable) { 
  value += 1; 
  console.log(value); 
} 

The for statement creates a loop that consists of three optional expressions, enclosed in parentheses and separated by semicolons, followed by a statement or a set of statements executed in the loop:

for (let i: number = 0; i < 9; i++) { 
   console.log(i); 
} 

The preceding code snippet contains a for statement. It starts by declaring the variable i and initializing it to 0. It checks whether i is less than 9, performs the two succeeding statements, and increments i by one after each pass through the loop.

Just as in JavaScript, TypeScript functions can be created either as a named function or as an anonymous function, which allows us to choose the most appropriate approach for an application, whether we are building a list of functions in an API or a one-off function to hand over to another function:

// named function 
function greet(name?: string): string { 
  if(name){ 
    return "Hi! " + name; 
  } else { 
    return "Hi!"; 
  } 
} 
 
// anonymous function 
let greet = function(name?: string): string { 
  if (name) { 
    return "Hi! " + name; 
  } else { 
    return "Hi!"; 
  } 
} 

As we can see in the preceding code snippet, in TypeScript, we can add types to each of the parameters and then to the function itself to add a return type. TypeScript can infer the return type by looking at the return statements, so we can also optionally leave this off in many cases.

There is an alternative syntax for functions that use the => operator after the return type and don't use the function keyword:

let greet = (name: string): string => { 
    if(name){ 
      return "Hi! " + name; 
    } 
    else 
    { 
      return "Hi"; 
    } 
}; 

Now that we have learned about this alternative syntax, we can return to the previous example, in which we were assigning an anonymous function to the greet variable. We can now add the type annotations to the greet variable to match the anonymous function signature:

let greet: (name: string) => string = function(name: string): 
 string { 
    if (name) { 
      return "Hi! " + name; 
    } else { 
      return "Hi!"; 
    } 
}; 

Now you know how to add type annotations to force a variable to be a function with a specific signature. The usage of this kind of annotation is really common when we use a callback (functions used as an argument of another function):

function add( 
    a: number, b: number, callback: (result: number) => void 
) { 
    callback(a + b); 
} 

In the preceding example, we are declaring a function named add that takes two numbers and a callback as a function. The type annotations will force the callback to return void and take a number as its only argument.

ECMAScript 6, the next version of JavaScript, adds class-based object-orientation to JavaScript and, since TypeScript includes all the features available in ES6, developers are allowed to use class-based object orientation today, and compile them down to JavaScript that works across all major browsers and platforms, without having to wait for the next version of JavaScript.

Let's take a look at a simple TypeScript class definition example:

class Character { 
  public fullname: string; 
  public constructor(firstname: string, lastname: string) { 
    this.fullname = `${firstname} ${lastname}`; 
  } 
  public greet(name?: string) { 
    if (name) { 
      return `Hi! ${name}! my name is ${this.fullname}`; 
    } else { 
      return `Hi! my name is ${this.fullname}`; 
    } 
  } 
} 
 
let spark = new Character("Jacob","Keyes"); 
let msg = spark.greet();              
console.log(msg); // "Hi! my name is Jacob Keyes" 
 
let msg1 = spark.greet("Dr. Halsey");  
console.log(msg1); // "Hi! Dr. Halsey! my name is Jacob Keyes" 

In the preceding example, we have declared a new class, Character. This class has three members: a property called fullname, a constructor, and a method greet. When we declare a class in TypeScript, all the methods and properties are public by default. We have used the public keyword to be more explicit; being explicit about the accessibility of the class members is recommended but it is not a requirement.

You'll notice that when we refer to one of the members of the class (from within itself), we prepend the this operator. The this operator denotes that it's a member access. In the last lines, we construct an instance of the Character class using a new operator. This calls into the constructor we defined earlier, creating a new object with the Character shape and running the constructor to initialize it.

TypeScript classes are compiled into JavaScript functions in order to achieve compatibility with ECMAScript 3 and ECMAScript 5.

In TypeScript, we can use interfaces to ensure that a class follows a particular specification:

interface LoggerInterface{ 
    log(arg: any): void; 
} 
 
class Logger implements LoggerInterface { 
    log (arg: any){ 
        if (typeof console.log === "function") { 
            console.log(arg); 
        } else { 
            console.log(arg); 
        } 
    } 
} 

In the preceding example, we have defined an interface LoggerInterface and a class Logger, which implements it. TypeScript will also allow you to use interfaces to declare the type of an object. This can help us to prevent many potential issues, especially when working with object literals:

interface UserInterface { 
    name: string; 
    password: string; 
} 
 
// Error property password is missing 
let user: UserInterface = { 
    name: "" 
}; 

Namespaces, also known as internal modules, are used to encapsulate features and objects that share a certain relationship. Namespaces will help you to organize your code. To declare a namespace in TypeScript, you will use the namespace and export keywords:

namespace geometry { 
    interface VectorInterface { 
        /* ... */ 
    } 
    export interface Vector2DInterface { 
        /* ... */ 
    } 
    export interface Vector3DInterface { 
        /* ... */ 
    } 
    export class Vector2D 
        implements VectorInterface, Vector2dInterface { 
        /* ... */ 
    } 
    export class Vector3D 
        implements VectorInterface, Vector3DInterface { 
        /* ... */ 
    } 
} 
 
let vector2DInstance: geometry.Vector2DInterface = new  
geometry.Vector2D(); 
let vector3DInstance: geometry.Vector3DInterface = new  
geometry.Vector3d(); 

In the preceding code snippet, we have declared a namespace that contains the classes vector2D and vector3D and the interfaces VectorInterface, Vector2DInterface, and Vector3DInterface. Note that the first interface is missing the keyword export. As a result, the interface VectorInterface will not be accessible from outside the module's scope.

Now that we have learned how to use the basic TypeScript building blocks individually, let's take a look at a final example in which we will use modules, classes, functions, and type annotations for each of these elements:

namespace geometry_demo { 
     
    export interface Vector2DInterface { 
        toArray(callback: (x: number[]) => void): void; 
        length(): number; 
        normalize(): void; 
    } 
 
    export class Vector2D implements Vector2DInterface { 
        private _x: number; 
        private _y: number; 
        constructor(x: number, y: number) { 
            this._x = x; 
            this._y = y; 
        } 
        public toArray(callback: (x: number[]) => void): void { 
            callback([this._x, this._y]); 
        } 
        public length(): number { 
            return Math.sqrt( 
                this._x * this._x + this._y * this._y 
            ); 
        } 
        public normalize() { 
            let len = 1 / this.length(); 
            this._x *= len; 
            this._y *= len; 
        } 
    } 
 
} 

The preceding example is just a small portion of a basic 3D engine written in JavaScript. In 3D engines, there are a lot of mathematical calculations involving matrices and vectors. As you can see, we have defined a module Geometry that will contain some entities; to keep the example simple, we have only added the class Vector2D. This class stores two coordinates (x and y) in 2D space and performs some operations on the coordinates. One of the most widely used operations in vectors is normalization, which is one of the methods in our Vector2D class.

3D engines are complex software solutions, and as a developer, you are much more likely to use a third-party 3D engine than create your own. For this reason, it is important to understand that TypeScript will not only help you develop large-scale applications but also interact with complex libraries.

In the following code snippet, we will use the module declared earlier to create a Vector2D instance:

let vector: geometry_demo.Vector2DInterface = new geometry_demo.Vector2D(2,3); 
vector.normalize(); 
vector.toArray(function(vectorAsArray: number[]){ 
  console.log(`x: ${vectorAsArray[0]}, y: ${vectorAsArray[1]}`); 
}); 

The type-checking and IntelliSense features will help us create a Vector2D instance, normalize its value, and convert it into an array to finally show its value on the screen with ease:

In this chapter, you have learned about the purposes of TypeScript. You have also learned about some of the design decisions made by the TypeScript engineers at Microsoft.

Toward the end of this chapter, you learned a lot about the basic building blocks of a TypeScript application, and we started to write some TypeScript code for the first time.

We now know the basics of type annotations, variables, primitive data types, operators, flow control statements, functions, interfaces, classes, and namespaces.

In the next chapter, we will learn more about the TypeScript type system.