Types

TypeScript supports all the types used in JavaScript:

  • boolean
  • number
  • string
  • arrays

TypeScript also adds the following types:

  • enum
  • any
  • void

Basic Types

Boolean

The most basic datatype is the simple true/false value, which JavaScript and TypeScript call a boolean value.

let isEnabled: boolean = true;

Assigning non-Boolean value to the variable will produce an error.

isEnabled = 'YES';
// logger.ts(2,1): error TS2322: Type '"YES"' is not assignable to type 'boolean'.

It is also possible annotating function or method return types.

function isEmpty(str: string): boolean {
    return !str;
}

Number

TypeScript maps all JavaScript numbers to the number type:

  • floating point numbers (default JavaScript type for all numbers)
  • decimal numbers
  • hexadecimal numbers
  • binary literals (ES6)
  • octal literals (ES6)

Here's an example:

let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

String

Typescript supports ES6 template literals (formerly known as template strings).

As in ECMAScript 6, you use backticks (`) to enclose a string literal and ${} to interpolate JavaScript variables or arbitrary expressions.

Either double quotes (") or single quotes (') can be used to surround string data.

let firstName: string = "Joan";
let lastName: string = 'Doe';
let fullName: string = `${firstName} ${lastName}`;
let template: string = `
    <h1>Title<h1>
    <p>Hello, ${fullName}</p>
`;

Arrays

There are two main ways you can provide type definition for arrays of values in TypeScript:

let arr1: string[] = [];
let arr2: Array<string> = new Array();

You can also initialize arrays upon declaring them:

let arr1: string[] = ['hello', 'world'];
let arr2: Array<string> = ['hello', 'world'];

let flags1: boolean[] = [true, false, true, false];
let flags2: boolean[] = new Array(false, true);

As in JavaScript arrays, you can push elements and access them by index

let users: string[] = [];

users.push('user1');

console.log(`First user: ${users[0]}`);

The sample above demonstrates array element access together with string interpolation. When executed it should produce:

First user: user1

Enum

TypeScript provides support for an enumerated type known in many languages (Swift, C#, Java, C, and others). This data type consists of a set of named values mapped to numbers.

enum Suit { Club, Diamond, Heart, Spade };

let s: Suit = Suit.Spade;

By default numbering of enum members starts with 0 and increments by one. You have full control of the values if needed.

enum Suit { Club = 1, Diamond, Heart, Spade };
enum Suit { Club = 1, Diamond = 2, Heart = 4, Spade = 8 }

Another valuable feature is accessing by a numeric value.

enum Suit { Club, Diamond, Heart, Spade };

console.log(Suit[0]); // Club

It must be noted however that you access names by the numeric values, not by an array index as it may seem.

enum Suit { Club = 1, Diamond, Heart, Spade };

console.log(Suit[0]); // undefined
console.log(Suit[1]); // Club

Any

A special any type is used to opt-out of the TypeScript type-checking process and addresses the following cases:

  • dynamic content (objects created on the fly)
  • 3rd party libraries (having no TypeScript support via definition files)
let obj: any = {
    log(message) {
        console.log(message);
    }
};
obj.log('hello world');

Please note that by opting-out of the type-checking process you take full responsibility for safety checks, as now TypeScript compiler is not able to verify the code at compile time.

The following example shows valid TypeScript code:

obj.log('hello world'); 
obj.helloWorld('log');

However, at runtime the second line causes a TypeError exception:

hello world
TypeError: obj.helloWorld is not a function

So it is recommended using any type only where necessary.

Void

The void type is used to declare a function does not return any value explicitly.

class Logger {

    log(message: string): void {
        console.log(message);
        return true;
    }

}

If you try compiling the code above you should get an error:

error TS2322: Type 'true' is not assignable to type 'void'.

You can fix the type-check error by removing return statement from the log method:

class Logger {

    log(message: string): void {
        console.log(message);
    }

}

You might also be using void types as function parameters or with Interfaces:

function fn(x: () => void) {
  x();
}

interface Logger {

  log(message: string): void;
  warn(message: string): void;
  error(message: string): void;

}

You will get more information on Interfaces later in this book.