Learning TypeScript 2.x: Develop and maintain captivating web applications with ease , Second Edition

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 
} 

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.

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("[email protected]"); 
     break; 
  case AlertLevel.warning: 
     emails.push("[email protected]"); 
     emails.push("[email protected]"); 
     break; 
  case AlertLevel.error: 
    emails.push("[email protected]"); 
    emails.push("[email protected]"); 
    emails.push("[email protected]"); 
    break; 
  default: 
    throw new Error("Invalid argument!"); 
  } 
  return emails; 
} 
 
getAlertSubscribers(AlertLevel.info); // ["[email protected]"] 
getAlertSubscribers(AlertLevel.warning); // 
 ["[email protected]", "[email protected]"]

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.