If you aren’t already familiar with JavaScript, this quick reference is intended to provide an overview of the basic core features of JavaScript you’ll be using within a TypeScript program.

Variables

Variables are used to store the application’s state in JavaScript and can contain data of any type from strings to numbers to objects to functions.

Listing A1-1 shows a selection of variables with simple types. Variables can be assigned at the same time as they are declared, in a single statement, or they can be declared and assigned separately. A variable will have the type corresponding to the value that was most recently assigned to it. If no value has been assigned, the value of the variable will be undefined.

Listing A1-1. Variables

// Variable declaration

var variable;

// Variable assignment

variable = 'A string is assigned';

// Dynamic assignment (changes variable's type to a number)

variable = 10;

You can store arrays in a variable. You can use the empty literal [] to create a new empty array and add items using array.push. You can also create and fill an array in a single step by placing the value inside the array literal, as shown in Listing A1-2.

Listing A1-2. Arrays

// Creating an empty array and adding values

var myArray = [];

myArray.push(1);
myArray.push(3);
myArray.push(5);

// Adding values using an array literal

var myLiteralArray = [1, 3, 5];

An object can be used to represent data in complex structures. Objects can contain properties that each are like a variable and can contain strings, numbers, arrays, functions, and other objects. Just as with arrays, you can create an empty object using an empty object literal {}, or create and fill an object in a single step by placing the properties within the object literal. Both styles are shown in Listing A1-3.

Listing A1-3. Objects

// Objects

var myObject = {};

myObject.title = 'Example Object';
myObject.value = 5;
// Object literals

var myLiteralObject = {
    title: 'Example Object',
    value: 5
};

In all of the examples, literal assignments have been made, rather than instantiating values using the new keyword. It is possible to create arrays using new Array(), objects using new Object(), and even strings using new String()—but in JavaScript the literal syntax is preferred.

Functions

Functions can be used to create re-usable blocks of code in your program. You can create a function using either a function declaration or a function expression as shown in Listing A1-4.

Listing A1-4. Functions

// Function declaration

function myFunction(name) {
    return 'Hello ' + name;
}

// 'Hello Steve'
var greeting = myFunction('Steve'),

// Function expression

var myFunctionExpression = function (name) {
    return 'Hi ' + name;
};

// 'Hi Steve'
var greeting = myFunctionExpression('Steve'),

When you declare a function using a function declaration it is created at parse time, which means it is available throughout your program wherever its scope is available. Using a function expression means the function is evaluated at runtime and it can only be called where both its scope is available and the calling code appears after the function expression.

Conditional Statements

Conditional statements can be used to branch logic in your program. You can use conditional statements to execute code only if a certain condition is met.

If statements allow code to be branched based on a custom condition that evaluates to either true or false. The if statements shown in Listing A1-5 execute different code depending on the value in the age variable, for example.

Listing A1-5. If statement

// If statements

var age = 21;

if (age > 18) {
    // Code to execute if age is greater than 18
}

if (age > 40) {
    // Code to execute if age is greater than 40
} else if (age > 18) {
    // Code to execute if age is greater than 18
    // but less than 41
} else {
    // Code to execute in all other cases
}

A switch statement is useful for controlling multiple branches based on a single variable and where only specific values will cause branching. Listing A1-6 shows a typical switch statement that can execute different code based on the value of the style variable. The default condition will execute if no other condition has been executed.

Listing A1-6. Switch statement

// Switch statements

var styles = {
    tranditional: 1,
    modern: 2,
    postModern: 3,
    futuristic: 4
};

var style = styles.tranditional;

switch (style) {
    case styles.tranditional:
        // Code to execute for traditional style
        break;
    case styles.modern:
        // Code to execute for modern style
        break;
    case styles.postModern:
        // Code to execute for post modern style
        break;
    case styles.futuristic:
        // Code to execute for futuristic style
        break;
    default:
        throw new Error('Style not known: ' + style);
}

Loops

Loops are used to repeat a section of code in your program. The most common loop in JavaScript is the for loop, which can be used to repeat an action for every item in an array as shown in Listing A1-7.

Listing A1-7. For loop

var names = ['Lily', 'Rebecca', 'Debbye', 'Ann'];

for (var i = 0; i < names.length; i++) {
    console.log(names[i]);
}

A while loop allows a section of code to be repeated until a condition is met, as shown in Listing A1-8. A common use of this would be to add a character to a string and repeat the process until the string matched a certain length.

Listing A1-8. While loop

var counter = 10;

while (counter > 0) {
    counter--;
    console.log(counter);
}

A do-while loop is almost identical to a while loop, except it will run the code at least one time, even if the condition doesn’t match.

Listing A1-9 is similar to the while loop shown previously, except the counter variable already matches the exit condition because it is not greater than zero. Despite this, the code runs one time before the condition is evaluated, causing the loop to exit.

Listing A1-9. Do-while loop

var counter = 0;

do {
    counter--;
    console.log(counter);
} while (counter > 0);

Summary

Although this Appendix is a fast dash through some very basic features of JavaScript, they are the essential parts that you need to know to get started with TypeScript. There is much more to learn in JavaScript and in the different environments it executes in.

Having read this quick start, you should be able to read this book without coming across anything too surprising as all of the TypeScript language features are described in detail.