Types

• In TypeScript we can define types for variables, functions, classes, interfaces, enums, etc.
• Types are optional, but they are useful for documentation and type checking
• A lot of errors are caught by the compiler

Primitive types

• Primitive types are the basic types in TypeScript

let isDone: boolean = false;
let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;
let big: bigint = 100n;
let color: string = "blue";
let sentence: string = `Hello, my favourite color is ${color}.`;
let iDontExist: undefined = undefined;
let iAmNull: null = null;
let aSymbol: symbol = Symbol("a symbol"); 

• JavaScript (after compilation):

let isDone = false;
let decimal = 6;
let hex = 0xf00d;
let binary = 0b1010;
let octal = 0o744;
let big = 100n;
let color = "blue";
let sentence = `Hello, my favourite color is ${color}.`;
let iDontExist = undefined;
let iAmNull = null;
let aSymbol = Symbol("a symbol");

Try this:

• Change the target to es5 and see what happens:

let sentence = "Hello, my favourite color is ".concat(color, ".");

• Template Literals are a new feature in ES6, so in ES5 we have to use the good old concat method
• BigInt literals are not available when targeting lower than ES2020

Reference types

Arrays

• Declaring an array using a literal implicitly types the array:

let names = ['John', 'Jane', 'Mary'];
names.push('Bob');

• We now can't add a variable other than a string to the array

let names = ['John', 'Jane', 'Mary'];
names.push('Bob');
names.push(10); // Argument of type 'number' is not assignable to parameter of type 'string'

• You still can create a mixed array
• The array type will be of type (type1 | type2 | ...)[]:

let mixed = ['John', 'Jane', 'Mary', 1989, 2001]; // Type = (string | number)[] --> read as 'string or number'
mixed.push(1);
mixed.push('Bob');
mixed.push(1.1);
mixed.push(true); // Argument of type 'boolean' is not assignable to parameter of type 'string | number'

• Using explicit typing:

let names : string[] = ['John', 'Jane', 'Mary'];
let mixed: (string | number)[] = ["John", "Jane", "Mary", 1989, 2001]; // string or number

Compilation doesn't quit on error

• You might have noticed it already, but even when there is a compilation error, we always get a fully compiled js file.
• The purpose of these errors are to find bugs while developing, but as JavaScript is so dynamic, it allows you to ignore them (it's very NOT recommended to do so!)

Objects

• Declaring an object using a literal implicitly types the object:

let dog = {
    name: 'Leo', // string
    breed: 'Labrador', // string
    age: 1, // number
};

dog.name = 'Max';
dog.age = '2'; // Type 'string' is not assignable to type 'number'
dog.owner = 'Kristof'; // Property 'owner' does not exist on type 
// '{ name: string; breed: string; age: number; }'

• We can override the object
• But it has to have exactly the same properties (names and types)

// This works
dog = {
    name: 'Max',
    breed: 'Labrador',
    age: 2,
}

// This doesn't work
dog = {
    name: 'Max',
    breed: 'Labrador',
}
// Property 'age' is missing in type '{ name: string; breed: string; }' 
// but required in type '{ name: string; breed: string; age: number; }'

Any type

• The any type is a powerful way to work with an unknown type
• A variable with the any type is allowed to have any type, and the type can be changed later

let age: any;

age = 32;
age = '32';
age = true;

let mixed: any[] = [1, '2', true];

Caution

• If you can, do work with types
• Only use any if you don't know what the value will be in the future