Basics

Table of Contents

In this lesson we will look at the variables in TypeScript and see the differences between TypeScript and JavaScript.

Topics on this page:

• Types - TypeScript types.
• Variables - how to declare variables.
• Arrays - More than in JavaScript.
• Enums - New in TypeScript.
• Tuples - New in TypeScript.

Variable Types

JavaScript has the following types (Important: The core primitive types in TypeScript are all lowercase!):

• string - Textual content wrapped in quatation marks (single or double). e.g "helo class" or 'hello class'.
• number - Always floating pont: Integer(2) or floating point (2.4) or octal (012) or hexadecimal (0xff) or binary (0b101010) ...
  A number value can be also Infinity, -Infinity or NaN (Not-A-Number means illegal number).
• boolean - Values true or false.
  "Falsy" values are 0, -0, NaN, "", false, null, undefined.
• undefined - The type of not declared (defined) variable is undefined. A variable declared using the var/let statement with no initial value specified has the value undefined. Thus, undefined can be both a type and a value.
• null - Means 'non existent' or no value. It is considered a primitive type, while if we check typeof(null) we get an object (acknowledged as JavaScript mistake :) null is often used to indicate that something may be expected, but is currently unavailable. Because JavaScript is case-sensitive, null is not the same as Null, NULL, or any other variant. Setting the value null to a variable defines the variable as an empty object.
  (null === undefined) gives false; (null == undefined) gives true; See operators for ==/===.
• symbol - ES6. Symbols are unique values created from string keys. Two Symbols created from the same key are not equal.
  
• Object - Every type that is not primitive

In JavaScript the above types are called dynamic since they are used at runtime.

TypeScript supports the same types as JavaScript and in addition (there are more advanced types like union and more):

• Array - An array of values. Can be written in two different ways.
• Enum - An enum is a way to associate names to a constant value, which can be either a number or a string. Technically enums can be mixed with string and numeric members, but it’s not clear why you would ever want to do so.
• Tuple - An array that contains a fixed number of elements with associated types.
a string
• Any - If the type of a variable is not known and we don't want the type checker to complain at compilation time, then the type of any can be used.
• Void - When there is no type associated with something, the void type should be used.
• Never - Represents the type of values that never occur (e.x. return type of functions that never return, ...). To indicate that a function always throws an exception or never finishes its execution. This type is not commonly used.

TypeScript brings static types to the JavaScript language, and those types are evaluated at compile time (without having to run the code). Static types can help warn you of possible errors without having to run the code. The types have to be specified in variable declaration. Type safety provides an extra level of protection against common errors/bugs.

Variables & Declarations

Variables are created using the var, let and const keywords as in ES6 with the same scopping as in ES6.

Best practice: Use let/const instead of var whenever possible. All variable declaration statements in a function should be placed as near to the top of the function as possible. This best practice increases the clarity of the code.

TypeScript has the same naming rules as JavaScript.

TypeScript is static typed language (as C, where the type of a variable is known at compile time). Thus, variable declaration contains type annotation like:

We don't have to specify types absolutely everywhere in the code because TypeScript has what is called type Inference. Type inference is what the TypeScript compiler uses to automatically determine types.

In the picture above, since we assign a number value, the type can be infered automatically to determine that num is going to be of typed number. Thus, we don't have to declare it as a type number explicitely. We can declare is without type annotation exactly as in JavaScript.
However, in TypeScript, anytime you use num it's going to automatically assume that num is going to be a number and it will type check for you in the TypeScript side.

Best practice: Always use type annotation if it is not inferred.

Type annotation examples are shown below. Run the following Code in TypeScript and see for errors.

Arrays

Arrays are accessed and used much like in JavaScript. In TypeScript an array can be declared in two different ways:

// square bracket notation
var arr: string[] = [ 'first', 'second' ];

// angle bracket notation
var arr: Array = [ 'first', 'second' ];
        

If an array has to store different types, it has to be declared as type 'any'.

Enums

An enum is a way to associate names to a constant value, which can be either a number, a string or mixed. It is similar to C, but is more powerfull. For more information see Enums.

An example of using strings values in enum:

enum Colors1 {
    Red = 'red',
    Blue = 'lightblue',
    Green = 'green',
}

var col: Colors1  = Colors.Blue;
console.log( col );

enum Colors2 {
    Red = 1,
    Blue = 3,
    Green = 5,
}

var col: Colors2  = Colors2.Blue;
console.log( Colors2[ 5 ] );
console.log( Colors2[ col ] );
        

Tuple

Tuple types allow you to express an array with a fixed number of elements whose types are known in adavnce (fixed types). When you see a tuple versus an array, you know that you’re dealing with one piece of data entity instead of multiple pieces of data.

See Tuples.

Example:

// declare a tuple type
let person: [ string, string, number ];

// initialize it
person = [ 'Tania', 'Orenstein', 100 ]; 
console.log( person[ 0 ], person[ 1 ], person[ 2 ]);

// tuple destructuring
let [ fName, lName, grade ] = person;
console.log ( fName, lName, grade );
        

Accessing an element outside the set of known indices fails with an error.